IE8 Specific CSS Hack

Software Development
No Comments

Here is a quick hack that could be useful depending upon the context. :root is a pseudo selector that selects the root element on the page. That’s almost always the <html> element. That’s not what’s interesting though. The :root pseudo selector is only supported in IE9 and up, which means you can use it to target browsers less than IE9. Do note that, it only targets less than IE9, so you can’t target IE7 or IE6 specifically. As an example here is a square div that is green in IE9 and up, but is red in IE8 and lower. Test it out with the IE developer tools by changing the browser’s rendering engine.

/* IE8 and Under */
.square {
    height: 5em;
    width: 5em;
    background–color: red;
}
 
/* IE9+ */
:root .square {
    height: 5em;
    width: 5em;
    background–color: green;
}

will style a div like this:

<div class=“square”></div>

Here is a quick demo. Try to toggle IE8 mode in the dev tools and it should switch from green to red.

, ,
Advertisement

No Comments

Name
A name is required.
Email
An email is required.
Site
Invalid URL

No comments yet