Browser specific hacks for Frontend developers

If you are a web developer then it’s unlikely that you haven’t faced this situation-You spent days and weeks writing perfect code. Everything is perfect from the CSS stylesheet to the meta tags. You test it in Google Chrome and it works perfectly fine. You go home and sleep in peace. But when you come back to the office the next day, everything is broken and you find a hundred bugs allocated in your name.

 

Culprit? Internet Explorer.

And, Mozilla Firefox.

And, Opera.

Happens to all of us, right?

So, is there a way out of this mess? Well, there isn’t. At least not a full proof one. 100% cross-browser compatibility is a myth. It’s almost impossible to write a code which works perfectly fine in all the internet browsers. It comes with experience and you need a lot of patience to learn that craft.

But you can always start small. I learned some browser specific hacks during my journey and I thought it’s a good idea to share them with fellow developers.

Implementation

It is as simple as you write your simple CSS code, just 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 that you’ve targeted!

Google Chrome and Safari Browsers

Google Chrome and Safari browsers are mainly the same as they both use WebKit, but sometimes they behave differently in the case of forms, fonts etc.

Css hacks

@media screen 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 {}

}

Javascript hacks

var isChrome = !!window.chrome && !!window.chrome.webstore; // for Google chrome

var isWebkit = ‘WebkitAppearance’ in document.documentElement.style; // for Chrome and Safari

Firefox (any version)

Css hacks

@-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; }

}

Javascript hacks

var isFF = ‘MozAppearance’ in document.documentElement.style;

Opera – Opera 10 and above

Css hacks

@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;

}

}

Javascript hacks

var isOpera = window.opera && window.opera.version() == X;  //replace x y the version

Internet Explorer

Css hacks

:root .selector {

Property: Value\9; color: red\9;

}

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]—>

For example:

<!–[if IE 9]>

<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />

<![endif]–>

IE 10 and above

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

@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; }//Works for IE 11 and above

*::-ms-backdrop, :root .selector { property:value; }//Works for IE 11

IE 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; }

Javascript hacks

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

var isIE = window.navigator.msPointerEnabled;

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