How IE 9 and below calculate the 4,095 CSS limit

At Zoosk we push for a feature-rich experience for our users and explore new technologies for our development. At the same time we support audiences using legacy means to access our products. One of the challenges of expanding our services, and as a result our codebase, is avoiding the Internet Explorer 4,095 CSS limit. This limit occurs in IE9 and below and applies to a per-stylesheet basis. These IE versions ignore styles after a threshold in what the development community interchangeably refers to as a selector limit or rule limit. But each means different things. Selectors in a stylesheet can include all element identifiers, such as HTML tags, IDs, and classes. Rules, or rule sets, define an element’s style by pairing a selector with a declaration block. A declaration block further includes properties, such as font-family, and their values.

In the following rule, there are three individual selectors grouped to create a more specific combined selector:

As far as IE is concerned, do “body-col,” “nav,” and “nav-items” count as a total of three selectors toward this limit? No. In the following example, however, there are comma-separated selectors and selector groups, and in total they count as four toward the limit.

In “Stylesheet Limits in Internet Explorer” posted on the Microsoft Developer Network blog, author Eric Law states that for style blocks such as the second example above, IE duplicates rule sets for each comma-separated selector and selector group. As a result IE sees our one rule set as

Testing how IE counts selectors

In the second set, the HTML file has 4,096 divs. In the CSS file, the 4,094th rule set has three simple selectors (no commas) like our first example above. The total of all individual selectors in this file exceeds 4,095. However, viewing its associated HTML file in IE shows that the browser applies styles to the 4,095th div and not the 4,096th div. Thus for IE the limitation is one of rule sets, each associated with a selector or selector group, and not total individual selectors.

Working around the limit

If you hit the limit and refactoring your code is not a good option, you should break up your styles into separate files. Each should contain styles that address a certain purpose, such as typography, structure, or specific features. This will also make maintenance easier. Each new stylesheet will make an HTTP request, and if you have many files, this is unfortunate for browsers without the limit. However a CSS pre-processor such as SASS is helpful in this situation. SASS, which streamlines coding with its extended CSS syntax, can compile multiple .scss or .sass files into one .css stylesheet. At Zoosk we take advantage of this capability for modern browsers while programmatically serving multiple stylesheets to IE versions 9 and older to avoid the limit. The SASS website has examples of its features if you are unfamiliar with it.

The IE CSS limit can pose a challenge for developers, even as newer browser versions are released. This year’s third quarter numbers revealed that our desktop site saw a significant amount of traffic in IE 9; therefore, it makes sense to support those users. With the help of separated stylesheets and CSS preprocessors like SASS, we can still provide our product to a wide range of users.