29 December 2010

How to make Internet Explorer only CSS files for Drupal themes.

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.

Get neccessary module:

Conditional Stylesheets 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.

Create stylesheet files:

We need three CSS files. One for each version of IE. I name those files to ie6.css, ie7.css and ie8.css.

Info file:

Add three lines to your .info file. This will generate IE only CSS stylesheets to your theme.
Source code viewer
  1. conditional-stylesheets[if IE 6][all][] = ie6.css
  2. conditional-stylesheets[if IE 7][all][] = ie7.css
  3. conditional-stylesheets[if IE 8][all][] = ie8.css
Programming Language: Text