How to detect different IE version? – Conditional Comments

Many times, our pretty CSS alignment or layout is working in Firefox, Opera or Chrome browser, but it failed to interpret correctly in Internet Explorer either in version 5.5, 6 or even 7. This is because Internet Explorer did not follow CSS standard and come out their own Microsoft standard.

We have to use some techniques called CSS hack or conditional comments method to implement specified CSS for specified IE version. Even same CSS layout will display differently between IE 6 and IE 7. This conditional comments are only interpreted by Microsoft Internet Explorer in HTML source code, this is just “IE-only” feature and they’re not supported by any other non-IE browsers. All non-IE browsers will treat it like normal comment in HTML code.

Example

The tag in the below example will let IE 5.5 or 6 read the specified CSS file while IE 7 will ignore it
P.S lt equals to less than

<!--[if lt IE 7]>
    <style type="text/css">@import "@import "css/common_ie.css";</style>
<![endif]-->

The tag in the below example will let IE 7 read the specified CSS file while IE 6 or less will ignore it

<!--[if IE 7]>
     <style type="text/css">@import "css/common_ie7.css";</style>
<![endif]-->

Case Study

<style type="text/css">
@import "css/common.css";
</style>
 
<!--[if lt IE 7]>
    <style type="text/css">@import "@import "css/common_ie.css";</style>
<![endif]--> 
 
<!--[if IE 7]>
     <style type="text/css">@import "css/common_ie7.css";</style>
<![endif]-->

• Firefox and non-IE browsers will interpret common.css, and ignore common_ie.css and common_ie7.css CSS files.
• Internet Explorer version 5.5 or 6 will interpret common.css follow by common_ie.css, the CSS value in common_ie.css will override common.css.
• Internet Explorer version 7 will interpret common.css follow by common_ie7.css, the CSS value in common_ie7.css will override common.css.

Conclusion

The conditional comments technique is a must if we want to implement some cross browsers support website.

By the way, why internet explorer do not follow the CSS standard like other browser? I think this is Microsoft’s way of marketing product – always implement something only Microsoft understand :) . Look forward what Internet Explorer 8 will look like, is this a new innovation product? or just another Microsoft’s “money” product.

Reference

http://en.wikipedia.org/wiki/Conditional_comment

JDBC Tutorials

Java MongoDB Tutorials

Java I/O Tutorials

Spring MVC Tutorials

Spring Tutorials