Drupal IE support for responsive styles.

320_and_up.md

From https://www.drupal.org/node/1322794#comment-5630610

/* template.php */

function mytheme_preprocess_html(&$vars) {
  css_320_and_up($vars);
}

/*
 * We're using media queries to handle progressive enhancement of our templates.
 *
 * Because IE 6-8 doesn't handle media queries (and the current JavaScript solutions create other issues),
 * let's insert a conditional comment for IE < 9 to display all or media-queried stylesheets. IE < 9 won't
 * load the media query stylesheets, and other browsers won't load these ones.
 *
 * Note: this is a little more complicated than it possibly should be, because Drupal doesn't let us use the
 *       same stylesheet twice.
 */
function css_320_and_up(&$vars) {
  $original_css = drupal_add_css();
  $media_queried_css = drupal_get_css();
  $vars['media_queried_css'] = $media_queried_css;  // Store the current CSS in a variable for later use.
  drupal_static_reset('drupal_add_css');            // Reset the CSS Drupal has stored, so we can add it in again below.

  // For each appropriate stylesheet, duplicate for < IE9 using conditional comments.
  foreach ($original_css as $path => $attributes) {  
    if ($attributes['group'] == CSS_THEME && preg_match('/^(all|screen|print|handheld)$/i', $attributes['media']) == 0) {
    
      // Window 7 Phone gets the 320px stylesheets only.
      $ie_browsers = (preg_match('/min-width: 320px/i', $attributes['media']) !== 0) ? 'lt IE 9' : '(lt IE 9)&(!IEMobile)';

      drupal_add_css($path, array(
        'browsers'    => array('IE' => $ie_browsers, '!IE' => FALSE),
        'data'        => $attributes['data'],
        'group'       => CSS_THEME,
        'media'       => 'screen',
        'preprocess'  => $attributes['preprocess'],
        'weight'      => $attributes['weight'],
      )); 
    }
  }

<!-- html.tpl.php -->

<!-- For all browsers -->
<?php if(isset($media_queried_css)){print $media_queried_css;}; ?>

<!-- For IE < 9 -->
<?php print $styles; ?>