Internet Explorer CSS Limits and Workarounds

When it comes to making the Webpages Cross browser compatible; all of the Front Developers’ pain comes up with Internet Explorer(IE) 7 and 8. And believe me, if you have IE11 and you can emulate it to IE7 and IE8; it doesn’t work out properly until you test webpages in these browsers.

Testing webpages on IE is comfortable with BrowserStack and Remote IE. Though I will be discussing about the CSS Limitation in IE7 and IE8. These limitations are listed on Web so many times, but to reach those pages, it took some time for me, so thought to share it again and provide some workarounds for this.

As stated exactly on the KB article from Microsoft:

• All style tags after the first 31 style tags are not applied.
• All style rules after the first 4,095 rules are not applied.
• On pages that uses the @import rule to continuously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

All style tags after the first 31 style tags are not applied

After counting first 31 of <link rel="stylesheet" /> and <style></style> on a webpage, remaining of these will be ignored

All style rules after the first 4,095 rules are not applied

All the rules; i.e. color: #ccc;; after the total of 4095 rules will be ignored in a CSS file.

Style sheets that are more than three levels deep are ignored

If the stylesheets are added to page with the @import rule of CSS, it should be mx 3 levels deep. Any CSS included below that level will be ignored.

Consider style1.css to style6.css; only style1.css is included in page by link tag and rest of them are added by @import rule as style1.css imports style2.css, style2.css imports style3.css and so on.

So in this scenario, style2 is at first level, style3 at second, style4 at third and so on. So as per this limit, style5 and style6 will be ignored

To avoid such errors, you can do following code to count CSS Rules in all files:

You can run these in chrome’s console or Firefox's console to see of you are in valid limit.

If you are crossing the limits, you can automate the split of files with bless tasks in your task runners.

If you are using grunt, you can process the last output with grunt-bless and if you are using gulp, you can pipe the final output through the gulp-bless to auto split the files.

If you come across any other issue in IE, do let us know in comments and we will try to find a workaround for the issue.