Technology??A site for testing the new tools I'm building, and a little talk about what I'm learning on the way. |
Internet Explorer CSS File Size LimitFriday, January 25, 2008
Today I encountered a problem where in IE7 and IE6 it appeared as if some parts of my CSS style was not loading. I tracked the problem down to what appears to be a file size limit of ~288kb for .css files. In IE only the first 288kb in a file will be read and processed. Any CSS after 288kb will be ignored. In this particular case I was loaded a CSS file of 347kb. Firefox does not seem to have a limit. The limit appears to be a "per file" limit. You can split the CSS into two files and it will work fine. You may be asking yourself, why would you ever have a CSS file which is 347kb? Good question... but we use a large file size in our site design application at http://rhythmwebdesign.com The CSS ends up being gzipped and is only 35kb when you download it when loading the designer.
CommentsThere are 7 comments - add your comment Ops!! That does not sound very good for us. But am am sure you'll find a way around it. PlNG - Long Island, New York - Thursday, June 12, 2008 11:59 AM I went to try and test this, and I must have done it wrong.
Yet my test yielded yet a different but still important result, so it seems I have encountered yet a third limitation to CSS in IE (first one I read about on the web was @import being 32 max declarations per sheet and nested 3 deep max, 2nd is this one). I'm not sure if this is specific to the situation, but it seems like IE will only allow a selector to be declared 4096 times (or 1024*4) I did the test by declaring "#i{color:#000000;}" and incrementing color by 20 for each line to account for each character / byte [Windows CRLF is 2 characters]. I then made a test element with the same ID on the test page, and placed an onload alert event pointing to a function that returns document.getElementById("i").currentStyle.color; Thinking about this while I typed this comment, my stylesheet is extremely sparse and hits 80k. Perhaps you too hit the 4096 declarations limit? Marco J Rossi - Manila, Philippines - Wednesday, July 09, 2008 11:30 PM I agree. I read in the MSDN website that when adding CSS rules in a style object by JavaScript, after the 4096th rule, Internet Explorer will display and exception error and the should-be-added rule will not be added. I think that is the reason why some web developers thought that there is a file size limit on a CSS file -- I would rather test later with more than 300k CSS file and just about a hundred rules, so that I could find out if there is no really a file size limit in a CSS file. Furthermore, I had just tested having more than 32 styles in a web page and have it viewed in IE; only the first 32 are processed by the browser. The rest are ignored. So is the @import. Firefox and other browsers do not have such limits. That's why I hate Internet Explorer. I love Firefox (hope this is not a spam). Purple Scissor - North America, World - Saturday, August 15, 2009 10:34 PM I have been having trouble where the CSS is fine and works in FireFox, but when changed does not work in IE8 (I was taking styles out of the page and putting them in a css file). But renaming the file on the hard drive, then naming it back to the original caused it to work in IE. This seemed to be a problem where even deleting the cache, using f5, and rebooting did not work, but making the file appear different did. Jesus - Antarctica, World - Thursday, August 20, 2009 1:18 PM *#&@ you and your IE Joshua Perina - Edmonton, Alberta - Thursday, October 01, 2009 10:05 PM Hey "Jesus", see my other post entitled Chrome - It really is a better browser. Joe Gakenheimer - Ohio, United States - Saturday, May 01, 2010 2:53 AM There is no reason to have such a large CSS document, unless you like to type a lot and like to have contradicting style attributes. I typically have a base file, with structural information, a general style across the entire site, then individual css files for each HTML document - sometimes reusing other CSS documents from other pages. This makes my CSS scalable and manageable and easy to find things.
|
 |
