Using this module is easier than manually adding conditional comments specifically to the page.tpl.php template or appending them to the $styles variable. After installing this module, themes can specify conditional stylesheets in their .info file, and the conditional comments will be automatically included at the end of the standard $styles variable. The normal base theme stylesheet overriding/removing rules apply to conditional stylesheets as well.

The full syntax for adding conditional stylesheets to your theme's .info file is:

conditional-stylesheets[CONDITION][MEDIA][] = stylesheet.css

where

  • CONDITION can be any of the conditions specified in About Conditional Comments
  • MEDIA can be any of the normal CSS media keywords

For example, to add a stylesheet that only targets IE 6 and below, use:

conditional-stylesheets[if lt IE 7][all][] = ie6-and-below.css

And to add a print stylesheet for IE 8 only, use:

conditional-stylesheets[if IE 8][print][] = ie8.css

So placing the above lines in your theme's .info file will automatically append the following to your $styles variable in the page.tpl.php template:

<!--[if lt IE 7]>
  <link type="text/css" rel="stylesheet" media="all" href="ie6-and-below.css" />
<![endif]-->
<!--[if IE 8]>
  <link type="text/css" rel="stylesheet" media="print" href="ie8.css" />
<![endif]-->

*** IMPORTANT ***
Drupal 6 stores a cache of the data in .info files. If you modify any lines in your theme's .info file, you MUST refresh Drupal 6's cache by simply visiting the admin/build/themes page.

What themes make use of the Conditional Stylesheets module?

Technical details of the 6.x-1.x version

The Conditional Stylesheets module only reads your theme's .info file when the theme registry is rebuilt, so, just like standard stylsheets, any changes you make to the .info file will require you to rebuild the theme registry. During the theme registry build, the module will also generate the HTML needed for the conditional stylesheets and store it in the database.

So the bulk of the work is only done when the theme registry is rebuilt. At all other times the module only loads 3 functions with a grand total of 4 lines of PHP code; so it is extremely efficient on every page load.

The module appends the HTML for the conditional stylesheets to the $styles variable in your page.tpl.php. It also stores a copy of the HTML in a $conditional_styles variable, in case your theme does something funky with the $styles variable in its template file or preprocess function.

For example, if you are regenerating the $styles variable in your theme's preprocess_page function by calling $vars['styles'] = drupal_get_css() (old versions of the Zen theme did that), you will either need to stop doing that (adding stylesheets with drupal_add_css in your template.php is bad for performance anyway) or, after you are done screwing with $var['styles'], you can use $var['styles'] .= $var['conditional_styles']; to add them back in. See #426486: What is right way to add CSS to some pages? for more info.