CSS selector limit in IE

[aschempp]

IE versions 6, 7, 8 & 9 all have a limit on the number of selectors allowed in a single CSS file. Once the limit is reached, IE silently fails and just ignores any further CSS in the file leaving parts of your site totally unstyled.

http://blesscss.com/

Are we taking care/considering this in our CSS combiner?

[Serhii-DV]

it's interesting... and what are the limitations?

[xchs]

http://support.microsoft.com/kb/262161

This problem occurs because the following conditions are true in Internet Explorer:

• All style tags after the first 31 style tags are not applied.
• All style rules after the first 4,095 rules are not applied.
• On pages that uses the @import rule to continously import external style sheets that import other style sheets, style sheets that are more than 3 levels deep are ignored.

Test page (view this page in Firefox and IE): http://demos.telerik.com/testcases/BrokenTheme.aspx

[leofeyer]

Does this affect us?

[aschempp]

It could, if the combiner combines a lot of CSS that will exceed the 4095 rules. Currently there is no way around this, but I don't have a clever idea either. I'd just keep it open atm...

[tristanlins]

I created very complex websites with Theme+ and full combination of all stylesheets (including plugins). I never reached this problem until now. I think its not a critical problem, but we should not ignore this.

[aschempp]

Thanks Tristan, thats exactly what I mean.

[leofeyer]

Sill I close the ticket now, don't I?

[aschempp]

I think its not a critical problem, but we should not ignore this.

Doesn't that mean we should keep it open for later?

[leofeyer]

What will be different later?

[leo-unglaub]

@leofeyer i never had this problem in my projects but there is a simple solution. If you generate the css file from the internal database, simply count the selectors and after X selectors write the content into a different file.

[tristanlins]

In the future, we will make more annimation with CSS3 instead of JS, means we have "a lot" more CSS Code than today. We may run into this problem in the future, when IE9 and maybe IE10 still have this limitations.

[tristanlins]

@LeoUnglaub thats not correct, the combiner have to check the selector count, not the CSS File generator.

[leofeyer]

The combiner also handles files from the file system. Are we supposed to write an algorithm to count the selectors? What about IE10?

[leo-unglaub]

@tristanlins thats right, i forgot about this.

[aschempp]

Both have this problem... an individual file can exceed the limitation as well as the combiner. However, parsing the CSS to count selectors sounds very nasty...

[tristanlins]

I think you can count the open curly braces {. The only "overhead" are the braces from the @media rules, but i think they can be ignored. (Normaly there are not many @media rules)

[leo-unglaub]

parsing the css files is not as hard as it sounds. As tristan said, you only have to get the content between the {} and split at the , and now you have the number of selectors. @leofeyer if you want, i can send you a pull request.

[tristanlins]

@LeoUnglaub is right, i ignored that multiple selectors can be concatinated by , for the same block... but as he sayd, this should not be a big problem.

[leofeyer]

It is a problem in my opinion though, because the reset script alone combines up to 40 selectors by comma. And almost every second format definition of my themes does, too.

Do we really need to worry about this at all? What about IE10?

[xchs]

IE10 raises the limits:

• A sheet may contain up to 65534 rules
• A document may use up to 4095 stylesheets
• @import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)

http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx