#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    125
    Rep Power
    11

    Lightbulb new hack: IE double dot (and comment) hack


    when reading an identifier in CSS IE will treat two dots in a class decleration as one:

    accepted rules (strict mode):
    Code:
    win ie 5.01: p..class, p./**/.class
    win ie 5.5 : p..class
    win ie 6   : p..class, p./**/.class, p./**/class, p/**/.class
    win ff 1.5 : p./**/class, p/**/.class (comments ignored)
    win opera  : (as firefox)
    win ns 7.0 : none!
  2. #2
  3. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    22

    Interesting!


    I find this post very interesting. You know, ..class might not work in IE7, but it's interesting that, due to incomplete multiclass support, IE5-IE6 versions do. The comment hacks are most amusing of all, because I thought the standard said that comments were not to be embedded in selectors... or am I way off base with that one?
    Like my answer? Click on the Scale Icon at the top of this box and give me some more rep points!

    Brian J. Fink
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    125
    Rep Power
    11
    i'm not 100% on the rules but if i were programming the parse code i would start by simply stripping all comments, i.e. anything between and including the /* and */ so no matter where they were placed in the file they would vanish. judging by just how sensitive the different versions of IE are to comment hacks one wanders wether or not the msie coders know anything at all about regular expressions? :-)


    www.cyclomedia.co.uk - ASP, CSS and AJAX demos, examples and tutorials with source code
  6. #4
  7. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    830
    Rep Power
    81
    Originally Posted by csshacker
    I find this post very interesting. You know, ..class might not work in IE7, but it's interesting that, due to incomplete multiclass support, IE5-IE6 versions do. The comment hacks are most amusing of all, because I thought the standard said that comments were not to be embedded in selectors... or am I way off base with that one?
    The specs say that you can't nest comments, which the example above doesn't appear to do, so I guess it's legal.

    Excuse my ignorance, but what are the benefits of applying these 'hacks'?
    We are troll foldy-rolls and we'll eat you for our supper.
  8. #5
  9. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    25
    Well lets say that you need a different padding in IE and Firefox. You could then do a hack such as:

    .class {
    padding: 0px;
    _padding: 10px /*for IE */
    }

    There are various other methods of hacking.

    * html .class { /* would only work in IE */
    blah
    }
  10. #6
  11. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    830
    Rep Power
    81
    Would it be more beneficial (read: more correct) to serve up different CSS to each browser using server side scripting?

    I know 'hacks' are easier to implement - but it's not always what's easiest...
    We are troll foldy-rolls and we'll eat you for our supper.
  12. #7
  13. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    25
    You *should* be using conditionals to serve up your CSS.
    I still hack the odd existing client site but all new projects or extensive overhauls use a separate standards.css and explorer.css

    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

    Comments on this post

    • Grafmix agrees
  14. #8
  15. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    830
    Rep Power
    81
    I just read a good article on conditional comments, and I conclude that the gyst is to serve up CSS using a conditional if there are no other straight solutions?

    I'm not a great fan of the idea of using CSS hacks to be honest...
    We are troll foldy-rolls and we'll eat you for our supper.
  16. #9
  17. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    22
    Originally Posted by Grafmix
    I just read a good article on conditional comments, and I conclude that the gyst is to serve up CSS using a conditional if there are no other straight solutions?

    I'm not a great fan of the idea of using CSS hacks to be honest...
    CSS hacks usually have a very short shelf life, because they're largely based on either bugs or experimental implementation by certain browsers. As all browsers move closer to the standards, many of these hacks will begin to be rendered by all browsers, and others will stop being parsed altogether. But hacks are still a simple way to patch layout for different browsers, if you don't have access to server-side programming and you are used to coding static pages.
    Like my answer? Click on the Scale Icon at the top of this box and give me some more rep points!

    Brian J. Fink
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    125
    Rep Power
    11

    Smile


    my theory is that, if a hack is non-standard (i.e. illegal under w3c) then it's unlikely to crop up again in future browsers and can be used for backwards compatibility. there are many solutions to the ie5 box model problem, and i just happen to like mine best (at my site)...

    anyway, the occasional "new CSS hack found" post i make in this forum is really for informative purposes, i'll never use these particular double-dot hacks because i see no need for them in the work i do, i just thought others might also find them interesting (and probably pointless) too!

    :-)

    www.cyclomedia.co.uk - ASP, CSS and AJAX demos, examples and tutorials with source code

    Comments on this post

    • ralphuk100 agrees : Exactly. You code your CSS to work to standards and then add hacks for naughty browsers.
  20. #11
  21. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    22
    If ..class works, does .class. and ...class, etc.?

    BTW, just a note here... many people have been incorrectly embedding conditional tags inside style tags... this leads to rendering of unwanted style rules in other browsers... The correct thing to do is to define a style tag just for IE, then put the conditional tags around it.
    Like my answer? Click on the Scale Icon at the top of this box and give me some more rep points!

    Brian J. Fink
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    125
    Rep Power
    11
    yup:

    Code:
    p..class     all IE
    p...class    all IE
    p.class.     IE5.x only

IMN logo majestic logo threadwatch logo seochat tools logo