How can I serve a separate CSS file for Internet Explorer?

Question

I am setting responsive design for only IE (Internet Explorer) in Drupal 7.

Is there any method or solution this file is working with only IE not for Firefox and Chrome?

Answer 1

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 my_groovy_theme_preprocess_html(&$vars) {
  drupal_add_css(drupal_get_path('theme', 'my_groovy_theme') . '/lte-ie-8.css', array(
    'group' => CSS_THEME,
    'browsers' => array(
      'IE' => 'lte IE 8',
      '!IE' => FALSE
      ),
    'preprocess' => FALSE
  ));
}
?>

-Which is of course absurdly complicated just add a conditional CSS file, so I'm not even going to try and explain what all that actually means - you can just play around with the important bit (see the next code snippet) - the first line is declaring the conditional statement - here this is targeting IE8 or less. The second line you don't have to worry about, just don't change it.

'browsers' => array(
  'IE' => 'lte IE 8',
  '!IE' => FALSE
  ),

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

So that's a basic round up of how to add CSS to your Drupal projects - I hope this helps you get started with Drupal theming a bit easier. If you are building a module please think twice about adding CSS for it - more often than not module CSS is not required, unless you are building something like Toolbar or Overlay which really demands it. Just let the theme layer handle the style - adding module CSS can often make the themers life that much harder.

Answer 2

If you are looking to add the css from a theme and not module, using conditional stylesheets directly in your theme's .info file may be preferable to the drupal_add_css answer mentioned.

Answer 3

Use drupal_add_css with the option 'browsers'.

drupal_add_css(
  path_to_theme() . '/ie.css',
  array(
    'browsers' => array(
      'IE' => 'lte IE 9',
      '!IE' => FALSE
    )
  )
);

You should add this function call in your theme's template.php file through template_preprocess_html like this:

function MYTHEME_preprocess_html(&$vars){
  drupal_add_css(
      path_to_theme() . '/css/ie.css',
      array(
        'browsers' => array(
          'IE' => 'lte IE 9',
          '!IE' => FALSE
        )
      )
    );
}

Answer 4

If you are using Zen as your base theme, the conditional stylesheets module should already be included. If not you should download that module.

After downloading and enabling it, it will automatically add the markup in your html.tpl.php file for the ie stylesheets. Be careful, ie only supports this until ie9. ie10+ will need their own stylesheet(s) to work with some css hacks.

Here is a similar post I made a few weeks ago about my issue with it: Need help defining IE specific stylesheet with Zen Starter-kit and Conditional Stylesheet Module

In order to style for ie10 and above, you can currently use an odd media-query target found here: http://www.limecanvas.com/css-hacks-targeting-ie-10/