Você pode fazer isso de diversas formas !...
Javascript puro"puro"
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"}
]
};
BrowserDetect.init();
document.write("você está usando <b>" + BrowserDetect.browser + "</b> na versão <b>" + BrowserDetect.version + "</b>");
Veja esse exemplo com a função acima
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"}
]
};
BrowserDetect.init();
if document.write("você está usando <b>" + BrowserDetect.browser ===+ "Chrome")"</b> {
na
versão <b>" $("body")+ BrowserDetect.css('background','lightblue'version + "</b>");
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
</body>
Exemplo de utilização
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"}
]
};
BrowserDetect.init();
if (BrowserDetect.browser === "Chrome") {
$("body").css('background','lightblue');
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
</body>
Jquerymodernizr
Uma outra alternativa, seria utilizar o modernizr para determinar os recursos disponíveis no Browser do cliente, com modernizr você pode escrever estilos de forma arbitraria conforme a disponibilidade de recursos, olhe o exemplo
modernizr Exemplo css
$(.loginBox "p"{
).html( "versão: <span>" +
box-shadow:0 10px $.browser.version10px +rgba(0, "</span>"0, 0, 0.3);
}
if ( $.browser
.msieno-boxshadow ).loginBox {
alert( $.browser.version );border: 1px solid #CCC;
border-bottom: 3px solid #CCC;
}
Caso o recurso box-shadow não tenha suporte pelo navegador, style alternativo vai ser .no-boxshadow .loginBox
modernizrYepnopejs
Uma outra alternativa, seria utilizar o modernizr para determinar osVocê pode combinar qualquer um dos recursos disponíveis no Browser do clientemencionados acima com Yepnopejs para carregar arquivos css ou js sobre alguma condição especial.
Exemplo com modernizr
yepnope({
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});
Exemplo com a função js
BrowserDetect.init();
yepnope({
test : BrowserDetect.browser == Chrome,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});