Adding browser-specific style sheets

You can add a browser-specific style sheet.

Drupal 6

Below is a Drupal 6 theme example for including IE6< targeted CSS files. (Examples are taken from the Garland theme found in the Drupal core installation.)

page.tpl.php:

<?php
...
<?php print $styles ?>
<!--[if lt IE 7]>
  <?php print phptemplate_get_ie_styles(); ?>
<![endif]-->
...
?>

template.php:

<?php
...
function phptemplate_get_ie_styles() {
  global $language;

  $iecss = '<link type="text/css" rel="stylesheet" media="all" href="'. base_path() . path_to_theme() .'/fix-ie.css" />';
  if ($language->direction == LANGUAGE_RTL) {
    $iecss .= '<style type="text/css" media="all">@import "'. base_path() . path_to_theme() .'/fix-ie-rtl.css";</style>';
  }

  return $iecss;
}
...
?>

Drupal 7

Drupal 7 adds the ability to specify a 'browsers' key when calling drupal_add_css().

template.php:

<?php
...
function yourthemename_preprocess_html(&$vars) {
  ...
  drupal_add_css(path_to_theme() . '/fix-ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
}
...
?>

See the API documentation for drupal_pre_render_conditional_comments() for details on the 'IE' and '!IE' keys.

It is recommended for themes to always use drupal_add_css() for adding a CSS file, so that Drupal code knows the exact total number of CSS files being added. This is information that might be needed for working around Internet Explorer's limitation of only being able to load the first 31 LINK/STYLE tags.