Nascondere i CSS
In alcuni casi, nascondere i CSS o parte di essi a specifici browser può essere davvero utile. Ad esempio Netscape Navigator 4 (nato poco tempo dopo la definizione dei CSS di livello 1), non supporta affatto i CSS di livello 2 ed interpreta i CSS di livello 1 in maniera molto "personale". Come conseguenza, un sito che utilizzi i CSS può divenire molto confuso se visualizzato con NN4. Oppure si consideri Internet Explorer 5 per Windows, il quale ha un'errata interpretazione del box model.
Netscape Navigator 4
Come detto NN4 ha un'interpretazione talmente scarsa dei CSS che le pagine potrebbero divenire illegibili. Per risolvere il problema ci sono essenzialmente tre metodi:
- creare un foglio di stile compatibile anche con NN4;
- non utilizzare nessun foglio di stile per NN4;
- creare un foglio di stile apposito per NN4.
La prima soluzione, che a prima vista può sembrare la più conveniente, è quella più radicale e meno consigliabile. Creare un CSS che venga interpretato correttamente da NN4 significa però rinunciare a quasi tutte le potenzialità dei CSS.
La seconda e la terza soluzione sono quelle consigliabili (soprattutto la terza) e possono essere realizzate attraverso la regola '@import'.
Per associare un foglio di stile esterno ad una pagina ci sono essenzialmente due comandi:
<head>
<link rel="stylesheet" type="text/css" href="foglio_di_stile.css" />
</head>
ovvero
<head>
<style type="text/css">
@import url("foglio_di_stile.css");
</style>
</head>
Il primo metodo viene permette di importare i CSS su tutti i browser compatibili con i CSS, NN4 compreso. Il secondo metodo, basato su @import, non viene interpretato da browser datati come IE4 e NN4. Per impedire che il CSS venga (disastrosamente) interpretato da NN4 è sufficiente caricare il foglio di stile con il metodo @import. In questo modo la pagina sarà priva di layout, ma, avendo strutturato con cura l'(X)HTML il sito darà totalmente accessibile anche senza grafica.
Se invece si decidesse di utilizzare un CSS apposito per NN4 è sufficiente utilizzare ambedue i metodi per associare un foglio di stile ad una pagina web:
<head>
<link rel="stylesheet" type="text/css href=\"css_x_nn4.css" />
<style type="text/css">
@import url("css_avanzato.css");
</style>
</head>
Nel foglio di stile css_x_nn4.css ci sono solo quelle regole che vengono correttamente interpretate da NN4, nel foglio di stile css_avanzato.css ci sono le regole che NN4 non è in grado di intepretare. Se in css_avanzato.css ci sono delle regole presenti anche in css_x_nn4.css, quest'ultime vengono sovrascritte. Se ad esempio in css_x_nn4.css si definisce un colore di sfondo bianco per il body e in css_avanzato.css si definisce un colore di sfondo grigio per il body, le pagine su NN4 appariranno su uno sfondo bianco mentre in NN6, ad esempio, appariranno su uno sfondo grigio.
Oltre che a NN4, il metodo illustrato nasconde il foglio di stile anche a:
- IE3/Win
- IE4/Win (4.72 escluso)
- IE4.01/Mac
- IE4.5/Mac
- Konqueror 2.1.2
- Amaya 5.1/Win
Internet Explorer 5 per Windows
Internet Explorer 5 per Windows ha una valida interpretazione dei CSS. Gli unici due grandi problemi rilevabili sono l'interpretazione delle keyword per il dimensionamento assoluto dei font (vedi "Dimensionare i caratteri con i CSS") e l'interpretazione del box-model.
Un bug di IE5/Win può risolvere (!) il problema. Sembra assurdo, ma, una volta tanto, un bug risulta molto utile.
La tecnica è nota come "il Box Model Hack" di Tantek e viene usata principalmente per risolvere il problema del box model di IE5/Win. Un'esempio è di seuito riportato.
.box {
/*
si vuole un box largo 224px
di cui 200px per i contenuti
5+5px per i bordi e
7+7px per il padding
*/
border:5px solid;
padding:7px;
margin:10px
width:224px; /* valore per IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
width:200px; /* valore per gli altri browser */
}
html>body .box { /* "be nice to Opera 5" !! non lasciare spazi prima o dopo '>' !! */
color:blue;
}
Quando IE5/Win effettua il parsing del CSS e incontra l'istruzione voice-family: "\"}\"";, un bug blocca l'interpretazione delle regole fino a }. L'istruzione voice-family:inherit;, ripristina il giusto valore per la proprietà voice-family. I browser che non hanno il medesimo bug di IE5/Win continueranno il parsing delle regole assegnate alla class '.box', sovrascrivendo la larghezza precedentemente assegnata.
Non è solo IE5/Win ad avere un bug che impedisce di continuare a leggere le istruzioni della classe 'box'. Ad esempio anche Opera 5 ha il medesimo errore ma, a differenza di IE5/Win, ha una corretta interpretazione del box model. La regola assegnata subito dopo attraverso il selettore 'html>body .box' (non interpretato da IE6/Win e inferiori) permette ad Opera 5 di leggere la giusta istruzione (da cui il nome "be nice to Opera 5" assegnato da Tantek alla regola).
Bisogna però fare molta attenzione. Se non viene specificato il giusto DOCTYPE della pagina, i browser di nuova generazione (IE6, NN6) funzioneranno con precedenti versioni proprietarie dei DOCTYPE. Per esempio IE6/Win funzionerà, dal punto di vista dei CSS, come il vecchio IE5/Win riproponendo l'errata interpretazione del box model, ma la tecnica di Tantek non risolverà il problema, poiché il bug che la faceva "funzionare" non è presente (fortunatamente) in IE6/Win. Lo stesso avviene (con IE6) se si utilizza il prologo ?xml:
<?xml version="1.0"?>
Non essendo il prologo necessario, è meglio non includerlo nelle pagine.
E gli altri browser?
Ci sono molte altre tecniche, raccolte presso w3development.de, che permettono di nascondere in modi diversi i CSS a diversi altri browser. Qui si è cercato di illustrare le due tecniche più diffuse, poiché più utili, fra i webmaster. Si consiglia comunque di dare un'occhiata alle altre tecniche soprattutto per non nascondere i CSS a un browser per errore.
File correlati
Articoli correlati:
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
