CSS Hacks, Tricks and Proprietary Extensions

Below is a list of CSS hacks that can be used to filter out different browsers in cases when standard CSS does not work or the conditional comments of IE cannot be applied.

Internet Explorer 6

* html .elementOrClassName
{	property: value;
}
.elementOrClassName
{	_property: value;
}

Internet Explorer 7

* + html .elementOrClassName
{	property: value;
}

Internet Explorer 8 in Standards Compliance Mode

.elementOrClassName
{	property /***/: value9;
}

9 is required and the number cannot be different. I suppose that this has something to do with regular expressions.

All versions of Internet Explorer

.elementOrClassName
{	property: value9;
}

9 is required and the number cannot be different. I suppose that this has something to do with regular expressions.

Turn on Image Scaling and Resampling in Internet Explorer

Funny enough, but unlike other browsers, Internet Explorer comes with bicubic interpolation mode turned off, and this is why sometimes images look frayed without an obvious reason. To fix this, you can use the following:

img
{	-ms-interpolation-mode: bicubic;
}

Turn on CSS background-image caching in IE6

To avoid flicker of elements with background images when hovered, you may use the Microsoft-proprietary BackgroundImageCacheExec Command, for example:

$(document).ready(function()
{ if(window.attachEvent) { document.execCommand("BackgroundImageCache", false, true); }
});

Emulate border-color: transparent in Internet Explorer 6

IE6 does not support border-color: transparent, here’s how this can be emulated. First you need to set some exotic border-color value (named or hex), then hide it with the chroma CSS filter of Internet Explorer. Of course you need to use the star hack for IE6:

* html .elementOrClassName
{	border-color: pink;	filter: chroma(color=pink);
}

Goolge Chrome and Apple Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{	.elementOrClassName	{	property: value;	}
}

Mozilla FireFox

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

Tantek Celik’s Box Model Hack for Internet Explorer 5

Rarely used today, but still useful if you care about the wrong box model of IE5.

Opera 7x – 9x

This one should be used very carefully, as it targets older versions of Opera (circa 2005-2007) with CSS properties that already implemented in WebKit browsers.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{	head~body .elementOrClassName	{	property: value;	}
}

Proprietary CSS extensions

Below is a list of vendor-specific CSS extensions, which are valid CSS according to W3C.

Opera (prefixed with -o-)

Mozilla FireFox (prefixed with -moz-)

Internet Explorer 8 and greater (prefixed with -ms-)

WebKit Browsers – Google Chrome, Apple Safari, etc (prefixed with -webkit- or -khtml-)