Conditional Stylesheets

JohnAlbin - September 11, 2008 - 03:42
Conditional Stylesheets

Internet Explorer implements a proprietary technology called Conditional Comments. While web developers frown upon technologies that aren't cross-browser supported, many CSS developers have found Conditional Comments very useful. They can fix the broken rendering of CSS in IE by placing IE-only CSS inside conditional comments.

Previously, theme developers had to add these lines specifically to their page.tpl.php template or manually append them to the $styles variable. This module allows themes to specify conditional stylesheets in their .info file and the conditional comments will be automatically included at the end of the standard $styles variable. And the normal base theme stylesheet overriding/removing rules apply to conditional-stylesheets as well.

; Set the conditional stylesheets that are processed by IE.
conditional-stylesheets[if lt IE 7][all][] = ie6-and-below.css
conditional-stylesheets[if IE 7][all][] = ie7.css

So placing the above text 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 7]>
  <link type="text/css" rel="stylesheet" media="all" href="ie7.css" />
<![endif]-->

More information about Conditional Comments is available on Microsoft’s website.

What themes make use of the Conditional Stylesheets module?

Technical details

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 tpl.php file or preprocess function.

For example, if you are re-generating 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 $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.

About the “logo”

Its a parody of the IE6 logo with our friendly Druplicon.

Releases

Official releasesDateSizeLinksStatus
6.x-1.12009-May-258.95 KBRecommended for 6.xThis is currently the recommended release for 6.x.
Development snapshotsDateSizeLinksStatus
6.x-1.x-dev2009-Aug-249.03 KBDevelopment snapshotDevelopment snapshots are automatically regenerated and their contents can frequently change, so they are not recommended for production use.


 
 

Drupal is a registered trademark of Dries Buytaert.