Removing all those pesky style element declarations in Drupal (to accommodate IE6)

Some of you may already be aware that IE6 has a limitation of reading only up to 30 external stylesheet declarations (when using either the style element, link element or @import rule). This figure may seem ridiculously high, and you might be thinking that an author with that many individual declarations doesn’t have a clue about organization, but this is what out-of-the-box Drupal serves you (Drupal.org related post).If you’re working on a fairly large Drupal site which employs a number of different modules, then you may well experience this problem. The issue is that many Drupal modules that have any kind of theming side of them include their own (sometimes very hacky) stylesheets; so when one of these modules is installed, Drupal adds a link to this stylesheet by means of a style element declaration – yes thats right, one for every module.

I’m currently working on a large-scale Drupal site which includes a large number of modules, each with their own styleshee. As already mentioned, IE6 (and below) ignore any stylesheet declarations (using style or link elements) after 30 instances. Add to this the numberous non-module stylesheets (Drupal core & IE-specific) and you’re well on your to reaching IE6s limit.

So, what are the solutions?

Aggregate & Compress CSS within Drupal

Drupal recognises the issue of an additional HTTP request required for each module stylesheet. Fortunately this feature gets around the IE6 issue by aggregating all module and core stylesheets into one instance for each stylesheet media type defined. You can access this feature by logging in as an Admin and going to Site Configuration > Performance

However this method caches CSS too, which means it’s far from ideal whilst theming development is taking place.

Unsetting stylesheets within template.php and using @import

You can disable any module stylesheets from being included by unsetting them from within template.php. First get the stylesheet array by using $css = drupal_add_css() and then go ahead and unset all stylesheets (which will then all be linked to from within just one). Your snippet will look something like this:-

# get array of stylesheets
$css = drupal_add_css();
unset($css['all']['module']['modules/system/system.css']);
unset($css['all']['module']['modules/system/defaults.css']);
unset($css['print']['theme']['themes/mytheme/print.css']);

Now you would go ahead and use the @import rule to import your stylesheets through one of your theme-level stylesheets. The issue however, still exists that if you have more than 30 being imported within a single document, stylesheets that are <30 will be ignored. To only workaround is to create a new stylesheet in this case, specifically for importing the remaining stylesheets.