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?
- Zen (6.x-1.0-beta3 and later)
- Layout Studio
- Tendu
- Hopefully more to come…
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.