1 - they're HTML hacks, and as such, inherently worse than CSS hacks. HTML is content and therefore sacrosanct, but CSS is design and in a sense arbitrary; CSS is the proper place for hacking.

2 - they're not always practical. Sometimes you need a hack that can work inline, within a single stylesheet, without having to have a separate one

3 - I don't like having mutliple stylesheets for devices just because the device wants me to .. if you see what I mean! I find it inconvenient to have to use mutliple stylesheets in order to cater to different browsers.

4 - I just don't wanna encourage proprietary technology; using conditional comments puts more power in Microsoft's web stable, and they already have too much of that :-O But I'd feel the same for any vendor-specific mechanism. The only conditional comments I'd feel like supporting would be a syntax that all vendors agree on - a standard.

It took a bit of experimentation to integrate the triple-X hack into my existing hack structure, so for the sake of anyone else who is faced with the same problem, here�s a combo hack that can be abbreviated as needed. (I have a limited Win-only browser test suite, so don�t know how the combo will behave on Mac systems).

.test { color:red; /* for IE 5.5 */ c\olor:green; /* for IE6 */ }
html>body .test { color:blue; /* for Op6 */ }
head:first-child+body .test { color:gray; /* for IE7 */ }
head:first-child+body [class$='test']:not([class='xxx']) { color:purple; /* for Ff1.5 and NN7.2 */ }
html*.test:not(:empty) { color:orange; /* for NN6.2 */ }
@media all and (min-width:0px) {head:first-child+body .test { color:deeppink; /* for Op8.5 and Op7.5 */ >
@media all and (min-width:0px) {head:first-child+body [class$='test-22'] { color:saddlebrown; /* for Op9 */ >
.dummy-selector-for-opera-6 { /* otherwise the following selector can sometimes break in Op6 */ }

A shorter Op9-specific hack, which works on my WinXP Pro SP2 system, is:
@media all and (min-width:0) {head:first-child+body .test { color:saddlebrown; /* for Op9 */ >

However, I don�t know whether the min-width:0 (no �px�) variation works as an Op9-specific hack on Mac systems, so if anyone is using a Mac, I�d appreciate your advice.

Incidentally, �...to negate the style for Opera 7� in your post should read �...to negate the style for Opera 9�.

btw - you don't really have to think about Opera/OS variations - Opera has a platform-independent core.

I ran a few tests to try to exclude these browsers, and I didn't find a perfect variant, but Test 4 is the best I reckon (I don't think Opera 6 is significant, given that Opera is now at version 9!): http://www.brothercake.com/reference/ie7/starplus-tests.html

They all seem to fly in iCab as well :) Any other browsers that are a problem with this?

@Marcus Possibly none at all, but I don't agree with using non-validating hacks per se - I would never use a hack that abuses CSS or uses illegal syntax, but what we have here is all valid CSS (although the online validator will say it isn't, that's because the online validator defaults to CSS2, and this is CSS3)

But I have to confess that over and above that, I have no problem with things that don't validate because they're proprietary syntax as such, as long as those validation errors are in CSS, not HTML. Bottom line - I don't think CSS validation is very important; but I do think HTML validation is important.

* html{
}

or

* html #my_id {
}

etc.

I'm using suckerfish drop downs (not by choice I may add) and I know that to fix them in IE7 I need to hide the following rule from IE7 only...

#menu li:hover ul
{
left: auto;
}

I figure I can use lines 3 and 4 of the hack to do this but I don't understand how to apply this to my somewhat more complicated examples (compared to just p#id)

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->

This valid HTML, easy to follow, and indisbutably targets only IE7.

If you re-read, you'll see the problem is actually hiding from IE7, not targeting.

In most case you could also provide some styles for IE7 that negate the one's you wish to hide from IE7 but in some cases this won't do.

In my example, I need to hide "left: auto;" from IE7. There's no way of negating this - I simply need to apply this to all browsers except IE...

I simply need to apply this to all browsers except IE7...

Got the same problem.

Not so.. I beleive the problem is laziness - not doing the job properly - You can easily and correctly identify different browsers as Richard Rutter points out (without javascript as well!!) - It is better to have a seperate style sheet for each browser to accomodate it's quirks, and a common style sheet that applies to all. Viola - no 'hacks' needed.

Gary, for the suckerfish menu you can use the following hack:

*+html #menu li:hover ul {
left : 150px; /* IE7 fix */
}

Only IE7 will see this - put it below the code - it should overwrite the previous value. Please remember to change the value to whatever you have configured YOUR menu to ;).

DM.

http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/