Skip to Navigation
Home › Blogs › Technology ›

Did You Know Internet Explorer 6 Limits How Many Stylesheets are Loaded?

Printer-friendly version
Submitted by Oscar Merida on 4 November 2008
in

I ran into this particularly pesky limitation on a recent project and, as in all IE6 related matters, became intensely irritated and angry. It turns out, that for both IE6 and IE7, only the first 30 <style></style> and < link type="text/css" ... /> are parsed. On Drupal, you can easily reach this limit between the core style sheets, module contributed style sheets, and your own theme's stylesheet. There are proposed patches, and a lively debate about supporting IE6 at all in the drupal issues tracker IE: Stylesheets ignored after 30 link/style tags. Mind you, this is simply a limit on the number of tags - you can load many files within each tag.

You'll forgive me for not being in favor of making our code lower quality to cater to a dying browser that has already resulted in the waste of hundreds of thousands of hours. If you use @import, you cannot effectively Save-As a page because the imported stylesheets don't come with it. Frankly I've yet to hit the 30 stylesheet mark myself so I've not encountered this problem.

If, like me, you are forced to work in the real world and not some idyllic fantasy land where you get a completely standards compliant browser AND a pony, you can adapt my solution below. This solution is ideal if you do not want to, or cannot, patch or hack away at Drupal's core.

In your theme, instead of using drupal_get_styles(), we'll use our own function. Find where the styles markup is defined or echo'd to the browser and replace it with a call to a new function:

   1:$styles = my_group_css();

Before that function is called, you'll need to define it with the following php code:

   1:<?php    2:// Max limit of stylesheets in IE bug: see http://drupal.org/node/228818    3:function my_group_css()    4:{    5:    // despite the name, this returns an array of all stylesheets    6:    $styles = drupal_add_css();    7:    $output = '';    8:    foreach ($styles as $media => $css)    9:    {   10:        $css = array_merge($css['module'], $css['theme']);   11:        $groups = array_chunk(array_keys($css), 30, true);   12:   13:        foreach ($groups as $grp)   14:        {   15:            $output .= '<style type="text/css" media="' . $media . '">';   16:            foreach ($grp as $url)   17:            {   18:                $output .= '@import "' . base_path() . $url . '";' . "\n";   19:            }   20:            $output .= '</style>';   21:        }   22:    }   23:   24:    return $output;   25:}   26:   27: