Last updated March 12, 2012. Created by JohnAlbin on January 18, 2011.
Edited by Tor Arne Thune. Log in to edit this page.
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:
<?php
/**
* 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.csswhere
- 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.cssTo add a stylesheet for IE 9 only, use:
stylesheets-conditional[IE 9][all][] = ie9.cssAnd to add a print stylesheet for all versions of IE, use:
stylesheets-conditional[IE][print][] = ie-print.cssPlacing 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
If you have to do this manually, you can also do this
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]-->
www.SimpleAsCouldBe.com