*Note: Possibly outdated but i kinda miss those days…
That One Browser That Always Gives You Trouble.
How many times you found yourself trying to understand why, among all the modern browsers in the world, there must always be one that just doesn’t get it right! I know, I know… things can’t always be perfect and you’ve probably started thinking about Internet Explorer until now, but that’s not always the case.
CSS HacksThere are times when, even modern browsers seem to have their differences about how to treat a CSS property. It is a very rare thing, but still, happens! This time may be Opera; next time could be Chrome or Firefox, this one browser that just, will not seem to care about that margin property of yours.
So, how are you going to fix this? You have, somehow, to be able to target each and every one of those browsers alone. Well, the solution to your problems is known as “CSS Hacks”. Of course, in this world there is always a catch, so let’s take it from the top.
Targeting & Filtering.
The logic of CSS hacks is based on two different ways of processing. You can either “target” a specific browser, in order to apply the change only to that, or “filter” a group of browsers, in order to apply the change to them, leaving one specific browser out.
The following examples are only a small part of the existent hacks and not all of them are validated as CSS.
1. Target Firefox Only.
/*Target all versions of Firefox*/
@-moz-document url-prefix(){.yourclass{ yourproperty:value; }}
/*Target all versions of Firefox & Gecko*/
*>.yourclass { yourproperty:value;}
/*Target Firefox 1.5 and newer*/
.youclass, x:-moz-any-link, x:only-child { yourproperty:value; }
2. Target Chrome & Safari.
/*Target webkit browsers - All versions of Chrome & Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0) {.yourclass{ yourproperty:value; }}
/*or*/
html:lang(en)>body .yourclass{ yourproperty:value; }
3. Target Opera Only.
/*Target Opera 10 and newer*/
@media not all and (-webkit-min-device-pixel-ratio:0) { .yourclass{ yourproperty:value; }}
/*or*/
noindex:-o-prefocus, #yourid { yourproperty:value; }
/*Target Opera 9 and older*/
html:first-child #yourid { yourproperty:value; }
Although the older versions of Internet Explorer don’t fall into the “modern browser” category, here are some well-known ways to target those old versions.
4. Target IE 5.5, 6 Or 7
/*Target several IE versions*/
#yourid
{
*property: value; /*IE 7*/
_property: value; /*IE 6*/
property/: value; /*IE 5.5*/
}
Proceed With Caution!
Unfortunately, even if all of the above “solutions” work as expected today, there is no assurance on how they will behave in the future. In general, try to avoid the usage of similar hacks, as they are based in constantly updating standards.
For example, here is a hack that was meant to work only with Safari 3 and Chrome:
body:nth-of-type(1) .yourclass{ yourproperty:value; }
This is now valid for all modern browsers… nice!
So, every time you are about to hack your way through your CSS code, you must make sure that you’ve already checked for every possible, valid solution. Think it over and try not to mess things up by adding more complicated or “unstable” code into your style sheet.
In case you can’t avoid them, at least try to minify the hacks needed, by targeting as fewer browsers as possible. Finally, always remember that it is safer to hack an older/dead browser than a modern/live one!
