Booom.it

Tra le varie soluzioni per caricare un foglio di stile in base al browser che stiamo utilizzando vi è anche quella che utilizza Javascript.

Utilizziamo un semplice test già definito qui.

1
opera=(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
2
mozilla=(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
3
ie=(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?1:0;

A questo punto a seconda della variabile che risulta vera possiamo caricare un CSS piuttosto che un altro:

01
if (ie){ 
02
// Nel caso di Internet Explorer
03
document.write("<link rel='stylesheet' href='ie.css' type='text/css' />");
04
}else if (mozilla) {
05
// Nel caso di Mozilla
06
document.write("<link rel='stylesheet' href='mozilla.css' type='text/css' />");
07
}else if (opera) {
08
// Nel caso di Opera
09
document.write("<link rel='stylesheet' href='opera.css' type='text/css' />");
10
}else{
11
// In caso di un altro browser
12
document.write("<link rel='stylesheet' href='generic.css' type='text/css' />");
13
}

Ovviamente i modi sono svariati, si può per esempio agire sugli elementi della pagina, in quanto a seconda del browser esistono metodi e attributi differenti per alcuni oggetti:

01
if(document.layers){
02
// Netscape 4 ed equivalenti
03
document.write("<link rel='stylesheet' href='netscape4.css' type='text/css' />");
04
}
05
if(document.all){
06
// Internet Explorer
07
document.write("<link rel='stylesheet' href='ie.css' type='text/css' />");
08
}
09
if(document.getElementById){ 
10
// Netscape 6 ed equivalenti
11
document.write("<link rel='stylesheet' href='netscape6.css' type='text/css' />");
12
}

Così facendo il test sui precedenti metodi e attributi sappiamo che browser si sta utilizzando.

Tra i metodi differenti esistenti per caricare un foglio di stile diverso a seconda del browser, possiamo utilizzare uno strumento offerto da Microsoft Internet Explorer, cioè, i commenti condizionali.

I commenti condizionali sono porzioni di codice HTML definite con la sintassi di commento HTML, per cui ignorate dai browser (a parte Internet Explorer).

Normale commento HTML:

1
<!-- Questo è un commento -->

Il commento è visibile solo nel codice sorgente della pagina e non nella pagina stessa. La soluzione di Microsoft sta quindi di inserire delle condizioni (if) all’interno appunto dei commenti HTML, la sintassi è semplice e così anche le espressioni che vengono valutate.

Commento Condizionale:

1
<!--[if espressione]> Contenuto <![endif]-->

In questo modo è possibile visualizzare dei contenuti a seconda del risultato dell’espressione, anche il codice per caricare un foglio di stile.

Alcuni esempi di espressioni:

1
<!--[if IE]>....<![endif]--> è verificata se il browser è Internet Explorer in qualsiasi versione.
2
<!--[if IE 5]>....<![endif]--> è verificata se il browser è Internet Explorer versione 5 ;
3
<!--[if gt IE 5]>....<![endif]--> è verificata se il browser è Internet Explorer con versione maggiore di 5;
4
<!--[if gte IE 5]>....<![endif]--> è verificata se il browser è Internet Explorer versione 5 o superiore;
5
<!--[if !IE 5]>....<![endif]--> è verificata se il browser non è Internet Explorer 5.

Ovviamente basta sostituire il numero associato alla versione per creare l’espressione di cui abbiamo bisogno, anche creando commenti a cascata.

Ora è immediato il passaggio per caricare un foglio di stile, per esempio carico ie.css in caso di Internet Explorer e comunque il file generic.css:

1
<link rel="stylesheet" href="generic.css" type="text/css" />
2
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->

Ha senso che il foglio di stile dedicato ad Internet Explorer sia successivo a quello generico, in quanto permette di sostituire i parametri diversamente definiti.

In questo articolo impariamo a riconoscere il browser dell’utente tramite l’oggetto navigator la cui proprietà userAgent contiente le informazioni che ci servono, riguardanti browser, sistema operativo, ecc.

1
<button onclick="alert(navigator.userAgent);">User Agent</button>

Prova Qui

La stringa che compare è qualcosa di simile “Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.0.13) Gecko/2009080315 Ubuntu/9.04 (jaunty) Firefox/3.0.13″ il che vi da molte informazioni sul browser che sto usando in questo momento.

Quello che ci interessa capire è fondamentalmente se si tratta di un browser basato su Mozilla, su Opera o su Internet Explorer. Per fare ciò ci sono svariati modi, qui useremo un semplice test:

1
opera=(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
2
mozilla=(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
3
ie=(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?1:0;

Ed ecco il test in modo molto compatto:

1
<button onclick='(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))?alert("Usi Opera"):(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))?alert("Usi Mozilla"):(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?alert("Usi internet Explorer"):alert("Non usi ne Opera ne Mozilla ne Internet Explorer, oppure si è verificato un problema :(");'>Prova Qui</button>