Recently, a client of mine complained that certain css files included in his webpage do not load in Internet Explorer. I took a look at his code and noticed that he had tried to register more than 40 external stylesheets in the <head>...</head> section of his webpage, which reminded me of a less known limitation in Internet Explorer. Some people call it a bug, but I prefer calling it a rational limitation, and here it goes:
The max number of external CSS files that can be loaded in a single webpage via the <link /> tag, or included via the @import url directive is 32. Any css file beyond this limit will not be parsed.
And yet another limitation, which is even less known – the max filesize of an external stylesheet that can be loaded by Internet Explorer should not exceed 288Kb.
These are not fixed in Internet Explorer 7 and 8 beta, and this gives me a reason to believe that IE developers are well aware of this, and such limitation is not a bug at all, but as I mentioned before - a rational limitation, as things in web development should be within reasonable limits.
So, please, please, avoid including that many files and keep the size of your stylesheets within a reasonable and maintainable length and size. The “cascading” in Cascading Style Sheets delivers all that is necessary to write reusable, scalable, maintanable and beautiful code.
Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library
It’s amazing how many bugs like this IE has. What’s more amazing is that they still haven’t fixed it!!! Intentionally breaking a browser by including a bug is bad, no matter what the reason. Let’s hope it was not intentional. Introducing bugs to encourage certain web practices (which silently fail!!!) is never justified.
Thanks for the page, it helped me in my moment of “Am I going crazy here?”