Risoluzione dei problemi dei CSS

20 marzo 2006

Come mostrare o nascondere regole e dichiarazioni ai browser

C’è una varietà di modi per far passare o nascondere regole solo a certi browser. Vedremo qui di seguito alcuni dei più utili.

Soluzioni HTML per IE/Win: il conditional comment

Agli altri browser, e al validatore, risulterà come un semplice commento nel codice HTML, ma in realtà è possibile specificare regole per determinate versioni di IE, a partire dalla versione 5. Il suo uso è sicuro e semplice. Il prossimo esempio linka un foglio di stile esterno solo per IE5.0:

<!–[if IE 5]>
<link rel=”stylesheet” type=”text/CSS” href=”iefix.CSS”>
<![endif]–>

Analogamenente possiamo specificare un commento condizionale per IE 5.5 e 6, sostuendo la prima riga del codice precedente in:

<!–[if IE 5.5]>    per IE 5.5
<!–[if IE 6]>    per IE 6
<!–[if gte IE 5.5]>    per IE 5.5 e superiori
<!–[if lte IE 5.5]>    per IE 5.0 e 5.5
<!–[if lte IE 6]>    per versioni di IE dalla 5 alla 6

In particolare l’ultima viene applicata a tutte le versioni di IE dalla 5 alla 6, escludendo quindi le versioni future. Usare i commenti condizionali e dichiarare le regole necessarie ad IE in un foglio di stile a parte ci consente di creare un CSS principale il più pulito possibile, libero da hack o workaround.

Soluzioni CSS per IE/Win: il selettore discendente

Il selettore discendente non è supportato da tutte le versioni di Internet Explorer per Windows. Usandolo nel foglio di stile potremo creare regole specifiche per IE e, quindi per differenza, gli altri browser più standard. Ecco un esempio:

div#content{height: 200px}
*>div#content{height: auto; min-height: 200px}

In realtà non è un vero e proprio hack, e per questo è una tecnica piuttosto sicura e largamente utilizzata.

Soluzioni CSS per IE (sia Win che Mac): lo “star HTML” hack

Lo star html hack sfrutta il selettore discendente in maniera un po’ particolare. Sappiamo tutti che il “capostipite” di una pagina HTML è, appunto, l’elemento html. Internet Explorer, sia per Windows che per Mac, applicano la seguente regola:

* html p{ color: green}

Proprio come se l’elemento html avesse un “padre invisibile”. Tutti gli altri browser non interpreteranno la regola. Il mio consiglio è di usarlo con la massima prudenza: ad oggi non possiamo sapere se le future versioni di IE interpreteranno la regola o meno.

I Filtri di banda passante

Ci sono modi per importare fogli di stile per un determinato set di browser, tenendo così il CSS principale libero da hack o workaround che però possono risultare problematici per altri browser. Ne parla Molly Holzschlag nell’interessante articolo Strategies for Long-Term CSS Hack Management. La strategia dei filtri, seppure complessa da applicare, consente di creare fogli di stile liberi da hack, quindi adatti per i browser attuali e futuri con buon supporto di CSS e di importare file CSS specifici per i browser problematici.

Se vuoi aggiornamenti su Risoluzione dei problemi dei CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Risoluzione dei problemi dei CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy