img { background: url(preloader.gif) no-repeat 50% 50%; }

Questo snippet rappresenta un modo per fornire un indizio ai navigatori, sopratutto quelli dalla connessione lenta, che benché vi sia un blocco vuoto nella pagina, qualcosa sta accadendo, in modo da rassicurarli.

Questa è l’immagine utilizzata nell’esempio del preload:

I pixel sono precisi, ma non sono molto flessibili.  Se si aumenta il font-size del browser, le cose possono assumere un aspetto a dir poco stravagante… 

Le misure in percentuali risolvere il problema della flessibilità, ma a volte la matematica diventa difficile e non è molto agevole lavorare in tale modalità. 

Facendo corrispondere 1em a 10px, sono in grado di pensare rapidamente in termini di pixel, ma anche assicurare che all’aumento del font-size il sito crescerà in proporzione.

Attenzione: L’unica deroga all’uso di pixel può essere fatta per i bordi di 1px dato che 0.1em non funziona molto bene.

* { margin: 0; padding: 0; font-size: 1em; }
html { font-size: 125%; }
body{ font-size: 50%; text-align: center; }

p { font-size: 1.2em } /* == 12px */
#content { width: 96em; margin: 0 auto; } /* = 960px */

* :focus { outline: 0; }