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 4 horribly-difficult-to-remember function calls to your theme's template.php file:

/**
 * Implements hook_preprocess_html().
 */
function MYTHEME_preprocess_html(&$variables) {
  // Add conditional stylesheets for IE.
  drupal_add_css(
    drupal_get_path('theme', 'mytheme') . '/css/ie.css',
    array(
      'group' => CSS_THEME,
      'browsers' => array(
        'IE' => 'lte IE 7',
        '!IE' => FALSE,
      ),
      'weight' => 999,
      'every_page' => TRUE,
    )
  );
}

/**
 * Implements hook_preprocess_maintenance_page().
 */
function MYTHEME_preprocess_maintenance_page(&$variables) {
  // Add conditional stylesheets for IE.
  drupal_add_css(
    drupal_get_path('theme', 'mytheme') . '/css/ie.css',
    array(
      'group' => CSS_THEME,
      'browsers' => array(
        'IE' => 'lte IE 7',
        '!IE' => FALSE,
      ),
      'weight' => 999,
      'every_page' => TRUE,
    )
  );
}

Blech. Who wants to do that?

This module allows you to add "conditional-stylesheets" in a much simpler manner, by adding lines to your theme's .info file. The syntax for that is:

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

where

  • EXPRESSION can be any of the "downlevel-hidden" expressions 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:

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

To add a stylesheet for IE 9 only, use:

stylesheets-conditional[IE 9][all][] = ie9.css

And to add a print stylesheet for all versions of IE, use:

stylesheets-conditional[IE][print][] = ie-print.css

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]-->

*** IMPORTANT ***

Drupal 7 stores a cache of the data in .info files. If you modify any lines in your theme's .info file, you MUST refresh Drupal 7's cache by simply visiting the Appearance page (Administration > Appearance, or http://example.com/admin/appearance).

Comments

SimpleAsCouldBe’s picture

SimpleAsCouldBe commented

I think this module isn't compatible with the LESS stylesheet preprocessor, so I had to do this in page.tpl.php. Not as bad as the preprocessing suggested above:

<!--[if lte IE 8]>
<link rel="stylesheet" media="all" href="<?php print $base_path ?><?php print drupal_get_path('theme', 'myThemeName') ?>/common/ie8Fix.css" />
<![endif]-->
nyan’s picture

nyan commented

Hi,
I have done all these but no luck ?
What is the secret ?

akalam’s picture

akalam commented

Tip: change $base_path with base_path() and check the name of your stylesheet foder in order to point to the right one

<!--[if IE]>
    <link href="<?php print base_path() . drupal_get_path('theme', 'YOURTHEME') ;?>/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->