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

[Eric]

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

[Paulie_D]

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

[PicnicTutorials]

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.

[Paulie_D]

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.

[Kitty Giraudel]

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 {}

[Author]

Posts