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
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
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 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
!important
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
div#box{
background: url(shadow.png) !important;
background: url(shadow.gif)
}
Lo stesso approccio può essere usato per risolvere alcuni bug di IE 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
in inglese CSS design for the future
