Target specific Chromium browsers since Opera 18+ now uses Chromium 31 like Google Chrome

[Jonathan 5,176 Likes (Superhero)]

Hello..

To those who like to target different browsers, due to the different rendering engines, please keep reading...

Opera 18 was released last month (Nov 18, 2013). It is now based on Chromium 31. It looks almost exactly like Google Chrome. And functions way better than previous version of Opera. So if anyone needs a way to target Chromium based browsers like Google Chrome and now Opera 18 and above, the below might help.

To target if the browser is Chromium based, use this:

// this targets Google Chrome and Opera 18+
var isChromium = window.chrome;if(isChrome === true) {     
  // is chromium based browser
} else {      
  // not chromium based browser
}

To target if the browser is Google Chrome, use this:

var isChromium = window.chrome,    
    vendorName = window.navigator.vendor;
if(isChromium === true && vendorName === "Google Inc.") {     
    // is Google chrome 
} else {      
    // not Google chrome 
}

To target if the browser is Opera 18 or above:

var isChromium = window.chrome,    
    vendorName = window.navigator.vendor;
if(isChromium === true && vendorName === "Opera Software ASA") {      
    // is Opera 18 or above
} else {      
    // not Opera 18 or above
}

There are like 5 other browsers that are Chromium based, but they are not as popular. In that case the window.navigator.vendor should provide the vendor.

I hope this helps anyone that might need to target Google Chrome or Opera 18 and above, while you deal with the various different behavior in each browser.

Have a great day!

[Carl 9,066 Likes (Superhero)]

Thanks Jonathan, its nice to have such solid resources like this available.

 

I never bothered with Opera much, but now that its using the same Blink-webkit-fork thing as Chrome, hopefully the days of "opera issues" are behind us. 

[Jonathan 5,176 Likes (Superhero)]

Hello again ,

 

If you need to check Firefox, IE, and Touch Support.. without checking the user agent, which can be spoofed... see if the below helps.

 

Checking if Firefox:

// check if firefox
var FF = !(window.mozInnerScreenX == null);
if(FF) {
     // is firefox 
} else { 
     // not firefox 
}

Checking if IE and IE versions:

// check if IE8-11
var hasDocumentMode = (document.documentMode !== undefined), 
    isIE8 = (isDocumentMode === 8),
    isIE9 = (isDocumentMode === 9),
    isIE10 = (isDocumentMode === 10),
    isIE11 = (isDocumentMode === 11);

if(hasDocumentMode) {
     if(isIE11){
           // browser is IE11
     } else if(isIE10){
           // browser is IE10
     } else if(isIE9){
           // browser is IE9
     } else if(isIE8){
           // browser is IE8
     }
}

If you really need to detect IE7, check for document.attachEvent:

// check if IE7
var isIE7 = (document.attachEvent !== undefined);
if(isIE7) {
     // browser is IE7
} else {
     // browser NOT IE7
}

Checking for Touch support:

// check if browser has touch support
var hasTouch = !!("undefined" != typeof document.documentElement.ontouchstart);
if (hasTouch) {
     // has touch support
} else {
     // does NOT have touch support    
}

Of course you could use Modernizr. But sometimes you just need less code to check for what browser is what..