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 “<Any Modern Browser but MSIE 10- or FF 18- >”; _:-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;
I hope these hacks help you in fixing bugs on different browsers. But, here’s something that you should always 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.
References
For more information on CSS browser-specific hacks please visit this site: http://browserhacks.com/
For detecting browsers Javascript hacks please visit the following site: http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/