ISTQB Certified Software Test Engineer

Friday, January 7, 2011

CSS Conditional comments

Cascading style sheets(CSS) conditional comments are used to fix browser issues.They work only for windows ie.Other browsers treat these lines of code as commnets except ie due to their syntax.Here is the example
<!--
<!--[if IE 6]>
.header{
width:600px;
}<![endif]-->
-->

The above piece of code should be added in head section of the html file.
For example if we set the width to 700px in ie6 the width will be reset to 600px due to this conditional comments.
So we can solve ie cross browser issues using this by writing styles individually for each ie.
U can have clear idea on this conditional comments with this example
<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
</p>


Copy the above code and save in html file and run the html file in different ie versions,so that u can clearly understand coditional comments