Archivio per il tag css

Con CSS 3.0 sarà possibile ruotare/traslare gli elementi di una pagina

Published on 13 dicembre 2008 in firefox. 5 Comments Tags: , , .

CSS 3.0 permetterà di applicare delle (rotazioni/traslazioni) sugli elementi delle pagine Web. La cosa probabilmente è, per il momento, solamente un giochetto, ma nel futuro credo si possano aprire molte possibilità per gli webmaster, magari si potranno creare delle animazioni usando solamente Javascript e modificatori CSS.

Questo è un video, di Aza Raskin, dove viene mostrato come creare un comando per alterare le pagine eseguendo rotazioni e traslazioni varie:


Ubiquity Tutorial: Turn a page upside-down from Aza Raskin on Vimeo.

Chi avesse Ubiquity può provare con questo codice: (copiato dal video)

CmdUtils.CreateCommand({
  name: "ruota",
  takes: {degrees:noun_arb_text},
  execute: function(degrees){
	var doc = CmdUtils.getDocument();
	jQuery(doc.body).css("-moz-transform", "rotate("+degrees.text+"deg)");
  },
  preview: function(pblock,degrees){
  pblock.innerHTML="Ruota la pagina di "+degrees.text+" gradi";
  }
  });
CmdUtils.CreateCommand({
  name: "flip",
  execute: function(){
	var doc = CmdUtils.getDocument();
	jQuery(doc.body).css("-moz-transform", "rotate(90deg)");
  },
  preview: function(pblock){
  pblock.innerHTML="rotate the page";
  }
  });

Naturalmente, essendo molto rozza non è previsto un noun_type per i gradi, inserendo qualcosa diverso da un numero potrebbero esserci strani effetti. Per vedere cosa succede provare con ruota 90 o ruota 180 e poi appendersi al soffitto a testa in giù :-P . Ecco come appare Google dando il comando ruota 15:

Homepage di Google ruotata di 15 gradi

Chi non dispone di Ubiquity ma ha Firefox 3.1, può provare cliccando su questi due link:

AGGIORNAMENTO: ho aggiunto il codice per Webkit, non avendo una nightly di Safari per provare non so se funziona o meno. Se qualcuno passa di qui con una nightly di Webkit può lasciare un commento :-)

Non credo che provando con altri browser accada nulla, in quanto quella proprietà ha il prefisso -moz, anche se le ultime versioni di WebKit dovrebbero supportare questa specifica CSS (probabilmente si chiamerà webkit-transfrom).

Fonte: Aza’s Thoughts

Technorati Tags: , ,

CSS 3.0 e caratteri

Published on 2 novembre 2008 in web. 16 Comments Tags: , , .

Prendendo spunto da un bel articolo di John Resig – un uomo un genio – pubblicato su ArsTechnica, ho preparato una piccola paginetta di test

Questo il risultato con Firefox 3.0.3:

Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Pagina di test come appare in Firefox 3.0.3

Questo il risultato con Firefox 3.1:

Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.1b1) Gecko/20081007 Firefox/3.1b1

Immagine di come appare la pagina di test con Firefox 3.1 (beta)

Tutti i browser di nuova generazione infatti saranno in grado di riprodurre anche font non installati nel proprio sistema operativo, a patto che essi vengano correttamente dichiarati nel foglio di stile. Per indicare ad un browser il tipo di carattere utilizzato sarà sufficiente inserire nel foglio di stile:

@font-face {
  font-family: "Arabella";
  src: url(Arabella.ttf) format("truetype");
}

(sostituendo ad Arabella il nome del carattere che si vuole definire)

Ciò fatto, sarà possibile utilizzare il font nelle nostre pagine:

font-family: Arabella, serif;

In questo modo il browser utilizzerà la risorsa specificata, nel caso in cui il font non sia installato sulla propria macchina. Senza dubbio una grande notizia per tutti i Web designer che non si dovranno preoccupare che il font sia o meno installato sul computer del visitatore, in quanto, il font potrà essere reperibile online per la corretta visualizzazione della pagina, che apparirà così come il web designer l’ha pensata.

Problema ? Le licenze di utilizzo dei caratteri , purtroppo sono davvero restrittive :-( . Al sottoscritto, ad esempio, piacerebbe moltissimo usare il Calibri: è molto leggibile, risulta molto adatto per una pagina Web, ha una buoissima resa con l’anti aliasing (Clear Type), però se lo facessi andrei contro la licenza del carattere che è uno dei nuovi font di Windows Vista. Non che sia difficile reperire i font inclusi in Vista: è sufficiente scaricarsi il viewer per i documenti di Office (freeware), scompattare il file e cercarsi i caratteri, ciò nonostante sarebbe “illegale” renderli disponibili in un foglio di stile :-P .

Fortunatamente c’è anche chi, come Dieter Steffmann, rende disponibili gratuitamente dei caratteri molto ben fatti. Per la pagina di test ho usato uno di questi caratteri, Arabella, che nessun web designer sano di mente si sognerebbe mai di utilizzare in una pagina visto che è praticamente illegibile, ma per una pagina di test rende benissimo le differenze con un font senza grazie (di grazie ne ha pure troppe).

Chi vuole può usare il foglio di stile creato da John Resig (che io ho utilizzato per la pagina di test) che definisce tutti i font creati da Dieter Steffmann, ovviamente sarà necessario importarlo nel foglio di stile utilizzato e includere nella stessa cartella i file ttf dei vari caratteri.

Link:

Technorati Tags: , , ,

Selezionare il codice inserito quando ci si clicca sopra

Published on 1 aprile 2008 in blog. 8 Comments Tags: , , .

Da quando ho iniziato a scrivere sul blog mi sono sempre trovato in difficoltà con l’inserimento di codice, avevo cominciato mettendolo nelle textarea – cosa ignobile da fare col senno di poi – in modo da non rovinare il layout quando nel codice le parole erano troppo lunghe e non venivano wrappate correttamente. Successivamente mi son letto un po’ di manuali base di CSS e ho finalmente capito che il metodo migliore è inserirlo all’interno del tag PRE, assicurandosi di definire uno stile che tenga conto dell’overflow e non faccia sballare troppo la pagina.

Questo è lo stile che uso io:

pre {
	font-family: Courier,monospace;
	background: #EEE;
	font-size: 1.1em;
	line-height: 1.1em;
	border: dashed #666 1px;
	padding: 15px 20px 15px 20px;
	overflow: auto;
}

In particolare la riga:

overflow: auto;

serve per “nascondere” le righe troppo lunghe (è facile accorgersene perchè appariranno le scrollbar). Il fonte tutto Il resto è modificabile a piacimento. Io uso un font monospace come il Courier ma è possibile opti per un altro tipo di carattere in futuro.

Un’altra cosa che mi è sempre piaciuta è fare in modo che il codice inserito sia automaticamente selezionato quando ci si clicca sopra, cosa che devo aver visto su qualche blog di cui non ricordo l’indirizzo. Cercando un po’ con Google sono finalmente riuscito a trovare una risposta :-) . Per fare in modo che il codice venga automaticamente selezionato è necessario associare all’azione onClick dell’elemento un po’ di codice Javascript.

Ecco quindi cosa aggiungere al tag PRE per selezionare automaticamente il testo in esso contenuto:

<pre onClick="
if (window.getSelection) {
	var sel = window.getSelection();
	var range = document.createRange();
	range.selectNodeContents(this);
	sel.removeAllRanges();
	sel.addRange(range);
}
else // per colpa di IE serve un if
	document.selection.empty();
	var range = document.body.createTextRange();
	range.moveToElementText(this);
	range.select();
}
">
codice
</pre>

(gli a capo sono messi solo per motivi di visualizzazione)

Come al solito per farlo funzionare anche con IE è necessario scrivere codice aggiuntivo :-P Naturalmente è possibile associare il codice anche a tag diversi dal PRE, mentre per i tag INPUT e TEXTAREA si deve modificare un po’ il codice utilizzato.

Naturalmente io aggiungo quel codice automaticamente usando un programmino di text & replace (praticamente scrivo pre seguito da TAB), è comunque possibile aggiungere uno script alla pagina e richiamare il codice nel seguente modo:

<pre onClick="autoSelect(this);">
codice
</pre>

Per il codice della funzione autoSelect vi rimando all’articolo da cui ho scopiazzato il codice :-) .

Nel mio caso, non inserendo codice così spesso, preferisco far risparmiare al browser il caricamento di una funzione Javascript inutilizzata nella maggior parte delle pagine. Per lo stesso motivo, non credo di sovvracaricare ulteriormente il blog con uno script di syntax hightlighting

Technorati Tags: , ,

Come riconoscere i link nofollow

Published on 1 agosto 2007 in web. 10 Comments Tags: , , , .

nell’attesa che mi rispondano sul forum inglese di Simple Php Blog su come rimuovere il nofollow nei commenti, ecco un trucchetto che può essere utilizzato per riconoscere al volo i link nofollow presenti in una pagina web. Il seguente metodo non richiede l’installazione di nessuna estensione SEO oriented, ma solo di aggiungere qualche riga di codice al file userContent.css (naturalmente si può fare via Stylish se la si ha già installata).

Mozilla Firefox (e come lui tutti i browser Gecko based come Seamonkey e K-Meleon) permettono di applicare delle regole di stile alle pagine Web sovvrascrivendo quelle impostate dal webmaster. Queste regole preferenziali vengono specificate nel file: userContent.css che si trova nella cartella del Profilo di Firefox. Ebbene, usando il file userContent.css si può fare in modo di colorare in maniera evidente i link con rel=”nofollow” in modo che siano ben distinguibili.

a[rel $='nofollow']
{
background-color: red !important;
color: #0000FF !important;
font-weight: bold !important;
text-decoration: none !important;
}

La prima riga va interpretata nel seguente modo: “A tutti i link con attributorel che finisce con nofollow applica il seguente stile”, il codice fra parentesi graffe definisce il colore dello sfondo, del testo, il livello di grassetto del carattere e il tipo di decorazione del testo (nessuna in questo caso).

L’uso dell’espressione regolare è necessaria perché ho visto che su alcuni siti (per esempio i blog WordPress) si utilizza un nofollow “avanzato” che distingue fra link interni ed esterni.

Ovviamente lo stesso trucchetto si può usare per i link con rel=”tag”, ma la cosa è molto meno interessante.

NOTA: il file userContent.css deve essere modificato con Firefox chiuso e utilizzando un editor di testo come Crimson Editor o Notepad++ o al limite il Notepad, Wordpad, Word e Writer non vanno bene.

@otoriousxl spiega come ottenere la stessa cosa con Epiphany:
Epiphany: evidenziare i link nofollow

Altri post che potrebbero interessare:
Cambiare il cursore quando passa sopra ai link con target=”blank” o javascript,
Cambiare il cursore quando il link punta a file DOC o PDF.

Cambiare il cursore a seconda del tipo di file a cui punta il link

Published on 26 gennaio 2007 in firefox. 0 Comments Tags: , , , .

Avevo già postato come cambiare il cursore del mouse quando passa sopra a dei link Javascript e a link con target=_blank”, vediamo ora come si può far apparire l’icona del tipo di file a cui punta il link. La cosa è fattibile anche utilizzando l’estensione Link Alert, qui cercherò di ottenere lo stesso risultato solamente utilizzando il file userContent.css.

Ecco gli strumenti utilizzati:

  • la possibilità di sovvrascrivere gli stili di una pagina web usando il file userContent.css;
  • il supporto ai data link; per ottenere il data link, se non si possiede un’applicazione apposita, si può utilizzare: The data: URI Kitchen;
  • una nuova potenzialità di CSS 2.1 che è spiegata nei dettagli in questo bellissimo articolo..

Per quanto riguarda il file userContent.css non c’è nulla da dire (chi non sa di cosa sto parlando legga la documentazione linkata sopra), sul perché usare i data link e non un link ad un’immagine locale si spiega col fatto che il codice appare come eseguito dalla pagina web e Firefox blocca l’accesso ai file locali per ragioni di sicurezza (si può creare una policy per bypassare questa restrizione ma è una pessima idea). Si potrebbe usare un’immagine hostata online ma questo rallenterebbe la navigazione.
Per quanto riguarda i CSS l’articolo in lingua inglese è molto comprensibile, la nuova capacità che si sfrutta è la possibilità di applicare uno stile a qualcosa che finisce con particolari caratteri, per esempio:

a[href $='.pdf']

indica un elemento della forma <a href="......pdf">, cioè un link ad un file pdf. Il carattere $ deve essere tradotto come “finisce con”. Nell’articolo (di cui consiglio la lettura) ci sono altre interessanti applicazioni su come utilizzare queste nuove potenzialità dei CSS che – udite, udite – vengono supportate anche da IE7 :-O :-O.
Copiare il seguente codice nel file userContent.css:

/* Mostra l'icona dei DOC quando il cursore passa sopra ad un link che punta a un file DOC */
	a[href $='.doc']
{
	cursor: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%20%00%00%00%20%08%06%00%00%00szz%F4%00%00%00%09pHYs%00%00%0E%C3%00%00%0E%C3%01%C7o%A8d%00%00%07%8DIDATx%9C%C5%95%DBO%93y%1E%87%BB%17%26%FE%05%DE%7BE%26%F1b%C7M%5Cg%C3do%C6%CD%1A%D9%98qf%8D!kf%5C%8D%8E%C3%EC%B2%EB%60t2%8C%19%ED%8E%83%D4%F5%C4%8Ex%A8%02R%E4P%04%11%A5%22%08%83%3A*%A8%20x%00%81RhK%E9%F9%40%5B%DA%BE%A7g%2F%DE%F6%85z%18Iv%B3%DB%E4%93%A6i%D2%CF%F3%7C%BF%EF%EFW%9D%0E%9D%EE%FF%9A7%7D%D1%D2%3D%C8%C2%5C%EEzL%F3%CD%01%9Ao%0E%D0%D49%C0%A5%8EG4v%3C%A2%B1%FD%11%E6%F6%874%5C%7F%40%BD%A5%8F%3AK%1F%B5m%BD%D4%B6%DD%E7b%5B%2F%FF%11%C0b_%8A%02J%E6%5D%01Y%06I%86%9Ak%F7%D9%7D%D0%F8%F3%10%3At%BA%DD'%3DdRx%DCE%E1q%17%3B%0FO%B2%BDd%8CO%F5%CF%C8%DF%3F%CC%A6%7D%83l%D8%D3%C7%86%A2%BB%AC%2B%ECa%5Da%0F%1F%7C%DE%CE%EA-MZ%B1%A2%80%BC%00%C0t%F5.%CE%20%E4%17%EA%DF%0C%91%01%B0%DC%8F%BD6%0D%5D%11-%95%960%95%960%A7%5B%02%9Cn%09Pfv%B1r%B3%F9%B5%E5%A2%0C%D5W%EE%E0%0C%C2%B8%5B%E4%B7%1B%FF%F2z%88%85%00YcE%FDAIV%10%25%85%94%A0%90%12d%12I%99xB%22%16%97%5E%0F%A0(%1A%40%E5%E5%5B%1A%C0%E3%898%BF%5E%BF%FDU%08%1D%3A%5D%E1qW%16%80%ACd%97%0B%A2B2%95%5D%3E%1B%13(3%BBX%91o%D2%00%1A%FA%A2Y%A9h%EAY%00%10%E3%F6%D3%20%EF%AE%DD%C2%2B%00%3B%0FOb%B9%1F%A3%B8%7C%84%5D%86!v%19%86%D8Pt%97%E6N%1B%82%A8%F0%9B%FCS%24%922%1B%F6%F4%B1%B9%F8%01%9B%8B%1F%B0%AE%B0%87C5%1E%0D%40N%03%00%84b%22%C3%8E%18%E7.u%D3%3D%E4%A7%A3%DF%CB%B5%BE%19%9A%EE8%A9%EF%9A%CA%86x%19%A0%CC%EC%A2%CC%ECb%C7%BEV%00%3E%FBn%80_n8J%EF%90%9D2%B3%8B%02%FD%3D%DE%DBz%15%BDq%14%83%C9%CA%3B%1FUd%01%CC%A5ddY%A1w%D8%C7%B9%C6.%B6%ED9%CC'_%96%B0%E9%8B%FD%AC%DF%F65%BF%FB%D3%97%BC%FFq%C1%3C%84%0E%9Dn%7B%C9%18%96%FB1d%05%0C%26%2B%3B%F6%B52%E5%8Ac0Y)3%BB%C8%C9%2B%A5w%C8Ns%A7%8D%F7%B6%5EeY%EEF%82%E1%24%06%93%95%E5yg%B2%00%86%1D1%FAF%FC%84%E3%22%0D%B7%9C%D4%F68%A8%E9%B6S%D31%A1%A5%BA%D3%96%0D%F0%A9%FE%19%0D%5D%11DI%A1%B8%7C%84%1D%FBZ%A9%EF%F4R%A0%BF%C7%EF%F7%BC%20'%AF%942%B3%8B%B5E%0F%C9%C9%2BeO%A9%11%7F(%85%DE8%FA%0A%40M%8F%87%BA%DBn.t%B98%D2%3C%C1%E9%EB%0E%F6W%F5%13M(D%E6dBq%99%AA%8E%97%006%ED%1B%A4%A1%2B%82%20*%EC2%0C%B1c_%2Bz%E3%A8V%BE%AE%B0G%1B%FD%B2%DC%8D%3C%1F%F7%E2%0D%26%D1%1BGY%B6%E6h%16%40I%FD%0BN%5C%B1q%B6%7D%9A%13-%93%9C%B68%D9_%D5%CF%EC%9CBxN%26%18%95%A9%B81%95%0D%F0%C7%AF%FBi%E8%8A%90%12d%0A%F4%F7%D8%7D%D2%A3%95%F7%0E%D9%C9%DF%3F%AC%7D%DESj%C4%1BL%E2%F1').%1Fa%D9%9A%A3%E9%13%A3%02%5C%E8rQ%7B%7B%06S%F7%0Ce%ADv%CA%DBT%80%C8%9CB(%26%13%88%CA%18%DB_%02%D8Pt%97JK%98%94%20%F3%C97%B7%B5%B2iw%90%608I%EE%CE~r%F2J5%7B%8F%3F%89%DB%9F%98%07H_%3E%FB%AB%FA%DF%98p%5C!%18%93%F1%CF%CA%9C%B1%D8%B3%01%D6%15%F6Pi%09%93H%CA%E4%7CXON%5E)%97n%3C%26%3C%2B%10%9E%15%C8%F9%B0%9Ee%B9%1B9Q%7DM-%F7%26qy%12%EC%3E%D6%CB%D2%DC%12%F5%E2%91%14%04I!%25*%24%05%85%B9%94B%2C%A9%10M%C8D%E6d%821%99%C0%AC%8C7%22s%F2%9A%F3U%80%D3-%01%ED%92%89%C5%25%AD%3C%18N%E2%0F%A5%B4%B1g%CA%9D%EEy%80%FA%5BNj%7F%B4c%EA%9A%E2B%E7%24%957l%9C%BBn%E5l%DB8%A7%AE%8Eq%B2u%94%40T%C6%1B%91p%87%25N%B4Ng%03%7C%F0y%BB%060%1B%13%16U%9E%01X%B2%EA%00)1%DB%3C%BE%C0%3C%B3w%DF%AC%8C%3B%2C%E3%0AJ%1Cmy%0D%40%E6%02%CA%E4P%8D%07%83%C9%8A%C1dEo%1C%A5%B8%7C%84%E2%F2%11v%1F%EB%CD%CA%92U%074%F3%8A%1B%13%D9%E6W%5E%F0%AF%CB%23%9Ch%1E%C6%13%91%98%09%C98%03%12%86fW6%C0%EA-M%AC%DClf%E5f3%2B%F2M%AC%C87%F1%CEG%15%2C%CF%3B%C3%F2%BC3%2C%5BsT%CB%D2%DC%12%96%E6%96%B0d%D5%01%96%AC%3A%C0%2FV%EE%D5%AC%D5%9D%AB%E7%3D%1C%97%09%C4Ts%B5%5C%C2%19%90%B0%FB%25%BEorg%03%BC.%15M%B7H%08%0A%09A%A1%A5%D7M%F3%BD%19.%FD%E4%C2%7C%7B%9A%BA%5B%0E.%A6w%5E%9567%5E%B7r%A6m%9CSWG5%F3%E3M%C3%1C%BD%F4%9C%23%E6gL%07%25%1C~%09%9BWDo%F6%BC%1D%E0%7CS%0F%F1%942%9Fdvb%09%99hB5%9EM%EF%3B%1CO%3F%EDQ%19%DF%AC4o%1E%94%B0%FBE%26%BD%22V%B7%C8%B7%F5%BEE%004%FEH4)%13M%C8%F3%E6%3D%0E.v%DB%A9%BE9EU%87%8D%8A%F6%09%8C%96l%F3%B2%05%E6%FF4%3F%C3%D0%F0%94%D2%BA'j%B9GdlF%A4%B86%F0v%00%A3%B9%9B%C8%9C%BA%CF%85%09%C7%15%C2q%D56%14S%AF%D6%40T%BD%60%BC%11%09OX%B5%9E%0E%A6w%EE%93%B0y%25%ACn%91%D1%19%91%91i%81%BD5%8B%008%DB%D0E(%5DR%97%FEG%CB%98%9F%CF%98_%1B%A3%BCu%94%1FZ%16%987%A6%CD%EB%9Fr%A8n%88%92%8BC%1C%AC%19%D4%CA%9F%3B%04%8A%AACo%078S%7F%93%40%C6.m%E8K%9Fg%EF%AC%847%22%E3%89%C8%B8%D3%C6%AE%B4%B1%23%201%E5S%1F6%ABGd%DC-%F2%C2%250%ECT%CB%9F%D8%05%FE~!%FCv%80Su%9D%EAH%23%926ZOX%BD%C9%DC!Y%2B%CD%8C%DA%E1%97%98%F2K%18%EA%9Fp%A8n%88%EF%2F%0Er%B0f%90%7F%98%1E%A3%AF%1E%E0%99C%60hJ%E0%F1%A4%C0_%2B%23%8B%00%A8%ED%60%26%94%B6%0B%89%B8B%12%AE%90%C4t%40-%CC%94%DA%7D%12S%5Eu%CF%13%5E%D5xlFd%D4%250%3C-%F0%CC%A9Z%0FN%A5x%3C)%D0o%13(8%3F%FBv%80%F2%8B%1D8%83%12%CE%80%A8%16%FAE%1C~%11%BBO%C2%EE%13%99%F4%89%D8%BC%226%CF%FC%A8Gg%04F%5D%02%23N%81%E7N%81%A7%F6%14O%A6%04%06'%05%06l)%1EM%A4%E8%1BO%F1%D9%B9%E8%DB%01N%D6%DC%60%CA'i%99L%EF%D5%E6%11%99%D0J%05%C6%D3%B6%2F%D2%C6%CF%9D%02O%D3%BB%1E%9AL10%99%A2%7F%22%C5C%ABZ~%7F%2C%C5vclq%006%AF%C4%9DG6%2C%3FYi%BC9%C1%85%EB%13%9C%BA%E2%E0X%EB%B4%96%23W%A61%5CvQ%D2%3C%C3w%97%3C%1Ch%F4%F2m%83%8F%E2Z%3F%7Bk%82%14U%87%F8%5BU%84%2F*%23%EC%3C%1Fe%FB%B9(%DB%CE.%02%E0%07S%3B%05%DF%1C%E7%0F%7F%FE%8A%F7%3F.%60%F5%FA%1D%FCj%DDV%DE%5D%BB%E5%BF%96%9F%05%F8_%E5%DFj%04%18%1B%A2%DFe%3B%00%00%00%00IEND%AEB%60%82"), auto !important;
}

/* Mostra l'icona dei PDF quando il cursore passa sopra ad un link che punta a un file PDF */
a[href $='.pdf'] {
 	cursor: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%20%00%00%00%20%08%06%00%00%00szz%F4%00%00%00%09pHYs%00%00%0E%C3%00%00%0E%C3%01%C7o%A8d%00%00%08KIDATx%9C%C5%D4yp%94%F5%1D%C7q%E2%C1%11%8DP%D4R%3C%DBz%22%ADUt%0A%23%8AU%CB8%3A%26XA%24%83%10nM%070%E2%D1%12%A1%18(%A7%26%88%3A%B1)%D8%80%01%92l%8E%5DCvW%06H%DC%B0d%13%92%5Ds_%BB%CF%DE%BB%CF%B5G8j%D4%24%FB%EE%1F%1BB%1D%9D%1A%3Av%FA%CC%7C%FFx%8E%99%EF%EB%F7%F9~%E7%195%8AQ%A3%FE%AF%F5C%1F%18%0C%064%9A%0A%8A%8A%B5%14%17%EB(.%D6R%5E%5E%89V%5B%C9%A7%BAJt%3A%3D%DA%F2%23%94%96~JIq9%1AM9z%BD%11%8D%A6%84%8E%8E%0E~%14%C0%E1%C3%E5%14%16k)**GS%18%07%94%95%1D%A1%BC%BC%92%D2%D2%0A%CA%CA*()%89%BF%2F**%A5%A4DK%5E%DE%5E%CCf3uuu%FF%191%B8%EB%1D%06%3E%C8ep%F7%7B%0C%EEz%87%C1%ED%3B%88m%D9Jl%D3%DB%C46%BE%0D%99%1B%E1%CFo%C1%9F2%E1%F57%E1%F57%89%BD%FA%1A%B1%8Cu%0C%BE%F2j%BC%D6f0%B06%83%FE%B5%19%F4%AFy%85%A3s%9E%23%2Fo%1FF%A3%11%B7%DB%8D%C5b%C1%E3%F1%7C%3Fd%20%F7o%C4%96%AD%24%B6h%09%FCa.%3C%F94%CCz%0C%A6%CF%84%DFL%83)S%E1%EE%A9p%D7%3Dp%E7%14%B8c%0A%DC~7%DCv%17%DCz%1B%DCx%0B%B1%C9710%E9%06%BE%9Et%03%83%D7%FE%94%E4%84%04%0A%0A%0ESZZ%0A%80%20%08%D4%D6%D6%E2p8%BE%8B%18%F8(%EFb%E3%99%8F%C4%9B%BA%5C%208a%E3%26%98p%1D%D8%ED%D03T%A9%0B%E1%9A%89%60w%80%DDN%CCn%A7%2F1%89%B3c%AFB%1D%93%88%3Cz%1C%C9%09%09h4e%14%14%14p%E1%BA%90%84%20%08%DFF%0C%7C%90%1Bo%FE%C8%A3p%FF%03%F1%93%3A%9D0%F9%26p8%E2%CDz%EC0%26%11%12%AF%897%BEn%128%1C%7C3~%22%7DI%138s%D55%84%C6%5D%8Do%ECU%B8%87%00%3A%DD%11%F2%F3%F3%89%C5b%C3%08A%108y%F2%E4%B7%93%18%7C%EF%7D%98%F5%3Bxp%3AL%F9%15%FC%F2N%10%04p%08%90%B9%01%92~%12O%60%D2%E4!%94%C0%E0%C4%EB%89%D9%1D%C4%ECv%BE%D9%BA%8D%C8%B8%24%82c%12%11F%8F%A3%EB%8A1%24'%24PQ%A1%A7%B0%B0%10%80X%2C6%5C%17%92%B8%08%C8%CE%81%19%0F%C3%BD%F7%C7g%7C%CB%2F%E2%F1%DFx%2BL%BE%19n%1E%BA%BF%E9V%98t%038%1C%0C%8E%9F%18%8F%FE%EA%F1%9CILB%19%3Ay%C7%95ci%BAl4%C9%09%09%1C%3F%5E%8D%5E%AF'%3B%3B%9B%9C%9C%1C%B2%B3%B39p%E0%00%26%93%89%8E%8E%0E%EA%EB%EB%E3%88%C1%9D%BB%E2%D1O%99%0A%F7%DC%0BS%EF%05%B7%1B~%7D_%7C%1C%3F%BF%FDb%22%0E%07%2CJc%20i%02%B1%1E%3B%E7%C7%5DMhL%22%BE%2B%C7b%BFb%0C%B6%CBGS%9Fp%05%C9%09%09%E8%F5%9FQYi%A4%B4T%8BFSJqq%09%85%85%1A%F6%EF%3F%40%5E%5E%1Ef%B3y%08%B0%7D%07%FCv%3A%CC%98%093%1E%82%07g%C0%7D%D3%E2%E3%B8%E3%EE8%E0%C6%5B%E2%23%B8%FEg0%FEZ%FA%93%26%F0%D5%BF-%9E%E7%CA%B1t%5E%3E%9A%D3%97%5D%044%DAZ%B0Z%9B%A9%AF%B7b6%D7Su%E2%24%9F%1D%AD%E2%D8%D1%13%1C%3Cx%98%83%07%0Fa%B3%D9%18udA*%C9%09%09%3Fz9%04%0F%9D%9D%0EZ%5B%3A%B1Z%5B%B0X%1A1%99%2C%1C%3BV%83%C1p%82C%87%8A0%1A%8D%8C%E8OX_%DF%84%CD%D6B%7B%7B7%3D%DD%0E%1C%0E%17.%B7%0F%9F%2F%88%D7%EB%C7%2F%B8%F0%CE%99%83W%AF'%E0%0F%E2%0FHx%BD%01%5CN%2F%DD%DDN%DA%DA%BA%B1%DA%DA%A8%AB%B3Qc%B2PUu%8A%EAj%0B%06%83ad%80%B6%F6.%3A%3B%7Bp8%5C8%9D%9E%EF%02%9Cn%BC))%23%06%98O%9E%A6%B6%B6q%E4%00A%10%E8%B1%3Bp%3A%3Dx%3C~%3C%1E%1F%01%BF%88(*%A8j%88P(Bp%D1b%A4%8A%0AT5%84%AA%84%11E%05%BF_%C4%E5%F2%D1%DD%23%D0%D6%D6%85%D5%D6Jm%AD%95%3A%8B%8D%FA%06%DB%C8%01n%B7%1B%C1%E1%C2%E5%F4%E2%F3%05%08%F8E%24I%25%1C%8E%10%89D%095%B7%E0%7F%F4Q%E4%F5%99C%CFz%09%87%A3%C8%B2%8A%CF'%E2tz%E9%EAr%D0%D2%D2ICC3%0D%0D%CD%D8lm%23%07%F8%7CA%9C%82%07%8F%DB%87%DF%2F%22J%0A%A1P%84%DE%DE3%F4%F6%9E!%9A%93C0k3%CA%EA5D%3E7%11%8D%F6%0E%23DQ%C1%EB%0D%60w%B8ho%EF%C6fk%C5jm%A5%A9%E9%12%00%A2%A8%E0v%7B%F1%F9%82%88%A2%8C%2C%ABD%C2%D1xsIFNM%25%DC%D9%85j0%A2%ACXA%24z%86H%24%8EP%94%10~%FF%85%14%EC47%B7%F3%C5%17%ED45%B5%FF%F7%00U%09%11%8D%F6%C6%CB%60%40%5C%BCx%F8%C4%C1%D7%5EG%DD%B1%93%B0%1A%26%1C%8E%C6%F7%23(%E1v%FB%E8%EE%16hi%E9%A4%A9%A9%83%E6%E6%8E%91%03T5%8C%CF%17%20%18%94%90%25%85%90%1A%26%1A%ED%A5%D7%EFGy%E1%05BG*%87%01aQF%5E%BD%9APj*%D2%BE%8FQ%B4%3A%942-%C1C%85%08%BA%23%B4%B6v%D2%D0%D8Lk%EB%25%00%C4%A0L0(%0D%C7%AF%AA%F1E%8Bd%E7%10%5C%B0%80%88%CBC%A4%E6%24%F2%BE%8FQ%DFy%17q%F3%16%A4%F4%3F%22-Y%8A2m%1A%E2%0B%0B%F0m%CA%C2%F9%D6%06%BA%B7%EF%A2%BE%DEFkk%E7%C8%01%92%A4%20%8A2%92%A4%20%CB!%14%25%8C%DA%D5%8D%F4%CC3%84%3E)%40.)E)%2BG%AD%AD%23%E4%10%08%87%22%84B%11%14%25D%E0T%1D%DE%3D%EF%E3%C9%DA%82sS%16%1D%EF%EE%A6%B6%B6%81%E6%E6KXBY%0E!I%0A%92%A4%22I*%B2%C7%8F%B4m%3B%F2%5B%1B%88%06%25%A2CK%17%0EG%87%E7%AE(!%02A%19%AF7%80%20x%E8%EA%B2%D3%FA%F1~%3A%D6dPSS%7FiK%A8%86%22%C8%B2%8A%24*H%BA%0A%C4%7F%ECG%5C%F8%22j%8F%03%E5%CC%97%EC%D9%F3!%3A%5D%05%81%80%8C(%AA%2CZ%B4%18Q%94%F1x%02%D4%D6%9Ef%F5%EA%B5%04%022%8D%8D%CD%98%CD%A7%A9%AE%3E%85%D5%DA%3Ar%40%24%12EQBHy%7B%09%EE%FF%84%60F%06b%A1%06YR%09%04d%1E%7F%EC%09V%ADz%89%40%40%E6%D4%A9%D3%3C%F5%D43%04%02!%2C%96%06%AC%D6V%E6%CE%9DOKK%3Bmmv*%2BO%604%1E%A7%AA%CA%3Cr%40o%EFY%14%C3g%88%1B6%22o%DF%81%7F%CB_%87%F6B%C1%E9%F4%B2r%E5*%B6m%DBIe%E5Qf%CE%7C%98%B4%B4%25%EC%DE%BD%87Y%B3%1E%E3%A3%8F%F6%F1%F4%D3%C9%3C%FE%F8l%0E%1E%2Cb%E1%C2%C5%3C%FF%FC%02%B4Z%E3%C8%01%E7%CF%FF%13%B7%DEH%E8%8D7%11%DF%7B%7Fx)%83A%19%B3%D9%C2%D2%A5%CB%D9%BCy%0B%2F%BD%F42%9F%7Fnf%D9%B2%95%2CY%B2%1C%A3%F1%04O%3E%F9%14%5B%B7%EE%24%3F%BF%80%19%D3%1F%E2%E5%97%D7%F0%C4%13%BF%BF4%40_%DFW%9C%3D%7B%8Eh%F4%0C%AA%1AF%96UDQ%26%10%90%D8%BB7%9F%E5%CBW%B2b%C5*%E6%CE%9DOu%B5%99%D4%D4%17IK%5B%8AVk%60%F6%EC%D9df%FE%85%DC%DC%BD%DCw%FF%03%AC%5D%BB%0E%8DF%87Nw%09%80%FE%FE%01%BE%FC%B2%8F%B3g%CF%0D%FF%5E%25I!%18%94%C8%CA%CA%C2fk%A2%A2%C2%C0%FA%F5%99%A4%A5-c%DD%BA7%D8%BD%FBC%E6%CC%99Kn%EE%DFy%EE%B9%F9%CC%9B%B7%80%FC%FC%22%E6%CD%9B%CF%FA%F5Y%23O%40%AF%D7%03%D0%DF%DFO_%DF%D7%9C%3Bw%9Eh%B4%17U%8D%A0(*~%BF%88%C7%E3%C7%E5%F2%D0%D3%E3%A4%BD%BD%87%96%B6%0E%1A%1B%9B%B1X%AC%98L%16%8E%1F%AFAo%A8%A2%B2%F2%18Z%AD%11Mq%05%C7%8E%D5%A0%D7%EB%7F%18%602%99HOO'%25%25%85g%9F%7D%F6G%A9%94%94%14%D2%D3%D31%99L%3F%0C%F8_%D7%BF%00%95%F9%F8%8Dk_%C1%D1%00%00%00%00IEND%AEB%60%82"), auto !important;
}

quindi provare a passare sopra a questi due link (il link al file DOC non punta a nulla, il link al file PDF punta alle FireFAQ :-D )

File DOC
FireFAQ

NOTA: se il link al file è un link javascript oppure un il link particolare, come quello a file su DivShare, il trucchetto non funziona.
NOTA 2: se il link ha target=”_blank” e si usa il codice che ho postato tempo fa per modificare il cursore su questo tipo di link, viene usato il cursore del target=:”blank” che ha la precedenza.

Se vedo che qualcuno è interessato posso aggiungere icone per altri tipi di file come ZIP, EXE eccetera e magari creare uno stile e caricarlo su userstyles.org.

AGGIORNAMENTO: per chi fosse interessato ho caricato lo stile su usertyles.org, lo potete installare da questa pagina.
Ringrazio Weishun e sopratutto Jason Barnabe di userstyles.org che mi ha consigliato di utilizzare la codifica in base64 dell’immagine; infatti, se non si usa tale codifica Stylish si rifiuta di installare lo stile e produce un errore di “string too long”.

Il mio inglese non è un granchè quindi se qualcuno ha qualche suggerimento per migliorare la descrizione che ho fatto dello stile è benvenuto :-D .

Cambiare il cursore su link popup e javascript

Published on 14 settembre 2006 in firefox. 7 Comments Tags: , , , .

Questo trucchetto permette di cambiare il cursore del mouse quando quest’ultimo passa sopra a link con target=_blank e javascript, i primi sono quelli che (salvo impostazioni contrarie da parte dell’utente) vengono aperti in nuove finestre mentre i secondi sono attivati da controlli javascript e possono servire per espandere menu o per aprire pop-up. Per fare questo bisogna inserire il codice riportato qui di seguito nel file userContent.css che si trova nella cartella chrome del Profilo. E’ importante soprattutto conoscere se il link che si sta cliccando contiene codice Javascript, visto che tali link a volte vengono sfruttati per attacchi XSS (Cross Site Scripting).

Modifica il cursore sui link che aprono nuove finestre

/* Modificare il cursore nei link che aprono nuove finestre */
:link[target="_blank"], :visited[target="_blank"], :link[target="_new"], :visited[target="_new"]
{
	cursor: crosshair;
}

Modifica il cursore sui link javascript

/* Modificare il cursore per i link JavaScript */
a[href^="javascript:"]
{
	cursor: move;
}

Il codice è stato reperito qui e qui potete trovare tutti i valori da associare alla proprietà cursor.

A mio avviso però tutti i cursori standard mal si addìcono a essere utilizzati per segnalare che si sta passando sopra ad un link diverso dagli altri. La cosa migliore, a mio parere, sarebb e utilizzare delle “manine colorate”, in questo modo la forma della mano richiamerebbe l’attenzione sul fatto che si tratta di un link ed il colore servirebbe per indicare che non si tratta di un link tradizionale. La prima cosa da farsi, e forse la più difficile, è procurarsi dei cursori (file con estensione cur) da poter utilizzare, se qualcuno ne trova di carini e me li fa pervenire lo ringrazio, gli unici che sono riuscito a trovare io sono delle manone più che delle manine !!! Bene procurati i cursori andiamo su The Data: URI Kitchen e carichiamo dal nostro hard disk il cursore desiderato e clicchiamo su “Generate”. Vi verrà proposto un data:link, cliccateci sopra e vedrete che nella barra degli indirizzi apparirà il cursore seguito dal data:link, copiatelo e incollatelo al posto della stringa DATA:LINK nel codice sottostante:

NOTA: Il seguente codice dovrebbe funzionare con tutti i browser basati su una versione di Gecko maggiore della 1.8, io lo ho provato con Firefox 1.5.x Seamonkey e K-Meleon 1.0.x e funziona.

/* Modificare il cursore nei link che aprono nuove finestre */
:link[target="_blank"], :visited[target="_blank"], :link[target="_new"], :visited[target="_new"]
{
	cursor: url("DATA_LINK"), auto !important;
}

e analogamente per i link javascript. Se volete utilizzare esattamente i cursori che ho trovato io su Internet, cliccate col destro su questo < < LINK > > e scegliete “Salva destinazione come” e salvatelo nella cartella chrome del Profilo.

Ecco due screenshot di come vi apparirà il cursore con il file scaricato:

Cursore su un link con target _blank

cursore su link Javascript

NOTA:: per prove fatte il trucco funziona sia con K-Meleon che Seamonkey, se volete farlo funzionare su Epiphany e Camino, leggete questo articolo di Notoriousxl.