In chiusura dell'articolo Controllare
i margini abbiamo parlato brevemente del global white space reset, ovvero la tecnica che
consente di azzerare margini e padding di default del browser da tutti gli elementi.
I browser, infatti, per consentire una discreta presentazione in assenza di fogli di stile, attribuiscono
di default margini e padding ad alcuni elementi: si tratta tipicamente di elementi block-level quali
titoli, paragrafi, liste, blockquote, form e fieldset solo per citarne alcuni. I valori di default
di margini e padding per tali elementi non sono noti a priori, e sono differenti sui diversi browser.
La tecnica del global whitespace reset si propone quindi di annullare queste due proprietà,
per poi specificarle in maniera constistente. Tratteremo qui la tecnica
in maniera approfondita, considerando pro, contro e alternative.
Global white space reset
Nell'articolo CSS Negotiation and a Sanity Saving Shortcut
pubblicato a fine 2004, Andrew Krespanis presenta l'idea alla base del global white space reset: per evitare inconsistenze
di spaziature nei diversi browser, basta settare margin e padding a zero per tutti gli elementi. L'operazione avviene attraverso
una semplice regola che usa il selettore universale, che creerà una regola indirizzata a tutti gli elementi di pagina.
Eccola:
* {
margin: 0;
padding: 0;
}
La tecnica è stata ripresa nell'articolo Global whitespace reset che presenta ed espande la tecnica progressivamente.
Oltre ad azzerare margini e padding, è infatti indispensabile ridefinirli. Ecco quindi la soluzione finale che Krespanis propone:
* { padding:0; margin:0; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote,
label, ul, ol, dl, fieldset, address
{ margin:1em 5%; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
Si può vedere l'effetto del codice CSS sopra riportato nell'esempio
con cui Krespanis accompagna l'articolo. Con questo articolo Krespanis ha proposto una tecnica semplice ed efficace per livellare
i margini e padding di default, non esente però da difetti. Vediamoli.
Pro e contro del global whitespace reset
Il global whitespace reset presenta un significativo vantaggio: livellare margini e padding, per poi renderli
in maniera consistente e cross-browser. C'è una questione a monte però, ovvero se sia una questione cruciale
avere una consistenza di spaziature sui browser. A parer mio no: mentre è fondamentale ottenere in
maniera cross-browser aspetti macroscopici quali il layout, la grafica e soprattutto la fruibilità
dei contenuti.
Detto ciò, ci sono alcuni svantaggi intrinsechi che l'adozione di una tecnica simile porta:
- L'uso del selettore universale, che crea una regola rivolta a tutti gli elementi di pagina,
appesantisce il motore di rendering dei browser, rallentando la resa del CSS - Ha poco senso a parer mio creare una regola indirizzata a tutti i possibili elementi
quando in realtà quelli che hanno padding e/o margini non nulli di default sono una decina. - L'attribuzione di margini orizzontali può essere vantaggiosa per gli elementi che
di default li hanno (ad esempio liste e blockquote) ma non sempre risulta pratica nel processo
di sviluppo, per di più se questi sono in percentuale, su titoli e paragrafi ad esempio - Richiede maggior lavoro piuttosto che far presa sui valori di default dei browser e considerare solo le eccezioni
- Utilizzando il global whitespace reset sono stati riscontrati (come indicato
in questo articolo)
problemi di resa delleselectsu Firefox e Opera.
Reset CSS di Yahoo!
La libreria Yahoo! UI contiene soluzioni CSS e Javascript
per gli sviluppatori. Tra queste si annovera anche la YUI Reset CSS,
che si propone di annullare tutte le proprietà attribuite di default dai browser
(qui l'esempio).
In sostanza Reset CSS oltre ad annullare margini e padding azzera anche le proprietà
tipografiche (dimensioni e stile del testo) di tutti gli elementi di una pagina.
Per quanto riguarda margini e padding, ecco la regola che la libreria contiene:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
Questa soluzione è da preferire all'idea originale del global whitespace reset
per diversi motivi: in primis perchè è rivolta solo agli elementi che effettivamente
hanno margini e padding non nulli di default; esclude poi le select
che causano problemi su Firefox e Opera. D'altro canto, comporta comunque un notevole
lavoro di ridefinizione e annulla i margini/padding orizzontali tipici di liste,
blockquote e list-item.
Armonizzare lo spazio bianco
L'idea di base è molto semplice: invece di considerare come ostacoli nel processo di sviluppo i margini e i padding di default del browser, questi possono essere visti come punti di forza. Piuttosto che ridefinirli tutti
basterà semplicemente armonizzarli in modo da avere una presentazione comunque piuttosto consistente sui diversi browser.
Ho preparato quindi un set di regole che potranno costituire un buon punto di partenza:
html, body{margin: 0;padding: 0}
h1, h2, h3, h4, h5, h6{margin: 0.7em 0 0.2em}
address, blockquote, dl, form,
fieldset, ol, table, p, pre, ul{
margin-top: 0.2em;margin-bottom: 1.2em}
Se vorrete usarle, queste regole CSS andranno inserite come regole
iniziali dei vostri progetti, così le regole successive potranno eventualmente ridefinire le spaziature in caso di necessità. Ecco l'esempio che ho preparato, che si basa sullo stesso HTML di quello di Krespanis. Concludo con gli approfondimenti:
- CSS Negotiation and a Sanity Saving Shortcut
- Global Whitespace reset
- No margin for error
- YUI Reset CSS
La pagina di esempio di questo articolo, insieme a un foglio di stile esterno che contiene le regole di base qui presentate è disponibile per il download. Alla prossima.
