Questa è la traduzione dell'articolo User Styling di Jon Hicks pubblicato originariamente su 24 Ways il 3 Dicembre 2008.
Durante le ultime elezioni presidenziali americane, Twitter decise di aggiungere una barra dedicata alle elezioni stesse come parte del design del sito. Era possibile eliminarla se la si trovava fastidiosa, ma la scelta non era permanente e la barra riappariva ogni volta che si tornava sul sito.
La soluzione per problemi di navigazione come questo sono i CSS. I fogli di stile lato utente (user styling) consentono di creare delle regole specifiche per personalizzare un particolare dominio. A parte l'utilizzo per eliminare pubblicità e altri elementi fastidiosi, ci sono molte ragioni per perdere un po' di tempo e fare un piccolo sforzo per imparare ad usarli. Possono risultare infatti comodi in attività come queste:
- Migliorare la leggibilità cambiando le dimensioni e il colore del testo
- Personalizzare l'aspetto di applicazioni web come GMail
- Rivelare microformati
Forse vi state chiedendo: "Ma come si fa?". Il procedimento per creare questa specie di skin per un sito consta di questi passi:
- Trovate l'elemento che volete modificare
- Scoprite come si chiama e se ci sono regole CSS applicate ad esso
- Scrivete regole CSS per sovrascrivere quelle esistenti o migliorarle
- Applicate le regole
Trovare l'elemento
Iniziamo con con il sito Multimap.com. Osservate l'header: occupa un sacco di spazio sullo schermo, non trovate?
Non importa. Possiamo modificare tutto.
Strumenti
Ora abbiamo bisogno di sapere dove il grande header è situato nel DOM e creare nuove regole CSS che sovrascrivano quelle esistenti. Il migliore strumento che ho trovato per questo genere di operazioni è un'applicazione per Mac OS X, CSS Edit. Utilizza una funzione con 'foglio di stile sovrapposto' e il DOM Inspector. Piuttosto che fornire i soliti strumenti per l'ispezione del DOM, CSS Edit lavora solo sugli stili. Basta andare in modalità 'X-Ray', cliccare su un elemento e osservare la finestra di ispezione per vedere ogni singola regola applicata a quell'elemento. Cliccando sul selettore veniamo portati nel punto in cui esso è definito nel CSS. È davvero l'applicazione dei sogni per i fogli di stile lato utente.
Ciò detto, potete ottenere gli stessi risultati usando strumenti gratuiti e multi-piattaforma come Firefox con le estensioni Firebug e Stylish. Useremo queste per gli esempi: assicuratevi dunque di averle installate entrambe per seguire il resto dell'articolo.
Usando Firebug possiamo vedere che la pagina ha un buon markup e che tutta l'area superiore è identificata con div che ha come id header.
Modificare
Quando si installa Stylish, l'estensione aggiunge l'icona con una pagina e un pennello sulla barra di stato del browser. Clicchiamoci sopra e scegliamo l'opzione Write Style > for Multimap.com. Le altre opzioni consentono di creare uno stile per una parte specifica di un sito o di un URL, ma noi vogliamo che la nuova regola sia applicata a tutto Multimap.com:
La finestra 'Add Style' che si apre presenta all'inizio, in alto, la query @-moz-document:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("multimap.com") {
}
Tutto quello che dovremo fare è aggiungere la regola CSS che nasconde l'header tra le parentesi graffe:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("multimap.com") {
#header {display: none;}
}
Un click sul bottone per l'anteprima e vediamo come la regola funziona! Ora la mappa appare in una posizione migliore, più in alto, nella pagina. Se sia etico o meno nascondere la pubblicità lo discuteremo un'altra volta, ma diciamolo, quando avete esultato l'ultima volta davanti ad un banner?
Fare qualcosa di meglio
Se siamo soddisfatti della nostra modifica, tutto quello che dobbiamo fare è assegnarle un nome e salvarla. Ogni volta che visiteremo Multimap.com, lo stile sarà disponibile. Stylish consente anche di attivare/disattivare uno stile dal menu sulla barra di stato. Se volete condividere uno stile con gli altri, il posto dove farlo è il sito userstyles.org. È un grande deposito di personalizzazioni con cui Stylish si connette. Quando visitate un sito, potete vedere se qualcuno ha già scritto uno stile per quel sito. Ancora una volta usate il menu sulla barra di stato, selezionando la voce "“Find Styles for this Page". Selezionando questa opzione con BBC News, vedremo che sono disponibili tantissime opzioni alternative che vanno dalle piccole modifiche al layout fino al redesign completo:
Inoltre, ogni volta che uno stile viene aggiornato, Styish ce lo farà sapere e potremo fare l'update con un semplice click. Stylish funziona solo con Firefox e Flock, per cui citerò dopo i modi con cui ottenere gli stessi risultati su altri browser.
Tecniche specifiche
Important!
Nell'esempio di Multimap.com non c'era una proprietà display specificata per quell'elemento, ma non è sempre così semplice. Potreste aver speso la maggior parte della vostra vita con i CSS per essere un buon designer e dimenticare di aggiungere !important alla vostra regola per darle priorità: se state sovrascrivendo una regola esistente ciò è necessario! Preparatevi a scrivere molte volte !important.
Il selettore universale
Il selettore universale è particolarmente utile per iniziare. Per esempio, se vogliamo usare su Flickr il font Helvetica invece che Arial (come avrebbero dovuto fare!), possiamo farlo con una sola regola:
* {font-family: "Helvetica Neue", Helvetica, sans-serif !important;}
Potete anche usarlo per selezionare tutto ciò che è dentro un altro elemento inserendolo dopo il nome dell'elemento:
#content * {font-family: "Helvetica Neue", Helvetica, sans-serif !important;}
Cambiare le immagini
Se state cambiando qualcosa di più complesso, come Google Reader, allora ad un certo punto vorrete probabilmente cambiare un immagine (<img>). La tecnica per sostituire le immagini segue questi passi:
- rendere l'immagine sostitutiva come sfondo del tag <img>;
- aggiungere un padding in alto e a sinistra fino alla misura che immaginate possa essere necessaria per spostare via l'immagine originale;
- settare la larghezza (
width) e l'altezza (height) a 0.
La vecchia immagine viene così spostata e nascosta, consentendo all'immagine sostitutiva usata come sfondo di essere vista. Per identificare l'immagine da usare come target potrebbe essere necessario un selettore di attributo:
img[src="/reader/ui/3544433079-tree-view-folder-open.gif"] {
padding: 16px 0 0 16px;
width: 0 !important;
height: 0 !important;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYA
AAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAA
Bx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAAVdE
VYdENyZWF0aW9uIFRpbWUAMjkvNi8wOJJ/BVgAAAG3SURBVDiNpZIhb5RBEIaf
2W+vpIagIITSBIHBgsGjEYQaFLYShcITDL+ABIPnh4BFN0GQNFA4Cnf3fbszL2L3
jiuEVLDJbCazu8+8Mzsmif9ZBvDy7bvXlni0HRe8eXL/zuPzABng62J5kFKaAQS
QgJAOgHMB9vDZq+d71689Hcyw9LfAZAYdioE10VSJo6OPL/KNvSuHD+7dhU
0vHEsDUUWJChIlYJIjFx5BuMB2mJY/DnMoOJl/R147oBUR0QAm8LAGCOEh3IO
ULiAl8jSOy/nPetGsbGRKjktEiBCEHMlQj4loCuu4zCXCi4lUHTNDtGqEiACTqAFSI
OgAUAKv4bkWVy2g6tAbJtGy0TNugM3HADmlurKH27dVZSecxjboXggiAsMItR
h99wTILdewYRpXVJWtY85k7fPW8e1GpJFJacgesXs6VYYomz9G2yDhwPB7NEB
BDAMK7WYJlisYVBCpfaJBeB+eocFyVyAgCaoMCTJSTOOCWSyILrAnaXpSexRsx
GGAZ0AR+XT+5fjzyfwSpnUB/1w64xizVI/t6q3b+58+vJ96mWtLf9haxNoc8M
v7N3d+AT4XPcFIxghoAAAAAElFTkSuQmCC) no-repeat !important;
}
Ehi! Ma cos'è tutto quel codice nell'immagine di sfondo? È un Data URI, e potete crearne uno facilmente con uno strumento online messo a punto da Hixie. È semplicemente l'immagine tradotta in testo così che possa essere incorporata nel CSS, tagliando così il numero di richieste HTTP. È anche necessario nei browser di Mozilla perché essi non consentono di avere nei CSS riferimenti a immagini salvate in locale. Convertendo immagini in URI si evitano questi problemi e si rendono gli stili più facilmente portabili.
Non dimenticate tutte le altre tecniche CSS a vostra disposizione: inserire contenuto personalizzato con le pseudo-classi :before e :after, rendere elementi semi-trasparenti con opacity, crare angoli arrotondati senza hack. Potete divertirvi, e per una volta godetevi la gioia di divertirvi senza pensare a IE!
Fogli di stile lato utente senza Stylish
Invece di usare l'estensione Stylish potete aggiungere regole al file userContent.css oppure usare @import in quel file per caricare un foglio di stile separato. Potete trovare questo file nella cartella /Library/Application Support/Camino/chrome/ su Mac OS X o C/Program Files/Mozilla Firefox/Chrome su Windows. Questo è il metodo per usare lo user styling su Camino. Ma come fare con gli altri browser?
Opera e Omniweb
Entrambi consentono di specificare un file CSS personalizzato come parte delle preferenze per un sito. Opera consente pure di applicare Javascript personalizzato, usando la stessa sintassi degli script per Greasemonkey.
Safari
Ci sono poche opzioni su questo fronte: PithHelmet e SafariStand consentono entrambi gli stili personalizzati o, in alternativa, uno userscript stile Greasemonkey può essere implementato attraverso GreaseKit. L'ultima soluzione è la mia preferita sul mio tema Helvetireader dal momento che consente regole più precise per il dominio come fa la direttiva @-moz-document.
E ora?
Spero di avervi dato informazioni sufficienti perché possiate essere in grado di scrivere i vostri stili. Se siete gli autori di un sito vi incoraggio, per aiutare a svolgere meglio questo tipo di attività, a fornire un nome di classe o id univoco per l'elemento body:
<body id="journal" class="hicksdesign-co-uk">
Ciò rende più semplice scrivere regole che si applicano a quello specifico sito. Se voleste usare Safari senza gli add-on citati in precedenza, questo metodo fa sì che possiate includere regole in un file CSS generale (scelto attraverso Preferences > Advanced > Stylesheet) senza interferire su altri siti.
Un'ultima rivelazione. Potete modificare l'interfaccia utente di Firefox con il file userChrome.css. Dovrete usare il DOM Inspector presente di default sul browser invece che Firebug per ispezionare il chrome della finestra. È un ottimo esercizio se volete modificare piccole parti (per esempio la dimensione del testo sulle tab) senza dover creare un nuovo tema.
