Blog

Stylesheets limit in IE9

SYMPTOMS :-
Styles on a webpage are missing or look incorrect when the page loads in Microsoft Internet Explorer version 6 to 9.
Note This problem can occur whether the webpage uses an inline style sheet or points to a cascading style sheet.
You may also receive the following error message:
The page you are looking for might have been moved or had its name changed.

CAUSE :-
This problem occurs because the following conditions are true in :

  • A sheet may contain up to 4095 rules
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep

NOTE:- 4095 is actually a selectors-per-sheet limit and NOT a rules-per-sheet limit

For eg,

  • .body-container { /* This is one selector*/ }
  • .body-col nav .nav-items { /* This is also one selector*/ }
  • .body-col, section, nav .nav-items, footer .footer-links li { /* These are 3 different comma separated selectors and will be counted as 3 by IE9*/ }

DIGGING DEEPER INTO THE CAUSE:-
The root of the limitations is that Internet Explorer uses a 32bit integer to identify, sort, and apply the cascading rules. The integer’s 32 bits are split into five fields: four sheetIDs of 5 bits each, and one 12bit ruleID. The 5 bit sheetIDs results in the 31 @import limit, and the 12 bit ruleID results in the 4095 rules-per-sheet limitation.

While these limits are entirely sufficient for most sites, there are some sites (particularly when using frameworks and controls) that can encounter the limits, requiring workarounds.

SOLUTION :-
It’s pretty simple actually, just split up your css files.
Use Blessc tool available at http://blesscss.com/1 which lets you to do following tasks with simple one line commands :-

  • Easily count selectors within a css file.
  • Split the css file into minimun number of files to keep you out of trouble wink
adminStylesheets limit in IE9
Share this post

Join the conversation