'CSS Tutorials'

Intermediate: Conditional Comments

25 FEB 2010 3

Today I'm going to give you some tips that relate to Conditional Comments, such as how can you use them and a nice little trick you can do with them. Without further ado, let us begin.

Conditional Comments are a proprietary function created by Microsoft for Internet Explorer browsers, so developers can tag XHTML/HTML code specially for an Internet Explorer browser. In other words, everything inside a Conditional Comment will be skipped by all browsers except IE if the Conditional Comment follows certain conditions.

These conditions are:  lte (lower than or equal to), lt (lower than), gt (greater than), gte ( greater than or equal to)

<!--[IF lte IE 6]> Only stuff that will be read by browsers
 lower than Internet Explorer 6 or by Internet Explorer 6. Internet Explorer 7
 and above will not read this code <![endif]-->

<!--[IF lt IE 6]> Only browsers lowers than IE6 will read this paragraph <![endif]-->

<!--[IF gt IE 6]> Only browsers higher than IE6 will read this paragraph, such as IE7/IE8 and above. <![endif]-->

<!--[IF gte IE 6]> Only browsers higher than IE6 or IE6 will read this paragraph <![endif]-->

And an extremely nice thing you can do is that when you wish to eliminate a browser from your website, as in you do not wish to serve CSS and JS files for it, you can do this easily using XHTML code; you don't need to do server side verification or js verification.

<!--[IF IE]>-->
THIS PARAGRAPH WILL NOT BE READ BY ANY IE version
<!--<![endif]-->

<!--[IF gte IE 7]> ONLY IE7+ will read this following paragraph <![endif]-->

Effectively you have removed your server from serving CSS/JS to IE6 browsers. This is done because IE6 is a very old browser and modern web applications may not work on IE6...  and if they're dumbed down for IE6, the application may lack lots of features. You can also use this technique to send any sort of CSS, such as a basic style or a basic JS, so you provide only the basic features. The possibilities are endless.

Next week we're going to talk about CSS 3.0 features :D

Best Regards

Fill out the form below to get started

find out what we can do for you 877 543 3110