Using Javascript to detect Google Chrome to switch CSS

Question

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" />');
}

Hmm, I know this isn't part of your question (and *maybe* you have a good reason for doing this) but you shouldn't write CSS to target a browser, you should target features... for instance, Safari and Chrome should definitely not require separate CSS. http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ — potench, Apr 20 '12 at 18:12
Possible duplicate of [JavaScript: How to find out if the user browser is Chrome?](https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome) — zypA13510, Dec 01 '17 at 02:32

score 37 · Accepted Answer · edited May 23 '17 at 12:02

37

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

edited May 23 '17 at 12:02

Community

1
1

answered Apr 20 '12 at 18:00

T. Junghans

11,385
7
52
75

Alright that worked out nicely. I looked at that website and read it, but it really didn't make since for some reason with the "-1" at the end of the variable. – Jakob Apr 20 '12 at 18:32
1

.indexOf returns the position of the value (browser name) in the string (userAgent). The position starts with 0. -1 is returned if the value is not found. https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf – T. Junghans Apr 20 '12 at 18:41
9

`var is_chrome = !!window.chrome` is a better detection method as user agent can be spoofed. – GillesC Jul 29 '14 at 13:56
@gillesc thanks! I have included that in the answer. – T. Junghans Jul 29 '14 at 15:15
2

I found that chrome detection through user agent isn't reliable. For instance Opera 27 on linux includes "chrome" too in the user agent string. – reallynice Feb 10 '15 at 15:17
Above solution doesn't give correct results for some browsers. See this link http://stackoverflow.com/questions/5125438/why-do-chrome-and-ie-put-mozilla-5-0-in-the-user-agent-they-send-to-the-server for the reason behind the incorrect result. This link http://stackoverflow.com/questions/12625876/how-to-detect-chrome-and-safari-browser-webkit provides the correct answer – shrawan_lakhe Jul 18 '15 at 21:23
@shrawan_lakhe thanks for the links, I have included the second one in my answer above – T. Junghans Jul 20 '15 at 17:11
TIL, Some versions of Edge define `window.chrome`, so the vendor check is still needed – Hunter McMillen Mar 28 '17 at 01:34

score 1 · Answer 2 · answered Apr 20 '12 at 18:51

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.

Arnaud Leyder · Answer 3 · 2014-12-16T12:15:02.770

1

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

edited Dec 16 '14 at 12:15

answered Nov 26 '14 at 16:06

Arnaud Leyder

6,674
5
31
43

2

Chrome for iOS is just Safari, don't confuse the two. – fregante Sep 14 '16 at 17:09

score -1 · Answer 4 · answered Apr 20 '12 at 18:11

var userAgent = navigator.userAgent.toLowerCase(); 
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

// Is this a version of Chrome?
if($.browser.chrome){
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
}

// Is this a version of Safari?
if($.browser.safari){
  userAgent = userAgent.substring(userAgent.indexOf('safari/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
}

dont understand why in second line you use again navigator.userAgent.toLowerCase() since you have already declared it as userAgent above ;) Nice answer though — Rrjrjtlokrthjji, Apr 20 '12 at 18:54

Using Javascript to detect Google Chrome to switch CSS

4 Answers4

Linked

Related