Using Javascript to detect Google Chrome to switch CSS
Solution 1
Use the following to detect chrome:
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
Source: http://davidwalsh.name/detecting-google-chrome-javascript
Update (2015-07-20):
The above solution does not always work. A more reliable solution can be found in this answer (see below). That being said, I would avoid browser detection and go with feature detection instead:
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
You can include a css file specifically for chrome like this:
if (isChrome) {
document.write('<'+'link rel="stylesheet" href="../component/chromeDefault.css" />');
}
UPDATE (2014-07-29):
@gillesc has a more elegant suggestion for detecting Chrome which he posted in a comment below and it can also be viewed on this question.
var isChrome = !!window.chrome
Solution 2
Here are two simple methods,one using indexOf and one using test :
// first method
function check_chrome_ua() {
var ua = navigator.userAgent.toLowerCase();
var is_chrome = /chrome/.test(ua);
return is_chrome;
}
// second method */
function check_chrome_ua2() {
var ua = navigator.userAgent.toLowerCase();
var is_chrome = ua.indexOf("applewebkit/") != -1 && ua.indexOf("khtml") > - 1;
return is_chrome;
}
alert(check_chrome_ua()); // false or true
alert(check_chrome_ua2()); // false or true
After checking if chrome is in use or not with one of these two boolean functions,you can implement your method on changing the stylesheet.
Solution 3
Update for Chrome on iOS: Chrome 38 (tested on iOS 8.1) returns false on !!window.chrome
. To fix this you can use:
function isChrome(){
var windowChrome = !!window.chrome;
if(!windowChrome){
// Chrome iOS specific test
var pattern = /crios/i;
return pattern.test(window.navigator.userAgent);
}else{
return windowChrome;
}
}
Google reference on the matter
Jakob
Updated on July 09, 2022Comments
-
Jakob almost 2 years
I have been playing around with different scripts, I found one that works for everything but Chrome... this is the code I have been using to differ in .CSS files. I tried just makeing the Browser name into "Chrome" But that did not work.
if (browser == 'Firefox') { document.write('<link rel="stylesheet" href="../component/fireFoxdefault.css" />'); } if (browser == 'Safari') { document.write('<'+'link rel="stylesheet" href="../component/default.css" />'); }