INDIA +91 964 309 2571 | USA +1669 327 4700 info@navyuginfo.com

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 sheets of 5 bits each, and one 12bit ruleID. The 5-bit sheets results in the 31 @import limit, and the 12-bit ruleID results in the 4095 rules-per-sheet limitations.

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 Blessed tool available at http://blesscss.com/1 which lets you do following tasks with simple one-line commands:-

  • Easily count selectors within a CSS file.
  • Split the CSS file into minimum number of files to keep you out of trouble wink