Geek Answers Handbook

How to use conditional formatting inside CSS stylesheet?

I want to use some conditional style for IE 9, but I want to have conditions inside my main stylesheet - do not use the second stylesheet or refer to it on an HTML page. At the moment, I put this code in an HTML page that works because it overwrites other styles in the main stylesheet:

<!--[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 a CSS sheet, so that all this is in one place, and I do not need to repeat the code on each page. I would prefer not to use separate CSS only for IE 9 - I already have one for IE 7-8. I tried this in the stylesheet:

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

The above code is specific to my nav bar for IE 9 (its fix for nav bar because IE 9 does not support text shadows).

Is there a way to do this in the CSS stylesheet?

+6
source share
3 answers

Conditional comments are for HTML only, but you can use them 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 that you can only use to target IE:

 .lt-ie8 .my-style { color: red }
+6
source

This is standardly impossible. IE conditional blocks can only be used on HTML web pages.

However, browser developers have always been funny with their css parsers, including Microsoft. Thus, there is a certain amount of what we call css hacks , which can be used so that some rules are interpreted by some parsers, but not others.

Please do not do this, which can be avoided if possible: the stylesheet will no longer be compatible with w3c, and this is definitely not a “clean” solution (more like dirty workarounds that were common during the dark reign of IE6).

0
source

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

0
source

More articles:


All Articles