SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Is this a safe IE8 hack?

    This seems to be a perfect way to target IE8. Anything I'm overlooking here?

    #onoff li+li+li a {
    float:left; /* Target IE8 */
    margin-right:-14px; /* Target IE8 */
    }
    #onoff li:nth-child(2) a, #onoff li:nth-child(3) a {
    position:absolute; /* Cancel target IE8 */
    z-index:1;
    color:green;
    font-weight:bold;
    margin:0; /* Cancel target IE8 */
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    This seems to be a perfect way to target IE8. Anything I'm overlooking here?

    #onoff li+li+li a {
    float:left; /* Target IE8 */
    margin-right:-14px; /* Target IE8 */
    }
    #onoff li:nth-child(2) a, #onoff li:nth-child(3) a {
    position:absolute; /* Cancel target IE8 */
    z-index:1;
    color:green;
    font-weight:bold;
    margin:0; /* Cancel target IE8 */
    }
    Ie8 doesn't understand the nth-child so you can give rules to other browsers to counteract the ie8 rules set by other means. However, you realise that li + li + li a will select the third list plus any list elements that follow and not just the third like nth-child.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    No I actually did not realize that. But there are only 3 list items anyway so it works in this case. I messed with > and ~ (admittedly not my best known rules) but couldn't seem to target it.

  4. #4
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,246
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I didn't double check to see if that works, but wouldn't IE conditional comment classes be cleaner?

    http://paulirish.com/2008/conditiona...nswer-neither/
    "First make it work. Then make it better."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    I didn't double check to see if that works, but wouldn't IE conditional comment classes be cleaner?

    http://paulirish.com/2008/conditiona...nswer-neither/
    Yes I usually advocate CCs for IE8 but I happen to know that Eric doesn't like them so I sidestepped the issue.

    There is an issue with specificity in using the boiler plate method as you are adding a class to the rule unlike plain old fashioned hacks or separate CCs. In the end it does boil down to preference and as long as you are consistent it doesn't make a lot of difference.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This is true. I haven't used CC's for the last 5 years. Why? They make my code look ugly

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Forgive my ignorance. I've always just used classes and such to target lesser versions of IE. Now that IE8 is as low as I go I have a few more options. Having a little trouble fully understanding this...

    #onoff li a {
    color:green;
    }
    #onoff li+li a {
    color:red;
    }
    #onoff li+li+li a {
    color:green;
    }

    So if I wanted to get this list item color back to green (and target ie8) then I'd have to overwrite the 2nd list item? Then they would all be green from there on out. Anyway to target ie8 without classes? Or any browser for that matter without using li:nth-child(2)?

  8. #8
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,246
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    This is true. I haven't used CC's for the last 5 years. Why? They make my code look ugly
    I'm baffled that you consider your proposed hacks to be less ugly, but... OK.
    "First make it work. Then make it better."

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    I'm baffled that you consider your proposed hacks to be less ugly, but... OK.
    There are plenty of people that don't use CC's. If I'm resourceful enough to get by without them then more power to me. Plus I don't like to maintain two stylesheets.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Forgive my ignorance. I've always just used classes and such to target lesser versions of IE. Now that IE8 is as low as I go I have a few more options. Having a little trouble fully understanding this...

    #onoff li a {
    color:green;
    }
    #onoff li+li a {
    color:red;
    }
    #onoff li+li+li a {
    color:green;
    }

    So if I wanted to get this list item color back to green (and target ie8) then I'd have to overwrite the 2nd list item? Then they would all be green from there on out.
    Yes that's correct you need the extra rule to reset anything that follows.

    Anyway to target ie8 without classes? Or any browser for that matter without using li:nth-child(2)?
    You can use :last-child on the body to give rules to other browsers:

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p.test{background:red}/* ie8 by default*/
    * html p.test{background:green}/* ie6*/
    *+html p.test{background:orange}/* ie7*/
    body:last-child p.test{background:black;color:#fff}/* all good browsers*/
    </style>
    </head>
    
    <body>
    <p class="test">Good browsers are black<br>IE6 is green<br>IE7 is orange<br>IE8 is red</p>
    </body>
    </html>
    There are some other invalid hacks around but some of the ie8 ones hit IE9 as well which is why you have to be careful with hacks.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ahh yes. I just found that one out this morning but didn't put 2 and 2 together. That works well. All three of those work perfect! Any other ones Paul that you know of like the ie6/7 ones that you don't have to overwrite? I know those are more dangerous. But for whatever reason I know that the ie6/7 ones are deamed safe. So any deamed safe ones found yet for ie8 that one doesn't have to overwrite? Thanks

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Oh wait. Would the p then have to be the last child to be targeted?

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    What about body p {red} body:nth-child(1) p {blue}. Without testing I think that would work?

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ahhh...

    "Anyway, I'd like to clear up something about :last-child (and, by
    extension, :first-child). 'body:last-child' means "select any body
    element that is the last child of its parent element". It does NOT
    mean "select the last child element of the body element". To do the
    latter, you'd write 'body > *:last-child'. If you just write 'body
    *:last-child', that would select any element that is the last child
    of another element and is also a descendant of the body element.
    'body > *:last-child' selects any element that's the last child of
    another element and is also a child of the body element, which pretty
    much restricts you to just the body's last child.
    Similarly, 'body:first-child' would select any body element that's
    the first child of its parent (which is html) -- and since every
    document I've ever seen has at least a head element before the body
    element, 'body:first-child' would fail to find any matches. To do
    your own translations of selectors like this, check out the
    SelectORacle at <http://gallery.theopalgroup.com/selectoracle/>.
    Anyway, this could be (and apparently is being) used as a CSS hack
    to feed "advanced" CSS to browsers that understand :last-child, in a
    manner very much similar to the 'html>body' hack. Whether that's
    actually a good idea probably depends on your opinion of CSS hacks in
    general."

    --
    Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
    "CSS is much too interesting and elegant to be not taken seriously."
    -- Martina Kosloff (http://mako4css.com/)

  15. #15
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,246
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Plus I don't like to maintain two stylesheets.
    I think you misunderstood the way it was suggested to use CCs. You won't need two stylesheets. Just one normal stylesheet, except that you can use an ".ie8" class selector.
    "First make it work. Then make it better."

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    I think you misunderstood the way it was suggested to use CCs. You won't need two stylesheets. Just one normal stylesheet, except that you can use an ".ie8" class selector.
    Please show me how you mean?

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is a cool one I just thought of...

    <!doctype html><html><head><meta charset="utf-8">
    <title>Testing | http://www.visibilityinherit.com/</title>
    <style>
    #test {color:red}
    :not(ie8) #test {color:blue}
    </style>
    </head>

    <body>
    <p id="test">test</p>
    </body>
    </html>

  18. #18
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,246
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Please show me how you mean?
    The article I linked to earlier has the full details, but the gist is...

    Code HTML4Strict:
    <!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
    <!--[if IE 7]>         <html class="ie7"> <![endif]-->
    <!--[if IE 8]>         <html class="ie8"> <![endif]-->
    <!--[if gt IE 8]><!--> <html>         <!--<![endif]-->

    A conditional comment to set a class on the <html> element, so that anywhere in your CSS, you can write .ie8 selector {}.
    "First make it work. Then make it better."

  19. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ahh yes thank you. Yeah I know that stuff. I wrote 5 other ways to do it to http://www.visibilityinherit.com/code/target-ie.php

  20. #20
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,246
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    But you still consider the CSS from your original post to be cleaner?
    "First make it work. Then make it better."

  21. #21
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If I'm writing it 20 times of course not. Then .ie8 would be better. But I only need (want is more like it) this one little thing. Not worth CCs in all my pages. Removing one or two lines in the css a few years down the road is a lot easier than removing CCs from 1000 pages

  22. #22
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Or...

    <!doctype html><html><head><meta charset="utf-8">
    <title>Testing | http://www.visibilityinherit.com/</title>
    <style>
    #test {color:red}
    :root #test {color:blue}
    </style>
    </head>

    <body>
    <p id="test">test</p>
    </body>
    </html>

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Or...

    <!doctype html><html><head><meta charset="utf-8">
    <title>Testing | http://www.visibilityinherit.com/</title>
    <style>
    #test {color:red}
    :root #test {color:blue}
    </style>
    </head>

    <body>
    <p id="test">test</p>
    </body>
    </html>

    Yes you can basically use any selector that IE8 doesn't understand as long as all the other browsers do understand it

    This one I just made up will target Ie8 and avoid any specificty issues:

    Code:
    p{background:green}/* ie8 but not ie7*/
    #nonexistantID:last-child, p{background:blue}
    The reason it works is that a browser is required to drop out of the comma separated list the moment it doesn't understand a selector. Ie8 sees the :last-child and doesn't understand it and so drops the whole comma separated list of values.

    IE7 and under however still read the whole list even though they shouldn't.

  24. #24
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool. What about propriety or vender specific css. Like zoom, and -ms- and etc, that IE8 uses but dropped since IE9?

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Cool. What about propriety or vender specific css. Like zoom, and -ms- and etc, that IE8 uses but dropped since IE9?
    I don't think there are any others. All the rest are invalid character hacks that are best avoided as they can hit ie9 in some cases.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •