Fellow Pub Standards coder Matt Bee recently ranted about IE on Twitter (one of the many good things Twitter is for):
IE won't style owt if more than 31 stylesheets are loaded, but does IE8 really only style up to 24 and then stop? #fuckingbastardofacuntIE
— Matt Bee (@mattbee) September 8, 2010
It reminded me that I’d asked him about this before: why on earth would you want to load >31 stylesheets? Apparently this is the fault of the Drupal CMS which attaches CSS to individual modules. Personally, if I was going beyond a dozen stylesheets, I’d seriously consider inline style at that point. Too many small files are an admin headache, and if you’re building tiny modules, then it might well be best to keep the styles with the HTML.
However, I grant that this problem exists, and that you could be put in a situation where it couldn’t be helped. For the sake of argument, you’re not using the CMS’s built-in CSS compiler because of the compile-time lag, and you’re not using Minify (which is really quick), because you don’t want to keep updating the CSS list, or something.
Either way, what you want is a workaround for the limit.
This doesn’t sound like a particularly hard problem, especially if you know the secret of IE: you can use @import statements in your stylesheets to import more. Each ‘document’ will only accept up to 32, so you have to group your stylesheets into groups of 32, and then import them.
So, first up, let’s insert our script. I can imagine that all our CSS files are neatly loaded in the head of the document, and if that’s true, I can just add the script as the last line of the head, without needing to worry about any onload events:
Notice how I’ve also put it in Conditional Comments, so other browsers won’t be bothered.
It’s possible that your CSS isn’t in the head. If you’re associating the CSS with individual modules, and your CMS isn’t smart enough to group them all in the head, you might have stylesheet elements scattered throughout the document. In this case, we can place the script link in the same way as before, but we’ll add the defer attribute, so it only gets executed when the page loads. Note that this could confuse your page load order, so you could get some funny effects if you have other onload events relying on existing CSS styles.
Ok, we’re now loading a script. I guess we’d better write it.
What we want to do is rip all the link elements out of the document, and then re-import them using the @import trick from above.
First, let’s declare some variables.
// a constant used to group stylesheets. Twenty seems safe
var MAX_STYLESHEETS = 20;
// get all the link elements in the document
var links = document.getElementsByTagName(‘LINK’);
// a set of stylesheet URLs that we later want to import
var linkurls = ;
We’ll copy those links straight into an array. Otherwise when we removed stylesheets, the set will be reordered.
// copy those links into an array
var linkarr = ;
for (var i=0;i