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
