CSS Sheet Limit in Internet Explorer?

The Issue

I have recently come across an issue that is both annoying and hard to detect. Let me give you a little background, I was testing my visual web part in a SharePoint standard farm. Part of my visual web part is that it has its own CSS file used only for the web part and only gets loaded on the screen if the web part is present on the web page.

While testing, I noticed the formatting was completely off on my web part. I quickly looked at developer tools to see what the issue was. It turns out that my CSS was not getting loaded on the page. I next went to Firefox to see if the same issue was there and sure enough, Firefox works great!

The takeaway?

It turns out there is a CSS sheet limit of 31 in Internet Explorer 6-9. The frustrating thing is that the browser doesn’t inform the developer/end user that it is ignoring additional CSS files on purpose. This is something built into the browser. So if you are heavily dependent on Internet Explorer in your organization, you should either put additional CSS styles into an existing style sheet or combine existing ones together. Chances are if the environment has this many CSS files, then the environment is probably not best utilizing performance. In regards to best practice, try to limit the number of CSS files. By the way, it looks like IE 10 is increasing this threshold by a lot.

Below is a good link that explains the specifications even more. Happy coding.


Tagged with: , ,
Posted in CSS
One comment on “CSS Sheet Limit in Internet Explorer?
  1. Thanks alot dude! I’ve had exactly the same issue!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: