Diversi stili per diversi browser

Lo scopo di servire, a seconda del browser, diverse regole CSS o diversi fogli di stile, non è quello di stupire i nostri visitatori con “se stai vedendo questo testo blu allora stai usando Internet Explorer”, ma, al contrario, è quello di ottenere una presentazione pressochÃ?© identica con i diversi browser di ultima generazione (che non sempre interpretano nello stesso modo i fogli di stile) e quello di mantenere il sito navigabile dai browser con uno scarso supporto dei fogli di stile.

L’utilizza di un filtro/hack si rende necessario quando:

• A fronte di test con diversi browser, si riscontra un difetto di presentazione del documento con uno o più browser;
• Non si ha la possibilitÃ?  di effettuare un test con un certo browser, ma si è a conoscenza di un certo bug di interpretazione del browser stesso.

Questi due punti introducono un’altra questione: con quali browser bisogna preoccuparsi che il nostro documento sia visualizzato correttamente? A mio parere, perlomeno, Opera e Firefox, Internet Explorer 5.5 e superiori (per quanto riguarda Windows), Safari (per Macintosh) e Konqueror (per sitemi operativi Unix e Linux). Sfortunatamente non tutti hanno la possibilitÃ?  di disporre di diversi sistemi operativi, ma per Safari esiste il simulatore iCapture; Opera e Firefox sono multi piattaforma e se un documento è visualizzato correttamente con questi due browser, probabilmente, con Konqueror sarÃ?  lo stesso.

Se possibile, piuttosto che ricorrere ad un filtro/hack, è preferibile aggirare il problema. Questo perchÃ?© non si possono sapere gli effetti che si avranno con i futuri browser. A tal proposito si legga ad esempio lÃ?â??articolo pubblicato sul blog di Internet Explorer Call to action: The demise of CSS hacks and broken pages o il commento di Jonny Axelsson di Opera Software ad un hack per rendere un CSS visibile solo ad Opera 7.

Alcune precisazioni.

Nel documento che segue, per semplificare, user�² i termini generici:

Internet Explorer:

Per intendere Internet Explorer 5.x per Windows e Macintosh e IE 6 per Windows.

Altri browser:

Per intendere Mozilla 1.6 (e Firefox), Opera 7-7.5, Konqueror 3.x e Safari 1-1.2.

L’esito dei test con questi browser è stato ricavato dell’ottima risorsa CSS Filtes and Hacks.

Indice:

• Filtri con @import.
• Filtri utilizzando il media type.
• Filtri con i selettori.
• Filtri con !important.
• I commenti condizionali.
• Tabella riassuntiva.
• Esempio di filtri combinati.
• Approfondimenti.

Filtri con @import.

La proprietÃ?  @import deve precedere ogni altra regola del foglio di stile. Quindi:

Scorretto:
p { margin: 15px 10px; }
@import "style.css";

Corretto:
@import "style.css";
p { margin: 15px 10px; }

Con @import possiamo fare un primo filtraggio escludendo i browser più datati che non supportano i CSS 2: scrivendo @import "styles.css" escluderemo il foglio di stile a Netscape Navigator 4.x e a Internet Explorer 4.x. Se scrivessimo, ad esempio, @import url("styles.css") escluderemmo solo Netscape 4.x e non IE 4.x.

Con @import possiamo ottenere anche altri filtri:

• @import url(styles.css) all; esclude tutte le versioni di Internet Explorer per Windows. Scrivendo all con la “a” maiuscola si ottiene lo stesso effetto, ma si esclude anche Konkeador 3.x per Unix/Linux e Safari 1 e 1.1 per Mac.
• @import'styles.css'; senza spazi, esclude la versione 5 di IE per Windows e Mac. Se al posto degli apici (’) per racchiudere il precorso del file.css, utilizzassimo i doppi apici (”) escluderemmo anche Konqueror 3.0.
• @import 'styles.css'; esclude la versione 5 di IE per Mac. Non funziona se si utilizzano i doppi apici per racchiudere il percorso del file.css.
• @import url(styles.css) not all; il foglio di stile viene importato solo da IE 5 per Mac e da Safari 1 e 1.1.

Filtri utilizzando il media type.

Un filtro utilizzando il media type lo abbiamo giÃ?  visto nel paragrafo precedente: @import url(styles.css) not all, che fa importare il foglio di stile solo a IE 5 per Mac e Safari 1-1.1.

Utilizzando la @media rule (che serve per definire dei diversi media all’interno di uno stesso foglio di stile) possiamo invece ottenere di nascondere regole CSS ad IE per Mac (dato che non è supportata da questo browser):

@media all {
   selettore { definizione }
}

È simile al filtro con i commenti:

/* \*/
selettore { definizione }
/* */

In questo caso la parte compresa tra /* \*/ ed il successivo commento sarÃ?  ignorata da IE per Mac.

Se scrivessimo @media All escluderemmo anche Konqueror 3.x e Safari 1 e 1.1.

Altri filtri con il media type sono:

• <style type="text/css" media="screen and all">/* Codice CSS */</style>, che ci permette di escludere Internet Explorer per Windows e Safari 1-1.2.
• <link rel="stylesheet" type="text/css" media="screen and all" href="stile.css" />, ci permette di escludere Internet Explorer per Windows, Safari 1-1.2 e Konqueror 3.x.

Filtri con i selettori.

Per far leggere una parte di CSS solo ad Internet Explorer si puÃ?² definire la “cascata” in questo modo:

* html selettore { color: red; }.

Con questa regola definiamo un color: red all’elemento “selettore” contenuto nel tag html a sua volta contenuto in un qualsiasi altro elemento. Dato che html è l’elemento radice di un documento (X)HTML, cioè quello che contiene tutti gli altri elementi, questa regola non si dovrebbe applicare a nessun elemento. Ma gli Explorer la interpretano comunque, come se html fosse contenuto in qualche altro elemento.

Per escludere Internet Explorer per Windows:

head+body selettore {

Oppure:

html>body selettore {

Nessun IE interpreta il selettore +, ma mentre la versione per Windows salta completamente la regola, quella per Mac interpreta la parte che riconosce, cioè body selettore.

Per escludere Internet Explorer si possono usare questi selettori:

padre>figlio {
elemento+adiacente {
elemento[class=valore] {

Attenzione, se dopo questi selettori aggiungete un selettore riconosciuto da IE per Mac la regola sar�  interpretata anche da questo browser.

Filtri con !important.

La !important rule serve per dare più specificitÃ?  ad una regola CSS.

Ad esempio:

CSS:
#id{color: blue;}
span{color: red;}
HTML:
<span id='id'>Di che colore dovrei essere?</span>

Blue! PerchÃ?© #id è un selettore più specifico.

Utilizzando !important possiamo rendere una regola più specifica. Riprendendo l’esempio di prima:

CSS:
#id{color: blue;}
span{color: red !important;}
HTML:
<span id='id'>Di che colore dovrei essere?</span>

Questa volta dovrei essere red.

Ma se nella stessa regola definiamo due definizioni uguali, una con !important e una senza, Internet Explorer per Windows ignorerÃ?  !important e farÃ?  valere la seconda definizione. Quindi nel seguente codice:

CSS:
#esempio{color: red !important; color: blue;}
HTML:
<span id='esempio'>Di che colore dovrei essere?</span>

Dovrei essere red, ma se stai usando IE per Windows sono blue.

I commenti condizionali.

I commenti condizionali servono per far leggere o nascondere del codice HTML solo a Internet Explorer per Windows.

Questa tecnologia proprietaria Microsoft sfrutta i commenti tradizionali HTML (<!-- commento -->) ed una specie di Comment Data XML (<![CDATA[ commento dati XML ]]>).

La sintassi è:

Forma 1:
<!--[if operatore IE versione]>
   Codice HTML letto solo da IE.
<![endif]-->
Forma 2:
<![if operatore IE versione]>
   Codice HTML forse ignorato da IE (dipende dalla condizione).
<![endif]>

La seconda forma di commento condizionale non è validabile secondo le specifiche W3C.

I valori validi per operatore sono:

!

Negazione.

lt

Less-than, minore di.

lte

Less-than or equal, minore o uguale.

gt

Greater-than, maggiore di.

gte

Greater-than or equal, maggiore o uguale.

Qualche esempio:

Il foglio di stile ie.css sar�  caricato da tutti gli IE per Windows.
<!--[if IE]>
   <style type='text/css'>
      @import “ie.css”
   </style>
<![endif]-->
Il foglio di stile ie.css sar�  caricato solo da IE 5 per Windows.
<!--[if lt IE 5.5]>
   <style type='text/css'>
      @import “ie.css”
   </style>
<![endif]-->

Discorso simile per il secondo tipo di commento (che non è validabile secondo le specifiche W3C!):

<![if !IE]>
Se stai leggendo questo testo NON stai utilizzando
Internet Explorer 5 o superiori per Windows.
<![endif]>

Tabella riassuntiva.

Come abbiamo detto, possiamo filtrare i browser più datati con @import "style.css". Per i browser più recenti, con un supporto (completo o parziale) dei CSS 2 si veda la seguente tabella riassuntiva.

Legenda:

• SI: il browser legge il CSS.
• NO: il browser non legge il CSS.

Esempio di filtri combinati.

Per concludere questo lungo e noioso articolo, vediamo un esempio di filtro combinato per importare un CSS solo nel caso il browser sia Internet Explorer.

<!--[if lt IE 7]><style>@import "ie.css";</style><![endif]-->
<style type="text\css" media="screen and all">
@import url(ie.css) not all;
</style>

Con i commenti condizionali abbiamo importato il file ie.css con Internet Explorer per Windows (escludendo la versione 7 del browser).

Per importarlo anche (e solo) con IE per Mac abbiamo fatto un doppio filtro con @import url(ie.css) not all, che esclude tutti i browser tranne IE 5 per Mac e Safari 1-1.1, e con <style media="screen and all">, che esclude il contenuto del tag style, tra gli altri, a Safari 1-1.1.

Approfondimenti:

• CSS filtes and hacks, la risorsa in inglese da cui è stato tratto questo articolo.
• Will the browser apply the rule(s)? una risorsa simile alla precedente, i test includono anche browser più recenti, ma il numero di filtri è minore e la “selezione” non mi piace molto. Include anche i test con IE 7 beta 1, ma l’esito dei test eseguiti non sembrano corrispondere a quelli accennati nell’articolo pubblicato sul blog di Internet Explorer Call to action: The demise of CSS hacks and broken pages.
• Css Hack, una raccolta di hack molto completa pubblicata sul wiki della mailing-list Css-Discuss.
• Un commento di Jonny Axelsson di Opera Software ad un hack per rendere un CSS visibile solo ad Opera 7.
• Internet Explorer per Mac ci saluta, un intervento di Mirko Corli sul comunicato della Micorsoft sull’interruzione dell’assistenza e dei download di IE 5 per Mac.

post<li>

tag: browser, CSS, hack.

post correlati:

• Filtri CSS per Opera browser
• Il doctype switch
• Effetti di attivazione per i link costituiti da immagini
• Forzare l'aggiornamento della cache per file esterni
• This Style (Plugin per WordPress)
• Il box model
• Selezionare i link di un documento navigato con la tastiera