Interesting Browser Detection

Saturday, June 16th 2012

Often, I need to change the way I apply some CSS due to the different box models that browsers employ. Some include padding, some borders, some other stuff in their calculations of widths during their layout phase. I stumbled across this interesting way of detecting the browser that the visitor to your site has decided to use.

1
2
3
4
5
6
7
8
(function() {
var htmlElementName = Object.prototype.toString.call(window.HTMLElement);

isIE8 = htmlElementName === '[object Object]';
isFF13 = htmlElementName === '[object DOMPrototype]';
isChrome19 = htmlElementName === '[object Function]';
isSafari5 = htmlElementName === '[object HTMLElementConstructor]';
})();

Neat, eh?

I put the version numbers on those isXXX variables because those’re the versions that I used to test those values. They might work for other versions, too.

If you use this trick and find a different value or even the same value, then please post your discovery on this page and we can compile a list of very easy-to-use tests for browser detection!