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
.
Un Commento
Comodo! Grazie della dritta!