Un box model alternativo per i CSS3

Ci fu un tempo in cui avvicinarsi alla costruzione di layout con i CSS significava apprendere come regola n° 1 che il browser più usato al mondo non interpretava correttamente il concetto di box model del W3C. Un bug tanto famoso da essersi guadagnato l'onore di una corposa voce su Wikipedia e per il quale non mancano gli hack risolutori.

Tutti a dare addosso a IE e Microsoft, chiaro, ma diciamolo: a livello logico, l'idea che la larghezza complessiva di un elemento sia uguale alla somma di contenuto + padding + bordi non è che fosse così strampalata...

Non so se hanno fatto questo tipo di ragionamento al W3C, ma nei CSS3 è prevista l'introduzione di un meccanismo simile. Il cuore di tutto è rappresentato dalla proprietà  box-sizing. Variando il valore ad essa assegnata è possibile effettuare quello potremmo chiamare un box model switching. In pratica e semplificando, usando il valore content-box ci si allinea al box model del W3C, usando border-box si rispolvera il modello IE5, con larghezza totale di un elemento data dalla somma di contenuto + padding + bordi.

Al momento la proprietà  è supportata su Firefox e Safari/WebKit tramite prefissi proprietari ma anche su Opera 9.5 e IE8. Per questo e altri dettagli, tra cui un semplice caso' d'uso in cui la proprietà  potrebbe risultare utilissima, vi rimando a questo ottimo intervento apparso su Helephant.com.