Drupal: the good Omega, the bad and the ugly IE8

It was January 2002 when the “king of all browsers” had the largest market share: 86%. After 10 years, the dictatorship is permanently collapsed, with only 16% of utilization. Considering that only 7-8% have IE8 (IE9 works pretty good) we are talking of a very small percentage of users, but this percentage is even more than the usage of Safari and Opera togheter; so we have to (in some cases we must) – at least – allow a minimal user experience for who is using the bad and ugly IE8.

After some researches, I’ve found a simple solution:

function omega_subtheme_css_alter(&$css) {
  foreach ($css as $key => $value) {
    if (preg_match('/^ie::(\S*)/', $key)) {
      unset($css[$key]);
    }
    else {
      $css[$key]['browsers']['IE'] = TRUE;
    }
  }
}

Also remember to aggregate CSS: seems that Microsoft can’t understand how to handle more than 31 stylesheet in the same page, so it’s better to group it all. This is good also for the respondjs @import problem:

Respond.js doesn’t parse CSS referenced via @import

Some changes may be needed also in the IE8 styles and you have to add the following code to the Omega subthemes template.php file:

function subthemename_preprocess_html(&$variables) {
  drupal_add_css(path_to_theme() . '/css/ie-lte-8.css', array(
    'group' => CSS_THEME,
    'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE),
    'preprocess' => FALSE)
  );
}

Then, create the ie-lte-8.css under mysubthemename/css and fill it with good rules to handle the bad rules ;)

In order to use Disqus to comment out you have to accept the use of third-party cookies.