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:

<link href=”styleNS4IE3.css” rel=”stylesheet” ¬
type=”text/css”>
<style type=”text/css”>
<!--
@import url(“style.css”);
-->
</style>

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:

@import “mystyle.css”;
@import url(“mystyle.css”);

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 è:

<link href=”styleIE3IE4NS4.css” rel=”stylesheet” ¬
type=”text/css”>
<style type=”text/css”>
<!--
@import “style.css”;
-->
</style>

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:

p { color: red; }
p { color: blue; }

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:

@media all {
tr { margin:3px; }
}

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

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.