CSS Diversi Per I Browser Internet Explorer e Mozilla

E’ problema comune tra i webdesigner garantire l’accessibilità del sito web del quale si crea il template. Usando i CSS questo problema è aggravato dal fatto che non tutti i browser interpretano i fogli di stile alla stessa maniera, differenza che si nota maggiormente per le versioni di Internet Explorer precedenti alla 7.0 e Mozilla Firefox.

Nono stante la mole di utenti di Mozilla stia aumentando notevolmente, Internet Explorer resta comunque il browser più usato e quindi si rende necessario l’ottimizzazione dei fogli di stile per il browser di casa Microsoft.

Dunque per permettere l’accessibilità al nostro sito dai diversi browser è possibile inserire all’interno del nostro foglio di stile dei commenti che regolano lo stile della pagina a seconda del browser.

{
height: 15px;    // La riga viene applicata a tutti i browser
#height: 15px;    // La riga viene applicata solo da Internet Explorer
_height: 21px;    // La riga viene applicata solo da Internet Explorer 6 o precedente
}

Possiamo inoltre usare il Conditional CSS che non fa altro che usare il condizionale if per indicare al browser se usare o meno quella stringa di codice CSS.
La sintassi di base di un Conditional CSS puo’ essere:

• [if {!} browser]
• [if {!} browser version]
• [if {!} condition browser version]

Ecco un esempio:

.post {
width: 400px;
[if IE 6] width: 500px;
}

In questo caso se il browser che apre la pagina e’ Internet Explorer 6 la nostra classata post sara’ larga 500px altrimenti sara’ 400px

I browser vengono indicati da questi codici:

IE – Internet Explorer
Gecko – Gecko based browsers (Firefox, Camino ecc)
Webkit – Webkit based browsers (Safari, Shiira ecc)
Opera – Opera’s browser
IEMac – Internet Explorer per Mac
Konq – Konqueror
IEmob – IE mobile
PSP – Playstation Portable
NetF – Net Front

E’ possibile anche impostare delle condizioni:

.post {
width: 400px;
[if lte IE 5.0] width: 500px;
}

In questo caso se il browser che apre la pagina e’ una versione precedente o uguale di Internet Explorer 5 la nostra classata post sara’ larga 500px altrimenti sara’ 400px.

Le condizioni che possiamo utilizzare sono:

! – Non e’
lt – Minore di
lte – Minore di o Uguale a
eq – Uguale a
gte – Maggiore di o Uguale a
gt – Maggiore di

Infine possiamo usare anche i commenti condizionali (solo per versioni successive a IE 5 e su Windows). In pratica e’ una stringa di codice che inserisce una condizione if all’interno di un commento di una pagina web. Quindi questo codice e’ possibile usare solo con il linguaggio HTML dentro la pagina e servira’ appunto per distinguere i browser e per poter segnalare un file css diverso se il sito viene aperto con Internet Explorer.

Esempio:

<!–[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”http://www.tuosito/ie6.css” />
<![endif]–>

Con questo commento all’interno di un file HTML viene data l’indicazione di caricare un differente foglio di stile CSS se la pagina e’ aperta con Internet Explorer 6 o versioni precedenti.

Le condizioni che possiamo utilizzare sono le stesse del conditional CSS sopra riportate.