WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

Conditional Comment CSS

Conditional comments provide a way of serving specific content to various versions of Internet Explorer.

Contents

The Benefits

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

Unlike CSS hacks, conditional comments won’t "bite back" every time a new version of IE is released. And they also offer version-targeting that is extremely difficult to achieve using standard hacks.

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 target all versions of Internet Explorer

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

If you want to target Internet Explorer 7

If you want to target versions older than Internet Explorer 7

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

If you want to target Internet Explorer 7 and older versions

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

If you want to target Internet Explorer 6 and newer versions

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

If you want to target Internet Explorer 6

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

Additional Style Sheet For All Versions of IE

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

Additional Style Sheet For IE7 And Earlier

<!--[if lte IE 7]>
<link rel="stylesheet" href="<?php bloginfo('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.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE 7]>
<link rel="stylesheet" href="<?php bloginfo('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 make changes to this new stylesheet and review the changes 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