February 8, 2009 / A limitation in Internet Explorer can make trouble for some CMS-based sites that pack on the stylesheets.

That’s the number of stylesheets you can include in a HTML document in Internet Explorer before it starts to ignore you:

You can create up to 31 styleSheet objects with the createStyleSheet method. After that, the method returns an “Invalid Argument” exception.

This can create a problem for module-based content management systems like Drupal where you can have multiple stylesheets for one module, and multiple modules. (It’s an application design approach that really puts the “cascade” in Cascading Style Sheets.)

Fortunately, Drupal allows you to aggregate and compress CSS files in the Admin settings (part of Drupal Core since version 5, I think). Unfortunately, in IE there’s a CSS file size limit (288 KB), at least in versions 6 and 7, so aggregation won’t solve the problem in every case.

To put this in perspective though, 31 is a lot of HTTP requests, and 288 KB is one hell of a CSS file. Numbers like these will likely have a negative impact on the user experience by slowing your site down. The YSlow Firefox plugin (requires Firebug) is good at identifying such problems.

As for the file size problem, James Edwards’ Dust Me Selectors can find unused CSS selectors for the entire site, which should allow some trimming. And of course there’s GZIP compression. Yahoo! Developer Network has an excellent best practices page that covers these topics. Best of all, Wim Leers has applied the Yahoo! rules approach in his detailed article about speeding up Drupal 5 and 6.

† Observed in IE6, IE7 and IE8 RC1.

Comments are closed.

Zero to One-Eighty contains writing on design, opinion, stories and technology.