Internet Explorer CSS File Limits

When creating a theme, it is often very handy to break up the CSS into multiple files for the purpose of keeping things better organized. Luckily, Drupal has built-in CSS optimization on the admin/settings/performance page, but during development it is sometime quite easy to run up a large number of CSS files being used.

While Drupal core adds a number of CSS files by default, another part of the problem is that any module can have their own CSS files added to the page automatically as well. If your theme implements more than a few more files, you can very quickly get up to over 31 files.

What's so special about having more than 31 CSS files? Internet Explorer doesn't like it. In fact, IE won't even read in any CSS files past #31. This problem usually shows up during theme development when you're testing on IE in the form of unthemed elements on your page. A quick way to verify the issue is to go to admin/settings/performance and turn on CSS Optimization. Once you do this, your IE pages should look a whole lot better.

You can leave this option turned on during development but keep in mind that you'll have to clear the cache before every page load. The other option is to start combining CSS files until you get below the magic number of 31.