Menu
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?
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?
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/
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!
371
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.
Following the same style as above, you would use this bit of code: <!-- [if IE 8]><html class="ie ie8" lang="en"><![endif]-->
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.
You can also expand IE support to a certain extent using things like Modernizr and Selectivizr
156
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.
30
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
