IE can only render 4095 selectors from an external CSS file

Posted Wed, 10/14/2009 - 23:57 by Tim

I ran across this today: apparently, Internet Explorer (all versions, not just IE 6) can only render a total of 4095 selectors from an external CSS file. After that, it simply starts ignoring the selectors. If you don't believe me, see the CSS rendering errors for yourself (only visible in IE, all versions).

This has been remarked on before, but it's definitely not common knowledge:

To the Drupal developer: Why should we care? How often could this happen, realistically?

It's actually not as far-fetched as you might think. Imagine a large site, with many areas. styles.css is getting huge, and you have some ancillary style sheets. Additionally, you have contributed modules which add CSS to every page. This happens; you can't always trust a module developer/maintainer to know what they're doing. Now, you turn on style sheet aggregation. Suddenly, you have one huge style sheet. If collectively there are more than 4095 selectors defined, you will end up with a bunch of rules that don't get rendered.

Fun times! Moral of the story is probably: keep your style sheets short and simple, keep an eye on what contributed modules are doing, and envision a world without IE, or at least where IE behaves a little more like we'd like it to.

Comments

aggregation

by Tim - 10/21/2009 - 16:40

Evan-

Correct. Once you go over the limit in _one_ file, this limit kicks in. That means that aggregation actually can cause problems, in this (admittedly unusual) case.

I just last night found out about the Support File Cache module (http://drupal.org/project/sf_cache) that may help with this. It supposedly does aggregation in a more intelligent way. I have not worked with it personally, though.

Aggregation?

by Evan Lovely (not verified) - 10/16/2009 - 12:18

When Drupal aggregation is turned on, would that count towards the selector limit? So, say you have style.css with 1,000 selectors in it and 5 modules (in my unrealistic example) with 1,000 selectors in it, then you turn on CSS aggregation, therefore putting all the styles in one sheet with 6,000 selectors, would that then trigger this? So basically, you are looking fine before aggregation, then you flick it on incurring this wrath in IE?
Also, sirkitree: have you checked out http://ie6nomore.com ?

World without IE!

by sirkitree (not verified) - 10/15/2009 - 08:28

There are quite a few people I know who are personally dropping support for IE, well, at least IE6 (which is a step in the right direction). I make sure that my clients know that I do not support it myself and if it becomes a problem, well, they can simply find another outfit.

I also like the scripts you can now put up on your site so that if someone does happen to browse your site in IE6, they are notified that their experience will be degraded and here are a list of browsers to upgrade to.

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is used to make sure you are a human visitor and to prevent spam submissions.