Paul Irish è uno degli sviluppatori più attivi e influenti della scena internazionale. Fa parte del team per le relazioni esterne di Google Chrome ed è il responsabile, tra l'altro, di progetti come HTML5 Boilerplate e Modernizr.
In un post apparso di recente sul suo blog personale, si è fatto portavoce di una particolare raccomandazione rivolta agli sviluppatori web. Consiste tutto in un semplice snippet di codice, questo:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}Irish invita ad usarlo nei nostri fogli di stile per applicare a tutti gli elementi (identificati con il selettore universale *) un box model più logico e naturale basato sulla regola box-sizing: border-box;.
Usando il valore border-box per la proprietà box-sizing facciamo sì che le dimensioni assegnate ad un elemento comprendano anche il padding e il bordo. Come è noto, invece, nel modello definito nei CSS fino alla versione 2.1, si calcolavano le dimensioni solo rispetto al cosiddetto content-box, ovvero l'area del contenuto, esclusi padding e bordo.
I CSS3 hanno aggiunto la possibilità di scegliere tra questi modelli alternativi. Per una disamina dettagliata del problema rimandiamo alla lezione Box-sizing della guida CSS3.
Perché dunque abbiamo accennato ad un box model più logico e naturale? Perché appare oggettivamente più logico e naturale, quando scrivo width: 200px, che questo valore faccia riferimento alle dimensioni effettivamente occupate da un elemento! Nel modello di default basato su content-box, invece, scrivendo
width: 200px;
padding: 20px;dovremo assumere che la larghezza reale sarà di 20px + 200px + 20px, ovvero 240px.
Potrebbe sembrare una questione puramente filosofica. In fin dei conti, a livello visuale, quello che posso ottenere usando border-box non è diverso da quanto otterrei usando, con valori e misure diversi, content-box. Ma ci sono casi in cui i vantaggi sono evidenti in termini di approccio alla realizzazione di layout.
Irish accenna in particolare a situazioni di layout con dimensioni calcolate in percentuali miste a dimensioni in pixel o em. Vediamo un esempio.
Partiamo da questa situazione, un box centrato e al suo interno due colonne che vogliamo occupino un'area pari al 50% ciascuna.
Avendo come base questo markup HTML:
<div id="container">
<p id="par1">Lorem ipsum...</p>
<p id="par2">Lorem ipsum...</p>
</div>otterremo il risultato con questo codice CSS:
#container p {width: 50%;}
p#par1 {
background: #abe2ff;
float: left;
}
p#par2 {
background: #d2fe90;
float: right;
}Il testo dei paragrafi è però troppo compresso, per cui aggiungiamo un po' di padding (esempio 2):
#container p {width: 50%;}
p#par1 {
background: #abe2ff;
float: left;
padding: 40px;
}
p#par2 {
background: #d2fe90;
float: right;
padding: 40px;
}A questo punto, avendo aggiunto alla larghezza 50% + 50% (100% dell'elemento contenitore) il valore del padding, accade quello che è logico attendersi, tutto si sfascia perché la larghezza effettiva di ciascun paragrafo supera il 50%!
Potremmo sistemare tutto usando un valore per width inferiore al 50%, ma c'è una via molto più efficace. Nel terzo esempio abbiamo inserito all'inizio lo snippet proposto da Paul Irish.
Tutto torna in ordine, il padding viene applicato, ma le due colonne sono al loro posto, ciascuna occupa la metà dello spazio, perché 50% fa ora riferimento alla larghezza compreso il padding.
Form Liquido
Un altro caso di applicazione potrebbe essere quello di un form liquido, come suggerito da Chris Coyer o Roger Johansson. Creare un layout come questo, mantenendo le proporzioni con due campi in alto pari ciascuno al 50%, con del padding e la textarea sotto pari al 100% diventa estremamente semplice.
Figura 4. Il form prima e dopo lo snippet
(clic per ingrandire)
Tutti convinti? Un problema potrebbe essere rappresentato dalla compatibilità cross-browser. border-box non è supportato infatti da IE7. Si può ovviare creando regole ad hoc per quel browser servite attraverso commenti condizionali o usando questo script HTC per IE6/7. Lo snippet iniziale in questo caso diventerebbe così:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);
}L'aggiunta dell'asterisco prima di 'behavior' fa sì che lo script venga visto solo da IE6 e IE7, ma non dalle versioni successive del browser di Microsoft.
Tutti gli esempi sono disponibili per il download.
Link utili
