Non solo Netscape 4, ma anche i vecchi browser di casa Microsoft presentano qualche problema con i CSS.

Com’è noto si può decidere di nascondere la visualizzazione dei CSS ai browser più datati come Netscape 4, ma spesso ci si dimentica di altri browser piuttosto “anziani” come Internet Explorer 3 e 4. Molte delle tecniche utilizzate per nascondere i fogli di stile per Netscape 4 possono essere valide anche per le versioni 3 e 4 di Netscape; come al solito potete scegliere di utilizzare due specifici CSS, uno per tutti i browser moderni e uno, più semplice, per i browser vecchi.

Purtroppo Netscape 4 e Internet Explorer 3 non sono in grado di riconoscere il metodo @import per allegare i fogli di stile; il metodo più veloce e semplice per prendere due piccioni con una fava è quello di adoperare il tag link per fissare i fogli di stile su browser vecchi, come Netscape e IE3, e il metodo @import per tutti gli altri:

[code lang=”html”]
<link href=”styleNS4IE3.css” rel=”stylesheet” ¬
type=”text/css”>
<style type=”text/css”>
<!–
@import url(“style.css”);
–>
</style>
[/code]

Internet Explorer 4 riconosce in parte il comando @import, però seguendo una specifica e precisa sintassi. Infatti le specifiche CSS 2.1 permettono solamente due modi per applicare la regola @import:

[code lang=”css”]@import “mystyle.css”;
@import url(“mystyle.css”);[/code]

Il secondo metodo è utilizzato più dagli addetti ai lavori, ma è importante notare che il primo metodo non è supportato da Internet Explorer 4; quindi se dovete produrre un foglio di stile destinato a IE3/4, Netscape 4, e contemporaneamente a un browser moderno e più recente dovete tener presente che questo codice viene meno.

Una possibile soluzione al problema è:

[code lang=”html”]<link href=”styleIE3IE4NS4.css” rel=”stylesheet” ¬
type=”text/css”>
<style type=”text/css”>
<!–
@import “style.css”;
–>
</style>
[/code]

Interpretazione delle regole

Il supporto ai CSS su Internet Explorer 3 venne anticipato nei tempi, per questo motivo il browser interpreta in maniera errata molti concetti chiave. Il primo e più importante è legato alla cascata; infatti se viene dichiarata per uno stesso elemento diverse proprietà, viene riconosciuta come valida l’ultima in ordine:

[code lang=”css”]p { color: red; }
p { color: blue; }[/code]

Tutti i browser moderni applicherebbero il colore blu all’elemento p; invece Internet Explorer 3 riconoscerebbe solamente la prima regola, ignorando la seconda. Questo sistema ci fornisce un metodo per controllare quello che Internet Explorer 3 può e non può vedere.

Per poter nascondere una singola regola a Internet Explorer 4 si può decidere di spostare la regola desiderata all’interno del tag @media, secondo l’ordine:

[code lang=”css”]@media all {
tr { margin:3px; }
}[/code]

Internet Explorer 4 non riconosce il tag @media, così la proprietà racchiusa al suo interno viene ignorata dal browser.