<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->

  1. What does <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> this and other similar IE code lines mean in an HTML5 document?

  2. If I have to make certain css features compatible to IE8 or lower version, does above mentioned code line or html class as mentioned within it helps?

  3. If #2 answer is 'No', then should I use conditional IE stylesheet as mentioned in this article -- http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

  4. If #3 answer is also 'No', then what should be done to make css features compatible in older IE versions. Any reference website / demo would be a great help!

  1. This is a conditional IE statement. They are only read by IE. Any other browser will read them as any normal comment, note the <!-- and --> at the beginning and end of the statement respectively. IE has special code that recognizes this comment and uses whats inside the comment as regular HTML. In specific to your pasted code above, the IE conditional statement is applying a class of ie6 to the HTML tag. In this way you can provide IE only fall backs for certain elements by first referencing that class in your css selector. For example .ie6 #header {} will only apply to the header if the IE6 class is present, and that class will only be present in IE6 because of the conditional statement.

  2. Following the same style as above, you would use this bit of code: <!-- [if IE 8]><html class="ie ie8" lang="en"><![endif]-->

  3. You could use an IE stylesheet if you so choose, either way you would achieve essentially the same result. I personally would use the above method with the class on the HTML tag, and then a separate css file that is loaded normally called ie.css. Inside this file, you would have nothing but IE styles. Note that with this method the stylesheet does not need to be setup in a conditional IE statement. It's only real purpose in being a separated stylesheet is for organizational purposes. I would also only do this if you have a moderate to large amount of IE conditional code. If you have minimal IE fall-back code, simply include the code next to your the code it is fixing inside your master stylesheet.

  4. You can also expand IE support to a certain extent using things like Modernizr and Selectivizr

All the examples you've discussed in the question are aimed at detecting whether the browser is IE (and the IE version), and then trying to deal with it from there.

Please note that this is not considered best practice.

If you need to handle browser differences and missing features, then the best way of dealing with it is to use a technique called feature detection, rather than browser detection.

What I recommend is to look up a library called Modernizr. This is almost certainly a better starting point for what you're trying to do than any of the ideas in your question.

For fixing specific browser features, The Modernizr team also provides a list of additional libraries called "polyfills". Work out which features you need to support, and look through the list to find a polyfill script that does what you need. Some of them are best loaded via Modernizr; others can be run on their own.

I'd avoid doing any browser or version detection, unless it's absolutely a last resort.

One thing to bear in mind when using polyfills: There are a lot of browser features that are missing in older IE versions. There are also polyfill scripts that will help you implement the majority of them. However, please don't think that you can simply include every single polyfill and turn old IE versions into a more modern browser.

The simple fact is that old IE versions are old and slow. Adding polyfills will make them slower. You should carefully consider each feature, and decide whether it's really necessary to polyfill it. Will the site still be usable without it? In many cases you will be better off simply letting old browsers work without certain features.

As @FDL pointed out, use a conditional stylesheet if you've got a moderate amount of styles to apply various versions of IE.

For minimal positioning tweaks, I use html classes (like ie8 or ie9) and just drop the modifications into my master stylesheet.

For example:

.filter-bar .item { float: left; vertical-align: top; }
.ie8 .filter-bar .item { position: relative; top: 2px; } /* fix a gap in IE8 */

1) It means if you have Internet Explorer version 7 and below, include this class inside the html tag

2) Yes, you can have css like this:

html.ie.ie6 .someClass {
 color: red;

This will only get applied if IE is version 7 and below

3) You can do that too. Sometimes you need to combine both

4) N/A

  • You can do <!--[if IE 8]><link rel="stylsheet" href="path/to/ie8onlystyle.css" /><![endif]--> - those wrapper tags are IE only conditional statement tags, all other browsers ingore them (since they are just HTML comments really).
  • I tried creating a IE8 specific css attribute to one of my class in my master stylesheet but no output reflected in IE8 browser. Not sure if I did anything wrong, can you please create a fiddle to demonstrate like you said .ie6 #header {} in #1. BTW, well described and good to know the difference between conditional class and stylesheet for IE and their usage, thanks!
  • great to know about modernizr and polyfills including feature and browser detection. I've read these terms many often but read them at right place here took me more closer of them. Well, I've mainly used separate stylesheet for IE so far. But now want to use more appropriate way the feature detection, is there any tutorial demonstrating mordnizer or polyfills in real time usage that will just help me. Thanks for your description and highlighting basics of each!
  • Modernizr has good documentation on their site. As for the polyfill scripts, well they're all unique; there isn't a single set of instructions; you'd have to read the docs for whichever ones you wanted to use. But the best polyfills are pretty simple to use; for good ones it tends to be just a case of add the script to your site, and that's it; the missing feature(s) start working in old browsers, end of problem. Some are more complex though; it depends on the feature they're emulating as much as on the polyfill itself.
  • That selector is a bit much. I think it can easily be simplified (and be more perormant) by changing it to .ie6 .someClass