Fixing long CSS files for Internet Explorer 9’s 4095 row limit

Miranda Singler • 4/28/2017

Resolving the CSS selector limit in Internet Explorer 9

If a CSS stylesheet has more than 4095 rows (selectors), IE9 will ignore any rows beyond that. Automatically splitting the CSS file for IE9 is a simple fix to resolve this issue.

IE9’s issue with long CSS files

Earlier this week I encountered an interesting bug in IE9. While testing an HTML prototype, I noticed that IE9 was not loading all of the styles from the CSS file, specifically the styles that fall near the end of the CSS file. After comparing the output styles between IE9 and other modern browsers, I confirmed that IE9 was indeed not reading all of the styles from the core CSS. A brief internet search entailed, and I learned that IE9 has a 4095 rule limit for CSS files. This means that if your CSS exceeds 4095 rules, then IE9 will read all of the CSS up to that 4095 point, then simply ignore the rest. Why does this happen? According to Eric Law from Microsoft, “Internet Explorer uses a 32bit integer to identify, sort, and apply the cascading rules” which limits the number of rules per style sheet.

Using CSS Preprocessors

We use the CSS preprocessor LESS to compile multiple Less files to create a master CSS file. Compiling Bootstrap, custom styles, and libraries into a single master CSS file can lead to a lengthy CSS file. While this works for most web browsers, in IE9 we have to have a work around for the 4095 rule limit.

Splitting long CSS files for IE9

Since we’re using Grunt to compile all of the CSS, I used a grunt plugin to split the output CSS file into 2 files just for IE9. Then in the head file of the HTML, I wrote a conditional, telling IE9 to ignore the master CSS, and read the two split CSS files (each having no more than 4095 rules or selectors).

There are multiple Grunt plugins you can use to automatically split up your CSS for IE9, making it a pretty simple bug to fix in the end. Here are a few grunt plugins that you can use to help split your CSS file:

More Info

For additional resources and background on this issue, please see:

Miranda Singler

Miranda is a designer with 5 years of experience in facilitating business communications through clear design solutions partnered with engaging visuals. She loves brainstorming and iterating to develop intelligent visual storytelling that enhance and humanize technical communications.

Explore topics:

Other Blog Posts from Miranda Singler