CSS: IE and Firefox Hacks

IE Hacks

.hello {
text-align: center;
background-color: #FF0000;
*background-color: #00FF00;
_background-color: #0000FF;
}

If you are familiar with CSS you'll understand all of the syntax except
for the "*" and "_" in front of the background-color properties. What
do they do?

The CSS specs say that browsers should read any
property names they know about and ignore any property names they don't
know about. In the above CSS the spec compliant browsers know about a
property named "background-color" but don't know about properties named
"*background-color" and "_background-color".

To cut a long story
short, the Internet Explorer CSS parser is overly aggressive at trying
to discover the names of properties and will in fact ignore leading
non-alphanumeric characters. From my testing this appears to be the
case from at least IE5 onwards.

It became convention amongst web
developers to used an underscore in front of property names when
targeting CSS for IE, although any non-alphanumeric character will
work. However, the CSS 2.1 spec made underscore a valid character in a
property name, so IE7 specifically removed underscore from their
aggressive parsing. From IE7 onwards web developers have been using an
asterisk instead of an underscore when targeting CSS at IE, although
any non-alphanumeric character will do. Interestingly, the removal of
the underscore hack in IE7 allows you to target CSS at pre-IE7 (using
underscore) and post-IE7 (using asterisk or some other non-alphanumeric
character) browsers.

So with this background knowledge here is how the above CSS would be interpreted by different browsers:

* Firefox, Opera, Safari and all non-IE browsers would correctly parse "background-color", fail to parse "*background-color" and "_background-color", and will set the background color of the div with class "hello" to red.
* IE6 and earlier versions of IE will successfully parse "background-color", "*background-color" and "_background-color". The background color value will come from the last successfully parsed property, so the background color of the div with class "hello" will be set to blue.
* IE7 and later versions of IE will successfully parse "background-color", "*background-color" but fail to parse "_background-color". The background color value will come from the last successfully parsed property, so the background color of the div with class "hello" will be set to green.

One final note on this IE leading non-alphanumeric character hack: It is invalid CSS so the strictest parsers will give you an error.

Firefox CSS Hacks

There are plenty of CSS hacks for IE, but what about Firefox?

I've found one hack that allows you to target Firefox 2 or Firefox 3, but some versions of IE also pick up the CSS intended for Firefox. Extending our CSS file above:

.hello {
text-align: center;
background-color: #FF0000;
*background-color: #00FF00;
_background-color: #0000FF;
}

/* Target Firefox 3 */
.hello, x:-moz-any-link, x:default {
background-color: #FFFFFF;
}

/* Target Firefox 2 */
.hello, x:-moz-any-link {
background-color: #FF00FF;
}

In Firefox 2 the background color of the div with class "hello" will be
pink, but strangely it will also be pink in IE5 and IE7 (they will pick
up the last CSS property intended for Firefox), and blue in IE5.5 and
IE6 (they don't pick up the CSS intended for Firefox).

If you find any Firefox CSS hacks that will only be applied to Firefox please let me know.

REF: http://robertmaldon.blogspot.com/2008/03/css-tricks-that-target-specific.html