Box Model e workaround

Uno dei miei primi articoli su PRO, che risale a circa due anni fa, è quello sul box model. Ho pensato di proporre su questo blog un post su una delle tecniche che non è presente in quell'articolo, una tecnica di facile applicazione, solida, robusta e a prova di futuro.

Rivediamo brevemente il problema: se assegniamo una larghezza esplicita a un elemento, secondo le specifiche CSS questo valore indicherà l'area utile al contenuto, bordi e padding esclusi. Internet Explorer 5.0, 5.5 (e la versione 6 in quirk mode, ovvero senza un corretto doctype), interpreteranno tale valore come
la larghezza totale dell'elemento, includendo erroneamente, quindi, bordi e padding. Per ottenere un dimensionamento consistente le possibili soluzioni sono due:

• Evitare di specificare la larghezza effettiva all'elemento e insieme bordi e/o padding
• Usare uno delle tante versioni del box model hack

La prima soluzione è adottabile in casi semplici, ma il più delle volte tende a complicare le cose:
infatti per ogni elemento figlio diretto del contenitore a larghezza specifica dovremo indicare padding
e/o bordi orizzontali.

Ora vediamo come costruire la soluzione con il box model hack. Molte delle versioni dell'hack sono semplicemente inspiegabili da un punto di vista logico, e difficili da ricordare. La versione che vedremo qui è a mio parere la più logica e semplice.

Normalmente tra due dichiarazioni in cui sono in gioco la stessa proprietà, a prevalere è l'ultima. Vediamo un piccolo esempio:


p{
color: blue;
color: green}


Quale sarà il colore del testo dei paragrafi? Sarà verde in tutti i browser dato che il colore
verde viene specificato come ultimo in ordine di codice. Ora, la parola chiave !important è in grado di dare una maggiore priorità ad una dichiarazione. La seguente regola:


p{
color: blue !important;
color: green}


darà un testo blu in tutti i browser aderenti alle specifiche CSS2. Internet Explorer, versione 6 inclusa, non dà la priorità alla keyword !important, facendo si che il testo sia verde.
Ora spostiamoci sulle dimensioni. Vogliamo ottenere un elemento con larghezza totale di 200 pixel e larghezza effettiva di 180px, con 10px di padding sui lati.


div#box{
width: 180px !important;
width: 200px;
padding: 0 10px}


Nei browser recenti (Opera, Mozilla, Firefox e Safari) che interpretano correttamente il box model
e la keyword !important abbiamo ottenuto il dimensionamento voluto. Per Internet Explorer 5.x ci siamo: viene servita una larghezza totale di 200px.

Abbiamo ancora un problema: IE6 aderisce alle specifiche CSS per le dimesioni, e così abbiamo risolto
il problema su IE5.x per spostarlo su IE6. Questo browser infatti vedrà i 200px come larghezza
utile al contenuto, e otterremo quindi un box con 220px di larghezza totale.

Per sistemare le cose, basta un commento vuoto (prima dei due punti, e anticipato da uno spazio) per nascondere la seconda dichiarazione a IE6, che verrà comunque interpretata da IE5.x. Vediamo così la versione definitiva:


div#box{
width: 180px !important;
width /**/: 200px;
padding: 0 10px}


Abbiamo così ottenuto un dimensionamento consistente in tutti i browser in sole due dichiarazioni. C'è una cosa da notare: la tecnica di per sè non è un vero un proprio hack. Diciamo che è un hack parziale, solo per IE 5x, che non aderisce alla specifiche riguardo la parola chiave !important, e per IE6 che non legge il valore dopo il commento vuoto. Dietro comunque c'è una logica a sostenerla, che funziona nei browser attuali e dovrebbe garantirci che i browser futuri interpreteranno correttamente.

La tecnica ci consente di usare il box model hack anche nei rari casi in cui vorremmo stabilire un'altezza specifica, ecco l'esempio di un div con bordi e padding:


div#box{
height: 180px !important;
height /**/: 200px;
border: 5px solid #CCC;
padding: 5px}


Volendo si possono impostatare anche altezza e larghezza nella stessa regola.

Un'altra applicazione utilissima potrebb essere per la creazione di dichiarazioni specifiche per IE e per gli altri browser. Per esempio, dato che IE fino alla versione 6 non supporta le PNG trasparenti, potremo servigli una GIF. In questo caso il commento vuoto viene omesso, dato che vogliamo che la gif venga servita anche a IE6:


div#box{
background: url(shadow.png) !important;
background: url(shadow.gif)
}


Lo stesso approccio può essere usato per risolvere alcuni bug di IE, e in particolare il Peekaboo bug, ottenendo una versione un po' più pulita dell'Holly Hack:


div#box{
height: auto !important;
height: 1%}


Questo è tutto Due approfondimenti in merito sono la serie di tre articoli sulla risoluzione dei problemi nella sezione CSS di PRO (primo, secondo
e terzo) e il mio articolo
in inglese CSS design for the future.