CSS Hack per Internet Explorer 7

Manca un mesetto scarso ad un insieme di RTM che neanche la cometa di Halley. Vista, .NET Framework 3.0, IE 7.0.

Quest'ultimo, soprattutto, è atteso da talmente tanti anni che ormai ci abbiamo fatto l'abitudine agli hack necessari a fare andare i CSS su IE 6.0.

Nelle ultime settimane, in modo specifico io e Marco, ci siamo dedicati a finire la nuova versione (4.0) di ASPItalia.com e WinFXItalia.com, che include anche una nuova veste grafica (a proposito, se tutto va bene saremo online da sabato/domenica ;)).

Ovviamente l'obiettivo è stato quello, a meno di un mese dalla RTM di IE 7.0, di supportare anche quest'ultimo. In realtà se uno impara a scivere i CSS usando meno hack possibili, ci sono buone probabilità che tutto funzioni su tutti i browser (certo, con qualche differenza). Nella pratica, Mozilla (soprattutto FireFox) e IE 6.0 gestiscono in maniera nettamente diversa i margini, così che spesso si usa questa tecnica:

.search
{
margin: 4px;
margin: 8px!important;
}

IE 6.0 legge solo il primo, FireFox solo il secondo, perchè marchiato come importante. IE 7 invece legge il secondo ma applica i margini come IE 6 :(

Fortunatamente IE 7.0 supporta i tag selector, ma lo fa in un modo che FireFox non supporta, per cui si può usare questo codice

*:first-child+html .search /* solo IE 7.0 */
{
  margin: 4px!important;
}

Questa modifica ha l'effetto di sovrascrivere quella definita prima, così che IE 6.0 userà 4 px di bordo, FireFox 8 ed IE 7.0 di nuovo 4, perchè definiti nello stile successivo.

Nel caso in cui si voglia invece far prendere un particolare stile solo ad IE 7.0 e FireFox (che però devono condividerlo), è sufficiente rimuovere il secondo pezzo di codice.

Infine, se si vuole applicare uno stile diverso a IE 6.0, FireFox ed IE 7.0, si può sfruttare questo hack al contrario, cioè così:

.search
{
  margin: 4px; /* IE 6.0 */
  margin: 5px!important; /* IE 7.0 */
}

html>/**/body .search /* FireFox*/
{
  margin: 8px !important;
}

E così ora i browser su cui testare i layout diventano 3 e non solo 2. Pazienza, se è il prezzo da pagare per avere IE 7.0 un po' più compatibile con gli standard web, ne sono anche felice.

Considerando che tra un po' esce FireFox 2.0, spero proprio che i browser non diventino 4, perchè con tutti gli hack del mondo, è sempre meglio avere meno problemi possibili ;)