Il Box Model credo sia il concetto più importante da comprendere per l’utilizzo dei css poichè determinano l’aspetto dei box (elementi di tipo blocco).
Ogni box, infatti, è caratterizzato da:

• Larghezza dei contenuti (width)
• Altezza dei contenuti (height)
• Spazio fra i contenuti e i bordi o spaziatura interna (padding)
• Bordo del box (border) – Ogni bordo si incontra a 45° con quello adiacente.
• Spazio fra il bordo e gli altri oggetti della pagina (margin)

Vediamo graficamente come raffigurare questo elenco.

E’ facile notare da questa figura come sia l’altezza che la larghezza totale del box, sono la somma della larghezza dei contenuti (width), della spaziatura interna (padding) e dello spessore dei bordi (border).

Questo box model viene utilizzato ed interpretato molto bene da moltissimi browser. Indovinate quale browser deve dare fastidio? Si proprio lui…il solito Internet Explorer (dipende dalle versioni).

Anche se fra un pò uscirà la versione 9 di Internet Explorer, mio malgrado, ma anche di tutti i colleghi webdesigner, ho contatato che sono ancora troppi gli utenti che utilizzano Internet Explorer 6 nonostante ci siano Internet Explorer 7 e 8 già da un pò in giro. Cosi andiamo a conoscere qualcosa in più del box model di Internet Explorer per Windows.

Il box Model di IE per Windows

Il problema principale del box model di Internet Explorer per Windows sta nel fatto che la proprietà width anzichè determinare la larghezza dei contenuti viene interpretato come larghezza totale del box.
Cosi facendo per sapere quanto è la larghezza dei contenuti dobbiamo sottrarre a questo valore la larghezza del bordo e del padding. Stessa cosa per l’altezza.

Bisogna cosi prestare attenzione a questo problema per scrivere del codice css di fix, attraverso i commenti condizionali, che si adatti a qualsiasi programma utente. Questo problema non si verifica sulle versioni 6 e 7 se non operano in modalità quirks mode.

Risolvere questo problema tuttavia non è poi cosi difficile. Ci sono due metodi veloci per bypassare questo problema:

• Evitare di impostare contemporaneamente la larghezza (o l’altezza) e i bordi o il padding
• Si imposta solo per IE pee Windows 5.x una larghezza (o altezza) pari alla larghezza (o altezza) dei contenuti più lo spessore del padding e dei bordi.( Internet Explorer 5.5 è ormai superato)

Il problema del box model è stato riparato nella versione 8 di Internet Explorer.

I commenti condizionali per Internet Explorer

Come già accennato prima, l’utilizzo dei commenti condizionali ci pemetterà di visualizzare all’interno del codice (x)html della nostra pagina delle regole css che ci serviranno a fixare i bug del box model di internet Explorer e non solo. Tramite questi commenti infatti si possono visualizzare delle vere e proprie aree del sito se l’utente utilizza un determinato browser o un altro.

Vediamo un veloce esempio di utilizzo:

<link rel="stylesheet" href="stylecomune.css" type="text/css" />

<!--[if IE 6]>
<link rel="stylesheet" href="style_ie6.css" type="text/css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="style_ie7.css" type="text/css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="style_ie8.css" type="text/css" />
<![endif]-->

Analisi del codice

Nel codice sopra è strutturato il questo modo: il browser legge ed applica il file stylecomune.css che andrebbe bene per tutti i browser. Se il browser che sta utilizzando l’utente è internet explorer 6 allora il browser carica il foglio di style style_ie6.css con alcune regole che sovrascriveranno quelle scritte nel file stylecomune.css e che permetteranno la corretta visualizzazione del nostro sito web.

Stessa cosa vale per IE 7 e 8. Il tutto racchiudendo la chiamata al foglio di style o lo style stesso fra i commenti condizionali  interpretati solo da Internet Explorer:

<!--[if IE X]>      <![endif]>

Tutto questo letteralmente si traduce in se (if) utilizza Internet Explorer  X allora carica questo file.

Con questa procedura si possono prevedere delle zone in cui far visualizzare un messaggio che invogli l’utente ad aggiornare il proprio browser giocando con la regola display:none.

Con questo articolo annuncio una serie di articoli di approfondimento e ripetizione dei css che ho chiamato appunto CSS Zoom. Troverete questi Zoom nella categoria CSS blog