Forums

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.

Eric

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.

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.

Eric

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.

HugoGiraudel

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

treehouse : what would you like to learn today?

Forums

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