Rilevare il browser con jQuery



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 ;) .

Questo post è stato inserito in jQuery e taggato come , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post Correlati




Un Commento

  1. Devon
    Posted 19 Luglio 2008 at 08:57 | Permalink

    Comodo! Grazie della dritta!

Inserisci un Commento

La tua email non sarà resa pubblica. I campi obbligatori sono contrassegnati con *

*
*