CSS Browser-Specific Hacks

What is this?

Browser hacks is an extensive list of browser specific CSS hacks from all over the inter-webs. CSS hacks are needed in order to solve problems caused by different browsers rendering.

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.

 Mozilla

Firefox – Any Firefox browser hack

@-moz-document url-prefix() {
 .selector { Property: Value; }
 }

Media Query Hacks

@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 1280px) {
 .selector { Property: Value; }
 }
ChromeSafari

Google Chrome and Safari CSS hack

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .selector { Property: Value; }
 }

Note :- Safari and Google Chrome are mainly the same, but sometimes behave differently, especially in forms, and fonts rendering.

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
 .selector { Property: Value; }
 }
 Opera

Opera – Opera 10 and above

@media not all and (-webkit-min-device-pixel-ratio:0) {
 .selector { Property: Value; }
 }

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
 .selector { Property: Value; }
 }
 IE

Internet Explorer / Edge IE 9 Hack

:root .selector {
 Property: Value9; color: red9;
 }

Note :-  color: red9; Hack Works on IE9

Conditional comments

<!--[if IE 9]> Internet Explorer 9 <![endif]-->
 <!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
 <!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->

IE 10 only

_:-ms-lang(x), .ie10 { property: value9; }

Internet Explorer 10+, Microsoft Edge Browser

_:-ms-lang(x), .selector { property: value; }

IE 10 and above

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
 }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
}

IE 11 (and above..) 

_:-ms-fullscreen, :root .ie11up { property:value; }

Internet Explorer 11+, Microsoft Edge Browser

/* Put this code in external stylesheet: ie11up.css */ @charset "&lt;Any Modern Browser but MSIE 10- or FF 18- &gt;"; _:-ms-lang(x), .selector { property:value; }

Microsoft Edge Browser 12+ (All) – @supports method

@supports (-ms-ime-align:auto) { .selector { property:value; } }

For more information on CSS browser-specific hacks please visit the following site:  http://browserhacks.com/

Quirks:

Browser hacks, boom boom! — Sean Bullock

Browser hacks – must have for all front-end developers — Mark Szymic

Front-end developers stop the IE drama and use this fine tool — iSands

Author

  • Gourahari Patnaik

    Gourahari Patnaik works as Software Engineer with Trigent Software. He has 6+ years of experience as a UI Developer/Web Developer, building enterprise web applications. He has strong expertise in HTML5 and CSS3, Bootstrap Responsive Web technologies, jQuery and JavaScript. Gourahari also has experience in W3C Validation and Solving Browser and Device and Mobile compatibility issues along with experience in in SASS framework.