JavaScript  »  Guide  »  Guida jQuery 

Una delle funzioni più diffuse nelle librerie JavaScript e più usata dagli sviluppatori è il browser detection (o browser sniffing), cioè la possibilità di determinare quale browser stia utilizzando l'utente. In jQuery la funzionalità viene delegata alle proprietà dell'oggetto $.browser. In particolare viene impostata  su true la proprietà relativa al browser in uso. Ecco i valori che troveremo se l'utente usa Internet Explorer:

$.browser.msie == true
$.browser.safari == false
$.browser.opera == false
$.browser.mozilla == false //Mozilla e Firefox

Per raffinare ulteriormente la ricerca è possibile ricavare la versione del browser in uso dalla proprietà $.browser.version. Riprendendo l'esempio precedente, ipotizziamo che il browser sia Internet Explorer 7:

$.browser.msie == true
$.browser.version == "7.0"

Una particolarità dell'oggetto $.browser è che viene reso disponibile prima del caricamento del DOM, rendendolo utile per associare eventi onDOMReady solo per certi browser:

if ($.browser.msie) {
    $(function () {
        alert("DOM caricato in IE!");
    });
}

In realtà dalla versione 1.3 l'uso di questo oggetto è sconsigliato in favore di $.support che, piuttosto del tipo di browser, determina quali siano le caratteristiche attive o disponibili sul browser dell'utente.
Questo cambiamento di rotta è legato alla constatazione che, la maggior parte delle volte, il browser detection serve a determinare il supporto o meno di certe caratteristiche in un browser, oppure ad attivare workaround per specifici bug.
Ricercare direttamente queste proprietà rende quindi tutto più diretto e soprattutto slega il codice dagli errori derivanti dall'avvento di nuove versioni dei browser.

Ecco in sintesi le proprietà disponibili (impostate su true se presenti):

• boxModel: il browser rispetta il W3C CSS Box Model? (falso in IE 6 e 7 in Quirks Mode, equivale a $.browser.boxModel in jQuery 1.2)
• cssFloat: è possibile accedere al valore CSS float con style.cssFloat (falso in IE)
• hrefNormalized: il risultato di .getAttribute("href") è lasciato intatto? (falso IE)
• htmlSerialize: gli elementi link sono serializzati correttamente con .innerHTML? (falso in IE)
• leadingWhitespace: gli spazi vuoti iniziali sono preservati con .innerHTML? (falso in IE 6-8)
• noCloneEvent: quando un elemento viene duplicato gli eventi collegati NON sono clonati? (falso in IE)
• objectAll: lanciando .getElementsByTagName("*") su un elemento restituisce tutti i suoi discendenti (falso in IE 7 e 8)
• opacity: esiste la proprietà CSS opacity? (falso in IE)
• scriptEval: Gli script vengono eseguiti se sono inseriti nel DOM con .appendChild() o .createTextNode() (falso in IE)
• style: .getAttribute("style") legge lo stile inline di un elemento? (falso in IE)
• tbody: il browser accetta una tabella senza un elemento tbody? (falso in IE)

Nelle future versioni di jQuery $.support rimarrà l'unico mezzo per determinare il browser dell'utente ed il suo supporto a determinate caratteristiche. Se proprio lo volessimo usare per identificare Internet Explorer 6 potremmo comunque scrivere:

if (!$.support.cssFloat && $.support.objectAll) {
	//codice per IE < 7
}

Altri articoli

Altre guide

Altre newsletter