Rilevare il browser con jQuery

Annunci Pubblicitari

Smanettando con jQuery ho scovato quest’utilissima funzionalità che permette di filtrare gli script in base al browser. L’utilità è ovvia: come per ie si usano i commenti condizionali con jQuery è possibile passare stili specifici in base al browser o alla versione.

Possibili utilizzi:

  • Applicare funzioni proprie dei css3 solo ai browser che li supportano
  • Applicare effetti di jQuery solo sui browser che li renderizzano correttamente
  • Caricare CSS diversi in base al browser (anche se qui devo dire di non capire come scrivere nell’<head>…)

Nella demo ho usato sia jQuery.browser che restituisce un array con la versione del browser e un valore booleano per ciascun browser, sia la notazione $.browser.xxx (dove xxx può essere safari, opera,msie e mozilla).


Nella prima parte della demo:

jQuery.each(jQuery.browser, function(i, val) {

$("<div class=\"info\">" + i + " : <span>" + val + "</span>")

.appendTo(document.body);

});

Viene stampato in body un div che riporta nome del broser e valore booleano.

Nella seconda parte della demo:

if ($.browser.safari) {	var saluto = "Ciao sono SAFARI";

$("#centrato span").css("top",100).css("color","#222");

$("#centrato").css("background","#fee");

} else if ($.browser.opera) {

var saluto = "Ciao sono OPERA!!";

$("#centrato span").css("top",90);

$("#centrato").css("background","#A11315");

} else if ($.browser.msie) {

var saluto = "Emh sono IE...";

$("#centrato").css("background","blue");

} else if ($.browser.mozilla) {

var saluto = "Ciao sono Firefox ;)";

$("#centrato span").css("top",80);

}$("#centrato span").append(saluto);

Nel secondo caso usando i flag (opera,mozilla ecc.) posso effettuare un test e valorizzare opportunamente una stringa. Già che c’ero ho ritoccato i css cambiando colore e posizione della scritta in base al browser ;) .

Articoli Correlati

Una Risposta a “Rilevare il browser con jQuery”

  1. Devon dice:

    Comodo! Grazie della dritta!

commenta il postLascia un commento

XHTML: puoi utilizzare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>