How do I use conditional formatting inside of a CSS style sheet?

Question

I am looking to use some conditional styling for IE 9 - but I want to have the conditions inside my main style sheet - not using a second style sheet or referencing it in the HTML page. At the moment, I am putting this code in the HTML page, which works because it overwrites the other styles in the main style sheet:

<!--[if IE 9]>
<style>
nav li a:hover {
    text-decoration: underline;
    color: black;
}
nav .four a:hover{
    color:white;
}
</style>
<![endif]-->

But I would like to have these conditions in the CSS sheet, so that its all located in one place and I don't have to repeat the code in every page. I would also rather avoid having a separate CSS just for IE 9 - I already have one for IE 7-8. I tried this in the style sheet:

<!--[if IE 9]>

nav li a:hover {
    text-decoration: underline;
    color: black;
}
nav .four a:hover{
    color:white;
}
<![endif]-->

The above code is specific for my nav bar for IE 9 (its a fix for the nav bar because IE 9 doesn't support text-shadows).

Is there a way to do this in the CSS style sheet?

cimmanon · Accepted Answer · 2012-11-16 04:11:24Z

6

Conditional Comments are only for HTML, but you can take advantage of it in your CSS. HTML5Boilerplate does this by adding a class to the html element (https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

This gives you a hook you can use for targeting IE only:

.lt-ie8 .my-style { color: red }

answered Nov 16, 2012 at 4:11

cimmanon

68.6k17 gold badges169 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brenton Gibbons Over a year ago

Thanks, this has worked. Will def start using boilerplate more often for future projects!

Maël Nison · Accepted Answer · 2012-11-16 04:20:16Z

0

That's standardly impossible. Conditional blocks in IE can only be used in HTML web pages.

However, the browser vendors have always been funny with their css parsers, including Microsoft. So there is some number of what we call css hacks which can be used to have some rules interpreted by some parsers but not by others.

Please not that it's something which should be avoided if possible : the stylesheet will not be w3c compliant anymore, and it is definitely not a 'clean' solution (more like the dirty legacy workarounds which were commons during IE6's dark reign).

edited Nov 16, 2012 at 4:20

answered Nov 16, 2012 at 3:58

Maël Nison

7,3927 gold badges49 silver badges81 bronze badges

2 Comments

Maël Nison Over a year ago

Oops. Well, at least it's not like this mislinking ! Thanks

Nathan Over a year ago

Haha, yikes! I practically feel the awkwardness oozing from that bug report.

Eric · Accepted Answer · 2012-11-16 04:56:17Z

0

Here are all the ways to do what your asking. Number 6 is prob what your after. Just change the 9 to 11. http://www.visibilityinherit.com/code/target-ie.php

answered Nov 16, 2012 at 4:56

Eric

4491 gold badge3 silver badges8 bronze badges

Collectives™ on Stack Overflow

How do I use conditional formatting inside of a CSS style sheet?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related