Conditional comments for flexibility

Conditional comments will help the web developers to design a web page compatible with other browsers. We usually design web pages that works in almost all latest browsers. But, what about the older ones. The older ones that comes along with windows xp,  When we see the browsers market share on the whole the internet explorer wins, but older version of internet explorer doesn’t understand all the  css rule in the way we wanted to. So conditional comments will help us to use separate style sheet for specific browsers.

<link href="styles\home.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="styles\ie6.css" rel="stylesheet" type="text/css" />

All the browsers except IE6 will treat the third line as a comment. If IE6 reads the third line then it gets new style rules which gives the opportunity to give different visual style for internet explorer. Well that’s not the end of the use of conditional comments. It can also be used to insert a div tag only for a specific browser.

<!--[if IE 6]>
<div id="ie6">
<p> This is div tag which appears only on IE6. </p>

That div tag is only valid on IE7 versions that came before. Why? Because of the “lt” which is used after the if statement. Here two specifiers can be used, which are “lt” and “gt”, “lt” is used to specify version below the specified IE and “gt” is used to specify the version after the specified IE. To specify generally for all versions of  internet explorer just specify it as <!–[if IE]>

Note that conditional comments can be used only in HTML files not in any CSS files. Conditional comments are used to specify only internet explorer not any other browser.

HTML and CSS – The Basics

So, one of my friend said me to post an article for basics so the beginners can understand. But its not easy to learn in one day and you have to read and try lots of experiment on your own to know about CSS and HTML combination. CSS stands for cascading style sheets, for styling the web page. HTML is a markup language which stands for Hyper Text Markup Language, In simple words HTML creates a skeleton for the web document, where CSS defines the HTML object’s appearance like its size, color, position on the screen etc. If you don’t define a CSS for your HTML document the web browser will automatically use the default CSS that’s build inside the browser. For instance its predefined that text color should be black in the HTML document by browsers default CSS.

CSS gives lots of flexibility for web page layout design. A single HTML page can be made to look in different ways by changing the CSS alone. A best example to see this is to visit CSS Zen Garden. You can see how the entire site appearance changes just by changing the style sheets. Read the rest of this entry »