Conditional CSS Comments

conditional CSS comments allow you to use different stylesheets to different browser. So you can assign different styles for different browsers.

Importance of Using Conditional CSS

  • Target CSS to any web-browser.
  • Optimise your CSS.
  • You can separate CSS for different browsers.
/*CSS FOR ONLY IE*/
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->

/*CSS FOR ONLY IE 5*/
<!–-[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]–->

/*CSS FOR ONLY IE 5.0*/
<!-–[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]–->

/*CSS FOR ONLY IE 5.5*/
<!–-[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]–->

/*CSS FOR ONLY IE 6*/
<!-–[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]–->

/*CSS FOR ONLY IE 7*/
<!–-[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]–->

/*CSS FOR Greater than IE 5*/
<!–-[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]–->
/*CSS FOR Less than IE 6*/
<!–-[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]–->

/*CSS FOR Less than equal to IE 5.5*/
<!–-[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]–->
/*CSS FOR Greater than IE 6*/
<!–-[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]–->

If you want to use Different Styles for different browsers in your CSS files or within the style tag

For IE6

*html .your_class
	{
	/* Your Style*/
	}
/* FOR ID*/

*html #your_ID
	{
	/* Your Style*/
	}
For IE7

*+html .yourclass
{
	/* Your Style*/
}
/* FOR ID*/
*+html #your_ID
{
	/* Your Style*/
}
For Google Chrome, opera, safari

body:nth-of-type(1) .your_class
{
/* Your Style*/
}
/*For ID*/

body:nth-of-type(1) #your_ID
{
/* Your Style*/
}

8 Comments

  1. rkaeimsovjrNo Gravatar
    Aug 24, 2009

    Good work Neel,

  2. hneulovfmgtNo Gravatar
    Aug 24, 2009

    Excellent Article. It will solve problems for browser compatibility.

  3. hnulovfmgtNo Gravatar
    Aug 24, 2009

    Nice Article. Yes browser compatibility will be solved using this methods

  4. vyugvofletNo Gravatar
    Aug 25, 2009

    Excellent site with good stuff.

  5. hnulovfmgtNo Gravatar
    Aug 25, 2009

    good article dude

  6. Sunil ChavanNo Gravatar
    Aug 26, 2009

    Really HelpFull!!!!!!!

  7. PhilNo Gravatar
    Nov 02, 2009

    hi – thanks for the post. quick question – is there any to target OS as opposed to browser? for example, using a particular css file for Mac but not Windows? thanks!


Trackbacks and Pings

  1. Steps to Write Better Css | SNilesh.com

Leave a Reply