SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    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 Paul O'B View Post
    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.
    Hey Paul thats a good one! So they all read the second one except IE8. But how do you mean "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." If that were the case then Modern browsers as well should only read the first rule yeah? But they don't they see the 2nd

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Hey Paul thats a good one! So they all read the second one except IE8. But how do you mean "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." If that were the case then Modern browsers as well should only read the first rule yeah? But they don't they see the 2nd
    Hi Eric,

    All browsers see this first rule of course:

    p{background:green}/* all browsers*/

    But then the next rule is seen by all except IE8:

    #nonexistantID:last-child, p{background:blue}

    All browsers that understand :last-child will read all the rules in that comma separated list.

    The first id "#nonexistantID:last-child" doesn't actually exists but that doesn't matter because a stylesheet is full of rules that don't exist in a page. It's a valid rule just like:
    #test, #test2, #test3 {} etc...

    IE8 reads the first id selector and sees :last-child and says "oh oh" I'm out of my depth here I can't reliably parse this section of code " and drops the whole comma separated list and moves onto the next separate rule in the stylesheet.

    It's just the same technique as body:last-child p except that there is no extra specificity added. In my rule both ie8 and all other browsers have the same specificity because they only see "p{}".

    As an aside authors should take care not to group advanced selectors in a comma separated list because if a browser fails on one of the selectors it will drop the whole lot so its best to keep your pseudo classes on separate rules unless you are 100% sure of the support.

  3. #28
    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 it's a way of adding last-child without the additional specificity of adding it to the body.

  4. #29
    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)
    I've got six ways to hack ie6-9 shown thus far. Know anymore good ones? http://goo.gl/Kcr8q

  5. #30
    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 another good one to target ie8. Ie8 should abort once it hits the two ids as it thinks its ilegal. Apparently it's not. Untested

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

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


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
  •