Menu
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?
727
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 }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
