Fogli di stile alternativi e CSS condizionali – parte prima

Codice retro-compatibile Rendere il proprio codice css retro-compatibile e far in modo che anche chi possiede un computer obsoleto con […]
Fogli di stile alternativi e CSS condizionali – parte prima

Codice retro-compatibile

Rendere il proprio codice css retro-compatibile e far in modo che anche chi possiede un computer obsoleto con software datato possa avere un’esperienza di navigazione quasi completa è molto importante. Nelle aziende piu grandi, gli utenti finali dei computer non sono autorizzati ad aggiornare il software delle proprie macchine per motivi di sicurezza, compito affidato agli amministratori di rete i cui interventi non sono costanti. Perchè negare l’esperienza a questi utenti, obbligati ad utlizzare browser datati?

CSS alternativi ad-hoc

Allo stato attuale delle cose, ancora alcuni browser abbastanza diffusi come IE6 non rispettano e non interpretano correttamente molte regole CSS utilizzate nella stesura dei nostri fogli si stile. L’unico modo per garantire un’esperienza di navigazione completa è quella di redigere dei css alternativi ad-hoc per quei browser che non interpretano bene le regole. Analizziamo i metodi che ce lo consentono di fare. Il primo metodo, il piu classico e usato consente di gestire i fogli di stile alternativi tramite i commenti condizionali tra i tag head del sito. Vediamo un esempio di codice:

<!-- ///// Inizio inclusione css  -->
<link href="/css/zero.css" rel="stylesheet" type="text/css" />
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]> <link href="/css/ie6.css" rel="stylesheet" type="text/css" /> <![endif]--> 

In questa piccola porzione di codice abbiamo collegato alla pagina tre fogli di stile, i primi due vengono interpretati da tutti i browser indistintamente, il terzo invece racchiuso tra i commenti condizionali verrà interpretato solo dal browser e dalla versione indicata nella condizione. “if IE 6” significa ad esempio che il contenuto del foglio di stile in questione verrà interpretato solo se il browser utilizzato è IE6. Altre tipologie di commenti condizionali prevedono l’uso degli operatori di confronto LT – LTE – GT – GTE. Facciamo un altro esempio:

<!--[if gt IE 6]><link href="/css/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
La condizione verifica se il browser è Internet Explorer, versione superiore alla 6

<!--[if gte IE 6]><link href="/css/ie.css" rel="stylesheet" type="text/css" /><![endif]--> 
La condizione verifica se il browser è Internet Explorer, versione uguale o superiore alla 6

Abbiamo appena imparato come includere un foglio di stile alternativo, ora bisogna vedere come funzionano e in che modo riempirli. Nel foglio di stile interpretato da tutti i browser si redigono tutte le regole css. Nei fogli di stile alternativi invece si vanno a modificare, di una data regola, solo le dichiarazioni che ci interessano, dichiarazioni che andranno a sovrascrivere le propietà originarie. Facciamo un piccolo ensempio esempio.

/* Regola inclusa nello stile.css. E' interpretate da tutti i browser. */
#div {
    width:200px;
    height:200px;
    background-color:red;
    padding:20px;
}
/* 
Regola inclusa nel css ie6.css e quindi interpretata solo da IE6.
Andiamo a ridichiarare lo stesso selettore (#div) ma stavolta scriviamo solo la regola 
che vogliamo che assuma un comportamento diverso
*/
#div {
    height:500px;
}

IE6 erediterà tutte le prorietà elencate nel primo css ma darà priorità alla proprietà height:500px. Seguite il continuo della guida per scoprire come inserire direttamente nei fogli di stile i commenti condizionali.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github