Pixedelic.com | Cattolica (Rimini – Emilia Romagna) | Web design, grafica, illustrazione, tutorial, siti internet

Trattasi di un paio di hack per i CSS di Internet Explorer 6 e 7 (IE6 e IE7) molto semplici, ma che, non so perché, anche gli stessi programmatori che frequento evitano di utilizzare. E dire che, a mio parere, non c’è nulla di più comodo.

Questi ultimi preferiscono infilare nell’HTML (o PHP) il classico

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

con le varianti

<!--[if lt IE 6]>

oppure

<!--[if lte IE 6]>

e via dicendo… tutte soluzioni che creano una confusione immane a chi poi deve andare a ritoccare i fogli di stile (in questo caso a me) perché due volte su tre non si accorge che c’è una marea di fogli di stile differenti.

Non sarebbe molto meglio trovare un modo per infilare direttamente tutte le varianti per i diversi browser in un unico foglio di stile?

Detto fatto: partiamo dal presupposto che il nostro CSS sia impostato per Firefox (e affini). Se vogliamo che in questo browser un div (che chiameremo “pinko”) abbia i margini tutti di 5 px non dovremo fare altro che scrivere:

#pinko {
margin:5px;
}

Se poi però ci rendiamo conto che in Internet Explorer (qualunque versione) il margine inferiore viene schiacciato (non chiedetemi perché) è dobbiamo aumentarlo di due pixel solo per questi browser, andremo a scrivere:

#pinko {
margin:5px;
*margin:5px 5px 7px 5px;
}

Se poi ancora ci rendessimo conto che IE7 e IE6 mostrassero qualche differenze (sempre per non si sa quale motivo…) dovremmo semplicemente andare a modificare il nostro codice così:

#pinko {
margin:5px;
.margin:5px 5px 7px 5px; /* per IE7 */
_margin:5px 5px 8px 5px; /* prt IE6 */
}

A questo punto, invece di tre fogli di stile diversi per una stessa pagina HTML, avremmo semplicemente un unico CSS.

Provare per credere.

Ovviamente hack di questo tipo esistono anche per Safari e per Opera… una cosa alla volta però.