Ecologia dei siti web.net

17 settembre 03

Hack per IE5.x/win

di Maurizio Boscarol

Come ormai sanno anche i sassi, Explorer 5 per windows implementa un box model sbagliato. Quando si definiscono width e padding (oppure width e border) per un elemento block-level, invece di sommare width e padding come fanno tutti i browser come dio – o chi per lui -comanda, IE5/win considera il padding (o il border) all’interno del width dato (proprio come avveniva nelle celle di tabella html).
Se ho width 100px e padding 20px, l’elemento dovrebbe essere complessivamente largo 100+20+20px: 140px, perché la width dovrebbe essere riferita solo alla content-area, all’area di contenuto; invece per IE5/win l’elemento risulta largo sempre 100px, e il padding di 20px viene tolto all’area di contenuto interna.

Per superare il problema si usa di solito il tantek’s hack, spiegato nel libro, oppure altri sistemi anch’essi spiegati nel libro. Di recente sono emersi degli hack alternativi, decisamente più eleganti e compatti (e facili da ricordare) di quello di Tantek. Forse il migliore è il seguente:

width /**/: 140px;

Attenzione: ci deve essere uno spazio tra la proprietà e l’inizio del commento (/**/).
Questa dichiarazione viene letta da tutte le versioni 5 di Explorer, ma non da IE6. Dunque è ottima per fornire proprietà a IE5 win. Usata da sola viene però compresa anche da altri browser. Così è opportuno farla precedere da un’altra dichiarazione:

width: 100px !important;
width /**/: 140px;

in questo modo, gli altri browser che riescono comprendere il comment hack (così si chiama la tecnica), applicheranno comunque la prima dichiarazione, che ha il valore !important a renderla prioritaria. IE5/win non capisce !important, così su di lui questo accorgimento non ha effetto. Poiché !important viene invece compreso da IE5/mac, ecco che l’uso combinato di queste due dichiarazioni consente di servire il secondo valore esclusivamente a IE5.x/win, in maniera molto più semplice ed elegante del Tantek’s hack.

Il comment hack è disponibile in diverse versioni, a seconda della posizione del commento all’interno della dichiarazione. Per una dettagliata disamina delle diverse versioni di questo baco, ecco un ottimo sito in inglese, dove trovate varie versioni di hack alternativi per Explorer 5.

Sezione: blog - Argomento: css-design |