Internet Explorer imposes a maximum limit of 32 individual styleSheet.
- Hello everyone,
I have a rich web page which has more than 32 CSS files imported in my .aspx page. It works fine and shows all the CSS effects in firefox / IE +windows XP. However it does not works in IE + vista. CSS files were ignored after 32 count and CSS after 32 counts were ignored.
I have googled for the problem and find some of the blogs that were telling this as a IE limitations Internet Explorer restricts you to a maximum of 32 @import statements in your CSS file."
See below forum
http://www.agum.com/web/2008/03/11/internet-explorer-issue-maximum-of-32-css-import/
http://joshua.perina.com/africa/gambia/fajara/post/2008/1/25/internet-explorer-css-file-size-limit
Any help?
所有回覆
Hi there,
You are correct; there is a limit of 31 CSS files in a given page. If you need more, use multiple pages to import them. For example, if you need 60 CSS files, create one file to import the first 30 and a second file to import the next 30.
You may also want to take another look at the design of your site and ask yourself why you need so many CSS files. After all, each import requires a certain amount of time to load. It's worth thinking about, at any rate.
In any event, I hope this helps...
-- Lance
- While I am developing my site I am using ~40 CSS files to clearly partition the CSS used by the different pages and controls; I find this very helpful and believe it to be a legitimate -- nay, wise -- use of such a number.
You may want to take another look at the design of your web browser and ask why it is silently breaking standards-compliant web sites; after all, each bug takes a certain amount of time to fix. It's worth thinking about, at any rate. Is there a performance issue being addressed by the 31 import limit?
Regards,
Alex Hi Alex,
Thanks for your feedback. I can't speak to the specific logic behind any given design decision; however, you should be able to load each of your stylesheets if you load them in groups. (This may help mitigate the performance hit of 40 separate HTTP requests, though I can't swear to that without trying it myself).
In any event, I'll forward your feedback to the product team and we'll see what happens. For best visibility, please consider posting your concerns to the Internet Explorer Beta newsgroup, which is actively seeking feedback for IE8 Beta 2.
Hope this helps...
-- Lance
- That's 40 requests your users have to make to view each page. That's a bunch of extra data your servers have to serve up. You may want to consider only doing that during development and merging them into a single file when you publish.
Lance, thanks for forwarding on my feedback. I will consider posting in the IE8 beta forum. I'm not entirely sure I know what you mean by loading my stylesheets in groups; do you mean hiding print, screenreader etc. stylesheets for regular requests?
jeffdav, of course I intend to merge the files when the site is published. However, you would be surprised how low the performance impact is as measured during testing; also, there is almost no impact after the first page load, as everything is set to be cached.
Regards,
Alex
Alex,
By "loading your stylesheets in groups," I mean creating separate stylesheets to load groups of your current stylesheets. You mentioned 40 stylesheets in your original message. To load them in groups, you might create a group1 stylesheet to load the first 20 and a group2 stylesheet to load the other 20.
The limitation is 31 load reqeusts per stylesheet. So, there is an an upper limit, but it's larger than 31. i wouldn't try testing the upper limit, though, I'm fairly certain you'd notice a performance impact. :-)
Hope this helps...
-- Lance
I am using IE8 and the developer tools that come with it.
Couple issues with this.
1. There needs to be an error message when CSS files are ignored for being over the limit. Just failing to load them and not saying anything is a pain.
2. There ought to be an optional override that a developer like myself can set to allow unlimited css includes for development and debugging purposes.
I'm authoring a site, and I use separate css files for every component during debug. Before pushing to release, I merge all css files into one big compressed file. Every browser works fine, but now I have problems with IE. It wasted 4 of my hours just to figure out the problem since IE silently ignores the includes without so much as a warning.
-Kris- (Warning... incoming rant)
Um, does anyone else think that this 31 CSS file limit is effing RETARDED? Congratulations, Microsoft -- I honestly didn't think I could hate IE any more than I did before this cluster. Wow. I mean seriously? Let people screw their sites up with unnecessarily long lists of CSS files if they want -- it's better than breaking the site all together by not loading loading them, right?
Funny, Firefox doesn't have this issue. - Why this is limited it to 31? why not 30, 29, 28 ... If 32 CSS files are bad for a page then definitely 31 is also bad. I can't understand, how an MS developer can write such a ridiculous logic. I just lost my 3/4 hours for this issue. And I'm sure many drupal programmers face this problem and lose their valuable time.
- This really is really a bogus and silly limitation that needs to be changed.
- Hi Hiren,As you've mention in your post, it is a know issue that IE has a limit of 32 stylesheets per CSS file.It is a great idea to have multiple stylesheets for easy development and maintenance.But it is not a great idea to serve multiple stylesheets to the user in the production site, as there is a limit on number of simultaneous HTTP connections that a browser can make to a single domain. The numbers are,
Browser No. of simultaneous connections IE 6 & 7 2 IE 8 6 Firefox 2 2 Firefox 3+ 6 Opera 9.26+ 4 Safari 3+ 4
Which means your site's user has to wait for a long time for all the stylesheets, plus the images and javascript files to be downloaded.It's better and a good practice to combine stylesheets into one file, either everything or grouping them together (eg. page based, module based etc.) so that your site's pages load faster and the user's experience gets better.
