Does IE 8 have a limit on number of stylesheets per page?
Yes, IE8 (and even IE9 apparently) limit the number of style sheets to 31 per page.
Telerik has an article and test page which demonstrate the issue. According to comments in the same article, the 4096 rules per file limitation has been marked as Won't Fix in Microsoft Connect but I've been unable to verify that.
IE Question: How many CSS includes can it handle?
Internet Explorer has a maximum limit of 32 CSS file links. Definitely a browser issue. You'll need to think about consolidating your css requests.
Generally you can do this by concatenating them if they're static files, but if you're generating them programatically, you might have to look at a solution to manipulate the response before it gets passed to the browser.
We had to get around this issue for our enterprise ASP.Net project and ended up writing a "Css Multiplexor" that examined the response, found the requested CSS links, generated a web resource for one big css file, and output a link to that instead.
IE8/9 - Maximum bytes for CSS file
You are right with the file size being the issue (although there is also a maximum amount of selectors IE will parse). Compression won't help beyond the minification you are already doing, but splitting the CSS into two files will solve your problem.
All of the limitations are on a per-file basis. Consider separating out the CSS by feature set and only loading the CSS when needed.
Internet Explorer's CSS rules limits
Referring the following from Microsoft:
- Stylesheet Limits in Internet Explorer
- KB - A webpage that uses CSS styles does not render correctly in Internet Explorer
The rules for IE9 are:
- A sheet may contain up to 4095 selectors (Demo)
- A sheet may @import up to 31 sheets
- @import nesting supports up to 4 levels deep
The rules for IE10 are:
- A sheet may contain up to 65534 selectors
- A sheet may @import up to 4095 sheets
- @import nesting supports up to 4095 levels deep
Testing the 4095 rule by sheet limit
By way of confirmation, I've created a gist with 3 files. One HTML, and two CSS files.
- The first file contains 4096 selectors and means that its final selector doesn't get read in.
- The second file (4095.css) has one less selector, and gets read in, and works perfectly in IE (even though its already read another 4095 selectors from the previous file.
What's the size limit of css file for Internet Explorer?
Maximum number of possible selectors in a CSS file - 4095
http://demos.telerik.com/testcases/4095issues.html
31 stylesheets per file
http://demos.telerik.com/testcases/BrokenTheme.aspx
Does IE9 have a file size limit for CSS?
There are 3 limits:
- a sheet may contain up to 4095 selectors, see
http://demos.telerik.com/testcases/4095issues.html - a sheet may @import up to 31 sheets, see http://demos.telerik.com/testcases/BrokenTheme.aspx
- @import nesting supports up to 4 levels deep
Microsoft support/MSDN reference links:
http://support.microsoft.com/kb/262161
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx
is there any limit on css file size?
I think that if you are having problems with the size of your css files then it is time to rethink your styling strategy. The C in CSS stands for cascading. Quite often when CSS files get too big it is due to styles not being re-used where appropriate and through poor use of the cascading behaviour.
I don't say this lightly. I have worked on some large, complex retail sites and currently on very complicated financial trading applications. Whenever I have come accross sites with more than a few hundred styles, we have achieved large improvements in design, reductions in complexity and improvement of maintainability by reducing css complexity.
One place to start is doing a Google sesarch on css reset. There are multiple different implementations, but they generally follow the theme of overriding the differences in layout for each of the browsers and removing arbitrary borders, margins and padding etc. Starting with a clean slate, if you will. Then you can go ahead and build up your styles from there, being careful to make the most of cascading and css chaining
Chaining is where you have more than one class on an element. eg:
<div class="box right small"></div>
box
might have some general styles that you might like to apply to many block elements such as div, h1...h6, p, ul, li, table, blockquote, pre, form. small
is self explanatory right
might simply be aligned to the right, but with a right padding of 4px. Whatever. The point is that you can have multiple classes per element and build up the styling from reusable building blocks - groupings of individual style settings. Otherwise known as classes.
On a very simple level, look for oportunities to combine styles:
so:
h1 {font-family: tahoma, color:#333333; font-size:1.4em;}
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}
becomes
h1, h2, h3 {font-family: tahoma, color: #333}
h1 {font-size:1.4em;}
h2 {font-size:1.2em;}
h3 {font-size:1.0em;}
Only, slightly smaller, but do this kind of thing lots of times and you can make a difference.
Also, Validate your css. This will help you spot errors in your code.
IE8 / IE9 does not load CSS
The problem you have is due to a limit that IE imposes on the number of stylesheets. IE can only load a maximum of 31 separate CSS files in a single page.
There are plenty of references for this one the web, but here's one from MSDN
This is a hard limit in IE. It is possible to load more CSS files than that by using specific techniques: if you use @import
to load CSS files from inside others, it is possible to import up to 31 files for each of the 31 main CSS files. But it's not an ideal solution.
In general, it's better to reduce the number of files if possible -- each file that loads is a separate HTTP request, and having large numbers of requests can have a significant impact on page load performance.
My suggestion would be to try to combine the large number of CSS files you have into fewer files. This shouldn't be a difficult task, but there may be WP plugins you could use that would do this for you automatically if necessary.
Related Topics
Css Text-Decoration Property Cannot Be Overridden by Child Element
What Does a Star-Preceded Property Mean in Css
Difference Between :First-Child and :First-Of-Type
What Does the Forward Slash Mean in the CSS Font Shorthand
How to Clear the CSS Style "Float"
Svg Animation Is Not Working on Ie11
Why Should We Include Ttf, Eot, Woff, Svg,... in a Font-Face
Any Way to Limit Border Length
How to Change an Input Button Image Using Css
Css Native Variables Not Working in Media Queries
What Has Bigger Priority: Opacity or Z-Index in Browsers
Style ≪Select≫ Element Based on Selected ≪Option≫
Css to Make an Empty Cell'S Border Appear
Disable Antialising When Scaling Images