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 have cleaner CSS in their normal stylesheets and can fix the broken rendering in IE by placing IE-only CSS inside conditional comments; this technique is even recommended by Microsoft.

Without this module, the only way to have IE conditional stylesheets was to add 37 lines of code (more if you want to add more than one stylesheet) in four horribly-difficult-to-remember function calls to your theme's template.php. Blech. Who wants that?

This module allows Drupal 7 themes to easily add conditional stylesheets to the theme's .info file.

; Set the conditional stylesheets that are processed by IE.
stylesheets-conditional[lt IE 7][all][] = ie6-and-below.css
stylesheets-conditional[IE 9][all][] = ie9.css
stylesheets-conditional[IE][print][] = ie-print.css
stylesheets-conditional[(gte IE 9)|(gt IEMobile 7)|(!IE)][all][] = modern-browsers.css

Note: The above syntax is for Drupal 7 themes. See the online documentation for the Drupal 6 syntax.

Placing the above lines in your theme's .info file will automatically append the following HTML code after your existing stylesheets in the <head> of your website:

<!--[if lt IE 7]>
  <link type="text/css" rel="stylesheet" media="all" href="ie6-and-below.css" />
<![endif]-->
<!--[if IE 9]>
  <link type="text/css" rel="stylesheet" media="all" href="ie9.css" />
<![endif]-->
<!--[if IE]>
  <link type="text/css" rel="stylesheet" media="print" href="ie-print.css" />
<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|(!IE)]><!-->
  <link type="text/css" rel="stylesheet" media="all" href="modern-browsers.css" />
<!--<![endif]-->

More information about the .info file syntax used by this module can be found in the documentation. In addition, more information about Conditional Comments is available on Microsoft’s website.

Note that all versions of IE limit the number of stylesheet files to 31. In Drupal 6, this will cause problems if you have a large number of stylesheets; consider aggregating them in the performance settings page, or installing the IE CSS Optimizer module.

What themes make use of the Conditional Stylesheets module?

The following themes have conditional stylesheets included their .info file and make use of the functionality of this module.

• Zen
• Layout Studio
• Tendu
• Hopefully more to come…

But all themes should be compatible with this module if you manually add lines to their .info file.

Drupal 6 version

The above information is about the Drupal 7 version, for information about the Drupal 6 version, please read the online documentation.

Drupal 8 version

For information about the Drupal 8 version, please read the online documentation.

About the “logo”

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