Stylesheets limit in IE9

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.

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*/ }

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.

It’s pretty simple actually, just split up your css files.
Use Blessc tool available at 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