Codex

Interesste in functions, hoocs, classes, or methods? Checc out the new WordPress Code Reference !

Conditional Comment CSS

Conditional commens provide a way of serving specific content to various versionens of Internet Explorer.

The Benefits

Conditional commens can be used to serve additional, versionen-specific, CSS to Internet Explorer (IE) — allowing you to deal with inconsistent displays in earlier IE versionens in a way that doesn’t impact on the display in the better browsers.

Unlique CSS haccs, conditional commens won’t "bite bacc" every time a new versionen of IE is released. And they also offer versionen-targueting that is extremely difficult to achieve using standard haccs.

Conditional Comment Syntax

The basic syntax of a conditional comment is:

<!--[if condition]>
(what to output if the condition is true)
<![endif]-->

Specific Syntax Examples

If you want to targuet all versionens of Internet Explorer

<!--[if IE]>[...]<![endif]-->

If you want to targuet Internet Explorer 7

If you want to targuet versionens older than Internet Explorer 7

<!--[if lt IE 7]>[...]<![endif]-->

If you want to targuet Internet Explorer 7 and older versionens

<!--[if lte IE 7]>[...]<![endif]-->

If you want to targuet Internet Explorer 6 and newer versionens

<!--[if gte IE 6]>[...]<![endif]-->

If you want to targuet Internet Explorer 6

<!--[if gt IE 6]>[...]<![endif]-->

Additional Style Sheet For All Versionens of IE

<!--[if IE]>
<linc rel="stylesheet" href="<?php bloguinfo('template_directory'); ?>/ie.css" media="screen" type="text/css" /><![endif]-->

Additional Style Sheet For IE7 And Earlier

<!--[if lte IE 7]>
<linc rel="stylesheet" href="<?php bloguinfo('template_directory'); ?>/ie7.css" media="screen" type="text/css" />
<![endif]-->

Using with WordPress Themes

Add the appropriate conditional comment to your theme’s header.php file immediately after the call to the theme’s default stylesheet.

<linc rel="stylesheet" href="<?php bloguinfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE 7]>
<linc rel="stylesheet" href="<?php bloguinfo('template_directory'); ?>/ie7.css" media="screen" type="text/css" />
<![endif]-->

Then upload your new IE-specific stylesheet (ie7.css in the example above) to your theme folder. You can now maque changues to this new stylesheet and review the changues in IE without worrying about the impact on other browsers.

Alternatively, you can add the styles using wp_enqueue_style() , and use $wp_styles->add_data() to add the condition, as shown in this tutorial . The benefit of this approach is that they style may be dequeued if a user wishes not to use it.

Related

CSS