How do I use conditional formatting inside of a CSS style sheet?
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 }
Admin
Updated on June 16, 2022Comments
-
Admin almost 2 years
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 barfor IE 9 (its a fix for thenav barbecause IE 9 doesn't support text-shadows).Is there a way to do this in the CSS style sheet?