IE Can Only Handle 31 Stylesheets -- Thanks IE!

Yes, our old friend Internet Explorer is at it again to make our lives as web developers miserable.  Not many know this, but in IE, a single web page can only reference at most 31 <link>'d CSS stylesheets. For hand-coded pages, this probably isn't a problem.  But when you start using larger CMS systems and applications, like Drupal, you can very quickly run into the 31 stylesheet limit.  This happens in currently all versions of IE, including IE 8.

ie_sucks_sm-300x225.pngMost of the time this problem presents itself, the web developer believes he or she is going insane.  Your site looks beautiful in FireFox and Chrome, but in IE everything is off: some things are positioned weird, fonts are the wrong size, etc.  And IE doesn't warn you or let you know this is happening in any way, so you are left to go silently mad trying to figure out what the problem is.

There are a couple possible solutions:

  • Combine stylesheets into single, large files.  This may not always be practical or very organized, but hey, you've got to do what you've got to do.
  • Use @import instead of <link>
    • For example:
      <style>
      @import url('a.css');
      </style>
    • IE seems to be okay with this, and will allow more than 31.  However, @import isn't as great, performance-wise, as <link>.  Also, it may cause stylesheets to be loaded out of order, which can cause JavaScript problems.
  • If you are using Drupal, you can try the modules http://drupal.org/project/ie_css_optimizer or http://drupal.org/project/unlimited_css to get around the IE problem.

 Let's hope that the next version of IE lifts this bizzare restriction (but I'm not holding my breath).