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.

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>