Discussion for The "Triple-X hack"

Before you ask specific technical questions, please read or search through the existing comments, and any available documentation, to see if your question has already been answered.

You can also subscribe to this discussion (RSS 2.0)

  1. # Why not conditional comments?

    Posted by brothercake on 2006-02-14 at 20:40:25 (GMT)

    I've been asked this a few times, and it's basically because:

    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 (surprised) 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.

  2. # RE: The "Triple-X hack"

    Posted by bukaJ on 2006-03-07 at 23:08:48 (GMT)

    Error:
    Your third "Skipcode example" has bad href -> #fig2-after (must be #fig3-after), but not?

  3. # RE: The "Triple-X hack"

    Posted by brothercake on 2006-03-17 at 21:30:12 (GMT)

    Thanks for the head's up - now fixed (smile)

  4. # RE: The "Triple-X hack"

    Posted by Chris Eilers on 2006-03-27 at 04:58:56 (GMT)

    Thanks for this. An IE7-specific hack will be a necessity for my site, unless IE7Beta2's behaviour changes substantially before its final release.

    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".

  5. # RE: The "Triple-X hack"

    Posted by Chris Eilers on 2006-03-27 at 05:04:47 (GMT)

    Woops. [class$='test-22'] in my previous comment should read [class$='test'].

  6. # RE: The "Triple-X hack"

    Posted by brothercake on 2006-04-04 at 15:03:36 (GMT)

    Thanks for this info, that's most useful.

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

  7. # RE: The "Triple-X hack"

    Posted by patrick h. lauke on 2006-05-03 at 00:10:18 (GMT)

    you're missing a picture of vin diesel to round this hack off ;)

  8. # RE: The "Triple-X hack"

    Posted by David Hammond on 2006-05-27 at 18:36:30 (GMT)

    This hack is overly complicated. All you need to target IE7 is *+html{} which works like * html{} in previous versions. *+html works in IE7 (possibly higher versions as well) and nothing else as far as I can tell. Plus it's valid CSS 2.

  9. # RE: The "Triple-X hack"

    Posted by Philippe on 2006-07-02 at 13:25:32 (GMT)

    You are excluding iCab 3.0 with your [xxx] filter. iCab doesn't support the :not() pseudo-class. I've been playing with :lang() and :root() to filter out IE 7.

  10. # RE: The "Triple-X hack"

    Posted by Marcus on 2006-07-10 at 14:39:20 (GMT)

    Just one question....what's the point in not using conditional comments if the css you're going to use doesn't pass validation because of all the hacks?

  11. # RE: The "Triple-X hack"

    Posted by brothercake on 2006-07-11 at 15:22:56 (GMT)

    @David Yours is definitely cleaner, for sure, but it does have some browser problems. As it is, it also applies to Mac/IE5, Win/IE5.0 and Opera 5 and 6.

    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 (smile) 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.

  12. # RE: The "Triple-X hack"

    Posted by Peter Stagg on 2006-07-20 at 04:40:50 (GMT)

    FYI
    IE& no longer recognises the following construct, previously only recognised by IE6, so you can hide code form IE7 that's targeted at IE6 using this:

    * html{
    }

    or

    * html #my_id {
    }

    etc.

  13. # RE: The "Triple-X hack"

    Posted by Gary Lake on 2006-09-19 at 14:37:58 (GMT)

    Some help if you will guys...

    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)

  14. # RE: The "Triple-X hack"

    Posted by Richard Rutter on 2006-09-20 at 08:27:23 (GMT)

    Hi James - I stumbled across this hack when searching for an Opera 9 specific hack (which you have a potential solution for here - excellent!). But in terms of targetting IE7 specifically, surely the IE-specific conditional comments are the most relaibel way of doing so?

    <!--[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.

  15. # RE: The "Triple-X hack"

    Posted by Gary Lake on 2006-09-20 at 09:02:45 (GMT)

    Rich,

    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...

  16. # RE: The "Triple-X hack"

    Posted by Gary Lake on 2006-09-20 at 09:05:59 (GMT)

    That last line should be:

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

  17. # RE: The "Triple-X hack"

    Posted by Henry Hughes on 2006-11-11 at 12:42:34 (GMT)

    Gary, did you ever find your answer to this?

    Got the same problem.

  18. # RE: The "Triple-X hack"

    Posted by anon on 2006-11-24 at 09:29:20 (GMT)

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

    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.

  19. # RE: The "Triple-X hack"

    Posted by Subbu on 2006-11-30 at 18:27:23 (GMT)

    @gary: Solution is here

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

This discussion is now closed

Discussions are usually kept open until they start getting spammed, which in practice seems to be about 2-3 weeks (eek!)

Get the files

BSD License → Terms of use

Categories...

Notes from the field

Philosophical musings on the web and its industries:

Ideas and prototypes

Some nebulous thoughts and unfinished projects:

Browsers and devices

Web development tips and information for specific devices:

Random rants

Just a little something that was on my mind!

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.

In this area

Main areas

[brothercake] a round peg in a square hole, that still fits