Browserhacks

What's this?

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox.

How to?

Pick the hack you want
Copy it into your stylesheet
Add the style you want between the braces
Enjoy the new styles for the browser you targeted!

Reminder!

Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS/JS or use feature detection.

Android

JavaScript Hacks

var isChromium = !!window.chrome;

chrome *
opera 14+
android 4.0.4

Media Query Hacks

@media screen and (min-width:0\0) {}

Internet Explorer 10+
safari 4
android 2.3+

Chrome

Property/Value Hacks

.selector { (;property: value;); } 
.selector { [;property: value;]; }

chrome 28-
safari 6-
opera 14+

JavaScript Hacks

var isChromium = !!window.chrome;

chrome *
opera 14+
android 4.0.4

Webkit

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

chrome *
safari 3+
opera 14+

var isChrome = !!window.chrome && !!window.chrome.webstore;

chrome 14+

Media Query Hacks

@media \\0 screen {}

chrome 22-28

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}

chrome 29+
opera 16+

Firefox

JavaScript Hacks

var isFF = !!window.sidebar;

firefox *

var isFF = 'MozAppearance' in document.documentElement.style;

firefox *

var isFF = !!navigator.userAgent.match(/firefox/i);

firefox *

var isFF = !!window.globalStorage;

firefox 2-13

var isFF = typeof InstallTrigger !== 'undefined';

firefox 1.5+

var isFF = /a/[-1]=='a';

firefox 2-3

var isFF = (function x(){})[-6]=='x';

firefox 2

var isFF = (function x(){})[-5]=='x';

firefox 3

Selector Hacks

body:empty .selector {}

firefox 1.5/2

.selector, x:-moz-any-link {}

firefox 2+
Internet Explorer 7

.selector, x:-moz-any-link, x:default {}

firefox 3+
Internet Explorer 7

body:not(:-moz-handler-blocked) .selector {}

firefox 3.5+

Media Query Hacks

@media \0 all {}

firefox 3-

@media screen and (-moz-images-in-menus:0) {}

firefox 3.6+

@media screen and (min--moz-device-pixel-ratio:0) {}

firefox 4+

@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}
@media all and (-moz-images-in-menus:0) and (min-resolution: .001dpcm) {}

firefox 8+

Miscellaneous

@-moz-document url-prefix() {}

firefox 3+

Internet Explorer

Property/Value Hacks

.selector { _property: value; } 
.selector { -property: value; }

Internet Explorer 6

Any combination of these characters: ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

.selector { !property: value; } 
.selector { $property: value; } 
.selector { &property: value; } 
.selector { *property: value; } 
.selector { )property: value; } 
.selector { =property: value; } 
.selector { %property: value; } 
.selector { +property: value; } 
.selector { @property: value; } 
.selector { ,property: value; } 
.selector { .property: value; } 
.selector { /property: value; } 
.selector { `property: value; } 
.selector { [property: value; } 
.selector { ]property: value; } 
.selector { #property: value; } 
.selector { ~property: value; } 
.selector { ?property: value; } 
.selector { :property: value; } 
.selector { |property: value; }

Internet Explorer 7-

Acts as an !important; string after ! can be anything

.selector { property: value !ie; }

Internet Explorer 7-

.selector { property: value\9; } 
.selector { property/*\**/: value\9; }

Internet Explorer 6+

JavaScript Hacks

var isIE = document.all && !window.XMLHttpRequest;

Internet Explorer 6-

var isIE = document.all && document.compatMode;

Internet Explorer 6-10

var isIE = document.all && !document.querySelector;

Internet Explorer 7-

var isIE = document.all && window.XMLHttpRequest && !document.querySelector;

Internet Explorer 7

var isIE = document.all && window.XMLHttpRequest;

Internet Explorer 7-10

var isIE = document.all && document.querySelector;

Internet Explorer 8-10

var isIE = document.all && !document.addEventListener;

Internet Explorer 8-

var isIE = document.all && document.querySelector && !document.addEventListener;

Internet Explorer 8

var isIE = document.all && !window.atob;

Internet Explorer 9-

var isIE = document.all && document.addEventListener && !window.atob;

Internet Explorer 9

var isIE = document.all && document.addEventListener;

Internet Explorer 9-10

var isIE = document.all && window.atob;

Internet Explorer 10

var isIE = /*@cc_on!@*/false;

Internet Explorer 10-

Check for Internet Explorer version

var ieVersion = /*@cc_on (function() {switch(@_jscript_version) {case 1.0: return 3; case 3.0: return 4; case 5.0: return 5; case 5.1: return 5; case 5.5: return 5.5; case 5.6: return 6; case 5.7: return 7; case 5.8: return 8; case 9: return 9; case 10: return 10;}})() || @*/ 0;

Internet Explorer 3-10

Check for Internet Explorer version

var ieVersion = (function() { if (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) { return parseFloat( RegExp.$1 ); } else { return false; } })();

Internet Explorer *

var isIE = navigator.appVersion.indexOf("MSIE 7.") !== -1;

Internet Explorer 7

var isIE = '\v'=='v';

Internet Explorer 8-

var isIE = !+'\v1';

Internet Explorer 8-

var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;

Internet Explorer 10

var isIE = document.body.style.msTouchAction !== undefined;

Internet Explorer 10+

var isIE = window.navigator.msPointerEnabled;

Internet Explorer 10+

var isIE = 'behavior' in document.documentElement.style && '-ms-user-select' in document.documentElement.style;

Internet Explorer 10+

var isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;

Internet Explorer 11

Selector Hacks

.selector, x:-moz-any-link {}

firefox 2+
Internet Explorer 7

.selector, x:-moz-any-link, x:default {}

firefox 3+
Internet Explorer 7

.unused-class can be any unused class

* html .selector  {} 
.unused-class.selector {}

Internet Explorer 6-

.selector, {}

Internet Explorer 7-

*:first-child+html .selector {} 
.selector, x:-IE7 {} 
*+html .selector {} 
body*.selector {} 
.selector\ {}

Internet Explorer 7

.selector\ {}

Internet Explorer 7

Everything but Internet Explorer 6

html > body .selector {}

Internet Explorer 6

Everything but Internet Explorer 7-

html > /**/ body .selector {}
head ~ /**/ body .selector {}

Internet Explorer 7-

Everything but Internet Explorer 8-

:root * > .selector {} 
body:last-child .selector {} 
body:nth-of-type(1) .selector {} 
body:first-of-type .selector {}
.selector:not([attr*='']) {}

Internet Explorer 8-

_:-o-prefocus, .selector {}

opera 9.5/10/11/12
Internet Explorer 7

Media Query Hacks

@media screen\9 {}

Internet Explorer 7-

@media \0screen\,screen\9 {}

Internet Explorer 8-

@media \0screen {}

Internet Explorer 8

@media screen and (min-width:0\0) {}

Internet Explorer 10+
safari 4
android 2.3+

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

Internet Explorer 10

Everything but Internet Explorer and Safari

@media screen { @media (min-width: 0px) {} }

Internet Explorer *
safari *

Conditional comments

<!--[if IE]> Internet Explorer <![endif]-->

Internet Explorer *

Not Internet Explorer

<![if !IE]> Not Internet Explorer <![endif]>

Internet Explorer *

<!--[if IE X]> Internet Explorer X <![endif]-->

Internet Explorer 6-9

<!--[if lte IE X]> Internet Explorer X or less <![endif]-->

Internet Explorer 6-9

<!--[if gte IE X]> Internet Explorer X or greater <![endif]-->

Internet Explorer 6-9

<!--[if (IE X)|(IE Y)]> Internet Explorer X or Internet Explorer Y <![endif]-->

Internet Explorer 6-9

<!--[if (gte IE X)&(lte IE Y)]> Internet Explorer between X and Y (included)<![endif]-->

Internet Explorer 6-9

Conditional classes

<!--[if lt IE 7]>  <html class='ie ie6 lte9 lte8 lte7'> <![endif]--> 
<!--[if IE 7]>     <html class='ie ie7 lte9 lte8 lte7'> <![endif]--> 
<!--[if IE 8]>     <html class='ie ie8 lte9 lte8'> <![endif]--> 
<!--[if IE 9]>     <html class='ie ie9 lte9'> <![endif]--> 
<!--[if gt IE 9]>  <html> <![endif]--> 
<!--[if !IE]><!--> <html>             <!--<![endif]-->

Internet Explorer 6-9

Opera

Property/Value Hacks

.selector { (;property: value;); } 
.selector { [;property: value;]; }

chrome 28-
safari 6-
opera 14+

JavaScript Hacks

var isChromium = !!window.chrome;

chrome *
opera 14+
android 4.0.4

Webkit

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

chrome *
safari 3+
opera 14+

var isOpera = /^function \(/.test([].sort);

opera 9.64-

var isOpera = !!window.opera;

opera 12.16-

Replace X by the version

var isOpera = window.opera && window.opera.version() == X;

opera 12-

var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent);

opera *

Selector Hacks

html:first-child .selector {}

opera 9.27-
safari 2

_:-o-prefocus, .selector {}

opera 9.5/10/11/12
Internet Explorer 7

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}

opera 11-

*|html[xmlns*=""] .selector {}

safari 2/3.1
opera 9.25

Media Query Hacks

@media (min-resolution: .001dpcm) { _:-o-prefocus, .selector {} }

opera 12

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}

chrome 29+
opera 16+

Safari

Property/Value Hacks

.selector { (;property: value;); } 
.selector { [;property: value;]; }

chrome 28-
safari 6-
opera 14+

JavaScript Hacks

Webkit

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

chrome *
safari 3+
opera 14+

var isSafari = /a/.__proto__=='//';

safari 5-

var isSafari = /constructor/i.test(window.HTMLElement);

safari *

var isSafari = !!navigator.userAgent.match(/safari/i) && !navigator.userAgent.match(/chrome/i) && typeof document.body.style.webkitFilter !== "undefined";

safari 6

Selector Hacks

html:first-child .selector {}

opera 9.27-
safari 2

html[xmlns*=""] body:last-child .selector {} 
html[xmlns*=""]:root .selector  {}

safari 2-3

*|html[xmlns*=""] .selector {}

safari 2/3.1
opera 9.25

Media Query Hacks

@media screen and (min-width:0\0) {}

Internet Explorer 10+
safari 4
android 2.3+

Everything but Internet Explorer and Safari

@media screen { @media (min-width: 0px) {} }

Internet Explorer *
safari *

Additional informations

Browserhacks is mostly based on the big list of CSS browser hacks by Paul Irish. Other posts like Moving IE specific CSS to media blocks by Keith Clark, Detecting browsers with JS hacks by Gareth Eyes and IE CSS hacks by Nicolas Gallagher greatly helped.

By the way, thanks a lot to Jeff Clayton who helped us with tests. If you'd like to contribute too, please hit us on GitHub.

Browserhacks

What's this?

How to?

Reminder!

Android

JavaScript Hacks

Media Query Hacks

Chrome

Property/Value Hacks

JavaScript Hacks

Media Query Hacks

Firefox

JavaScript Hacks

Selector Hacks

Media Query Hacks

Miscellaneous

Internet Explorer

Property/Value Hacks

JavaScript Hacks

Selector Hacks

Media Query Hacks

Conditional comments

Opera

Property/Value Hacks

JavaScript Hacks

Selector Hacks

Media Query Hacks

Safari

Property/Value Hacks

JavaScript Hacks

Selector Hacks

Media Query Hacks

Additional informations

Further reading