Adding Conditional Stylesheets for Internet Explorer in Drupal7

There are two ways of doing this – you can either use drupal_add_css() with the optional browser type parameter, or go the easier route and use the Conditional Styles module which allows you to add CSS files via your themes info file. First lets use drupal_add_css() with the browser type. You should use this in themename_preprocess_html() (which goes in your themes template.php file) such as this

<?php
  function themename_theme_preprocess_html(&$vars) {
    drupal_add_css(drupal_get_path('theme', 'themename') . '/lte-ie-8.css', array(
      'group' => CSS_THEME,
      'browsers' => array(
      'IE' => 'lte IE 8',
      '!IE' => FALSE
    ),
   'preprocess' => FALSE
  ));
}
?>

This code is targeting IE8 or less

There is a much easier way to declare conditional stylesheets in Drupal – use the Conditional Styles module. This module allows you to declare conditional CSS in your themes info file, just as easily as the very first examples in this article. Just install the module and you can do stuff like this in your themes info file:

stylesheets-conditional[lte IE 8][all][] = lte-ie-8.css
I hope this helps you get started with Drupal theming a bit easier

Tags