Shmeeps.org

Here’s an interesting one for the day that may hopefully give another reason for people no to use Internet Explorer, or if they do to always use the most up to date version.

Our University requires that we support legacy versions of web browsers, as there are still many a user who are running Internet Explorer 6 on Windows XP. *Sigh* In order to do so, we rely on forcing users to install the Chrome Frame Plugin if their browser is woefully out of date, meaning that they are running Internet Explorer 6, 7, or 8. We “fully” support version 9 (while trying to emphasize why users should at least update to 10 if they are going to continue to use Internet Explorer) and fully support version 10 as well, as it is at least acceptable standards compliant. Since the older browsers are now running Chrome under the hood and the newer browsers are workable, we don’t usually have many compatibility issues between developing the website for Chrome and users using the website on any version of Internet Explorer.

We ran into a fun error a month or so ago where users using Internet Explorer 9 would be presented with a page that looked nothing like what they did in other browsers, looking instead like an MS-Paint imitation version of what we’d actually designed. From the looks of it, it looked like there were random CSS styles that just didn’t apply to the page. in general, the styles applied stayed the same, meaning that the browser wasn’t just loading random styles every page load, it was loading them in order and then failing. We traced this throughout the file and found that they stopped applying about 3/4 of the way through the style sheet. In addition, we could move styles to the top of sheet to force them to apply, which would then remove a different rule. Clearly, there was a hard limit applied here.

We did a bit of research and found an answer. Basically, what’s happening is simple, and incredibly stupid. Internet Explorer version 9 and below (thankfully 10 isn’t included) limit the amount of CSS files and selectors that can be used on a page. Any page can have a maximum of 31 CSS files (no problem there), and each file can only have a maximum of 4095 selectors. In addition, any file has roughly a 288kB file size limit.

While these limits may seem large, and they may have been when Internet Explorer 9 was first released, they can quickly be reached without one realizing it. The main core of our theme, as is the case with many websites today, is Bootstrap. Bootstrap is an excellent example of how quickly these limits can be reached: it is currently 97.2kB minified with over 1400 selectors. That’s 1/3 of the total selectors for one file, and about 1/3 of the file size allowed as well. In addition, we use various other libraries with CSS in our website, such as Font Awesome and more, and that doesn’t even count the tons of extra CSS we’ve written for our website to not look like a standard Bootstrap website and provide styles for all of our components and what not.

If we had done all of the above alone and included them as separate CSS files, it may have been fine, but we had one more attribute to our pages that created this perfect storm. As part of following various best practices in web development, we always try to reduce the number of HTTP requests needed to load a page. One of the major ways we do this is by combining our CSS files into one large file on build which is used on every page. Basically, Bootstrap, other 3rd party libraries, and all of our custom CSS was compiling into one file to be loaded once and then used throughout the entire website.

Now thankfully, as we force Chrome Frame for Internet Explorer versions 6, 7, and 8, those weren’t affected. Additionally, version 10 doesn’t suffer from this error, leaving only version 9. Unfortunately, we weren’t permitted to force Chrome Frame for version 9, as it was considered “up-to-date” by our office of Information Technology, so our website had to support it out of the box without any additional software. So how did we solve it? Simple, in our build, it simply cuts the generated style sheet in half and includes them as stylesheet1.css and stylesheet2.css.

At some point, we may need to cut it into 3 separate files. I’m hoping at that time that Internet Explorer version 9 will be long gone.