Browser-specific CSS Hacks

Jamie Johnson, with thanks to Rachel Donovan, Neal Grosskopf and Webmonkey

March 10, 2016

Sometimes when writing CSS, one needs it to only work in a particular browser. I've written about some of these before with Firefox and Internet Explorer, but there are additional browser-specific CSS hacks.

Internet Explorer

One can use IE conditional statements or what I call "starmasking," both mentioned in my article Pesky Internet Explorer, but there is more one can do with IE.

Internet Explorer Conditional Statements

Here's IE conditional statements, which work in versions prior to IE10:

<!--[if IE]>
<style type="text/css">
h2#iestinx {
     display: block;
}
</style> <![endif]-->

Internet Explorer 6

You can specify IE6 with IE conditional statements:

<!--[if IE 6]>
	...
<![endif]-->

According to Rachel Donovan's blog a work in progress in the entry CSS browser hacks, the following syntax allows one to granuarly specify CSS rules for IE6:

#content {
color: #fff;
_color: #ccc; /* shows in ie6 only */
}

Internet Explorer 7:

Use IE conditional statements:

<!--[if IE 7]>
	...
<![endif]-->

Or use what I call "starmasking":

h2#iestinx {
     display: none;
     *display: block; /* this rule is applied to IE7 */
}

Rachel Donovan shares on CSS browser hacks | a work in progress the following syntax to allow one to granuarly specify CSS rules for IE7:

#content {
color: #fff;
//color: #999; /* shows in ie7 only */
}

Other versions

You want greater than IE7, which would work for IE8 and 9? Do this:

<!--[if gt IE 7]>
	...
<![endif]-->

You want greater than or equal to IE7, which would work for IE7, 8 and 9? Do this:

<!--[if gte IE 7]>
	...
<![endif]-->

You want less than IE9, which would work for IE8 and below? Do this:

<!--[if lt IE 9]>
	...
<![endif]-->

You want less than or equal to IE9, which would work for IE9 and below? Do this:

<!--[if lte IE 9]>
	...
<![endif]-->

Firefox

Firefox 1.5 and 2

According to Browser-Specific CSS Hacks - Webmonkey, the following can be used to target Firefox 1.5 and 2:

body:empty #my-id {
	/* Firefox-specific rules go here */
}

All versions

As mentioned in my article Firefox Exception?, here is the hack for a Firefox-only rule:

@-moz-document url-prefix() { 
       selector { property: value; }
}

Safari

Safari 1 and 2

Much thanks to Browser-Specific CSS Hacks - Webmonkey, it is documented that Safari 1 and 2 fail to execute rules that have a hash (#) appended to the end of the rule. So, it is similar to what I call "starmasking" for IE, but is a NOT execute:

#my-id { color:red; } /* This executes for everyone, including Safari 1 and 2 */
#my-id { color:black;# } /* This executes for everyone, EXCEPT Safari 1 and 2 */

That crude implementation is one of many reasons to use these hacks sparingly!

Safari 4

I cannot recall where I found this one, but I executed it a while back for Safari for iOS on an iPhone 6:

@media screen and (-webkit-min-device-pixel-ratio:0) {
	display: inline-block; 
}

The downside is it affects Chrome and according to Browser-Specific CSS Hacks - Webmonkey, also Opera 9+.

Chrome

The Safari 4 hack above works for Chrome. They are both using webkit. Just remember that using it affects not only Chrome, but Safari 4 versions and Opera 9+.

Opera

Speaking of Opera, much thanks to Neal Grosskopf for this Opera hack:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	head~body #opera { display: block; }
}

Neal Grosskopf also has a nice summary of various browser-specific CSS hacks.

All Browsers

Use the hacks sparingly. As one can see, some hacks only work for some versions of even a particular browser. The means that one day a browser may update and the hacks no longer work for the latest version. So again, use the hacks sparingly.

tech @ Beacon Deacon