Un box model alternativo per i CSS3
Giovedì 30 Ottobre 2008 - 08:36
di Cesare Lamanna
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.
Commenti
1
Avevo letto il post in questione proprio pochi giorni fa: la tecnica può tornare utile quando si ha la necessità di unire misure in percentuali con altre in pixel (es. per i bordi), come nell’esempio citato.
Piuttosto non capisco perchè Firefox e Safari non usino la proprietà standard ma quella con prefisso -moz e -webkit. Esistono degli standard, sarebbe bene seguirli :)
2
Nemmeno Firefox la sopporta, quindi archivio subito.