Tuesday, January 25, 2011

Here are two more reasons why IE is a pain to develop for...

(as if you needed any more reasons to shake your fist it)

IE only allows 31 stylesheets per file:

Thirty-one stylesheets you say? Sounds like a lot, right?


Well, not when you consider systems like Drupal and Moodle where each new piece of functionality comes packaged in a module, each with its own CSS. The more modules, the more stylesheets.

These systems work by expecting you to override these individual modules’ stylesheets if you want to deviate from the existing colors or styles. That's fine, those overrides can be done inside your themes folder, either in an existing stylesheet there, or in one you create just for those overrides. In any case though, it is the stylesheets belonging to the individual modules that are read and processed first, so here’s the best part -- the modules' CSS are loaded first and your own styles are loaded after. So, if you have a lot of modules and if IE is going to cut you off at 31 stylesheets, it’s going to be your overrides that get the axe. Great!

So, you think, “I’ll just combine it all into one file!”

Smart right? You'd think so, but...

That’s when you might encounter issue #2 –

IE only allows 4095 selectors in a CSS file

Another limitation in Internet Explorer browsers is the maximum number of selectors in a single CSS file. That maximum number is 4095. Again, it sounds like a lot, but if you're trying to combine all of your stylesheets (particularly in Drupal or another module-based system) you could hit the wall, and end up in the same position as before.

You can read more and see an example of this problem in action here. Check it out for a good visual demonstration.

IE. Sigh.