Grow your CSS skills. Land your dream job.

Is :root a completely safe hack for IE8 and modern browsers?

  • # March 1, 2013 at 11:22 am

    #home .column {
    margin-right:5px; /* IE8 */
    }
    :root #home .column {
    margin-right:8px; /* Modern */
    }

    Any browsers or situations that I or others have not thought of?

    To me it seems perfectly safe. Much like *html for IE6 was.

    Only difference here is order matters as your not just feeding a single browsers a rule – your overwriting the previous. Now I’m using this 3 times in my sheet. And I forsee a few more. So just double checking. If its not totally safe I’ll just do the class on the html for ie.

    # March 1, 2013 at 11:33 am

    I’m confused…why do you need different margins for IE8?

    # March 1, 2013 at 11:44 am

    That wasn’t really my question. I could of put any rule in there. But if you must know. The margin is dif because I fed :nth-of-type(3) to the column. IE needed dif solution.

    # March 1, 2013 at 11:49 am

    Opps. Wrong credentials.

    That wasn’t really my question. I could of put any rule in there. But if you must know. The margin is dif because I fed :nth-of-type(3) to the column. IE needed dif solution.

    # March 1, 2013 at 12:09 pm

    Looks like it should work…

    :root by itself will apply to the HTML as the base ‘element’.

    I confess I’m not sure as to cross-browser support.

    # March 1, 2013 at 12:11 pm

    Ya ie9 reads :root. IE8 will never read :root so it seems full proof. Just posting here to see if you guys could see something I missed.

    # March 1, 2013 at 3:04 pm

    We have a variant of it at http://browserhacks.com:

    :root * > .selector {}

    Your way seems simpler. I’ll have to run some tests.

    If you want to target everything but IE 6/7/8 you can also go with one of the following:

    @media screen and (min-width: 400px) {}
    body:last-child .selector {}
    body:nth-of-type(1) .selector {}
    body:first-of-type .selector {}

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".