IE11 document modes and conditional comments

December 27, 2013, 9:39 pm
Author: James Griffiths

While working on re-developing our website we went through testing and, where necessary, tweaking the CSS for the usual round of web browsers, particularly every developer's 'favourite' - Internet Explorer.

Having dropped support for IE8 altogether (we think it sucks and most of our clients have no need to support it) we decided that the decent thing would be to redirect any user visiting the website from that version of IE and lower to an upgrade screen. Courtesy is such a dying art dont'cha know?

Having coded in the conditional comments to detect IE8 and lower for the redirect we pushed the files to the remote server, fired up Windows 7 on VirtualBox, opened up IE11 (thanks for the automatic updates Microsoft) and switched to IE8 Document Mode.

Imagine our surprise when the website didn't redirect to the upgrade screen and instead displayed an un-styled home page (see image below). We double checked the code and compared it with previous websites where we'd implemented the same functionality. No difference whatsoever. Nothing stood out in the HTML or CSS. Scanned through the external JS scripts too and nothing was causing a bug in IE there. WTF?! Front-end development is never made easy when it comes to older versions of IE anyway but this was seriously confusing, not to mention maddening. What the hell was going on with IE8???

IE8 document mode breaks the Saints at Play website in IE11

After some hurried Google searches we finally found the answer and boy was it unexpected.

In IE11, unlike in previous versions (at least to our knowledge and experience), if you choose to view a page in a specific Document Mode, say IE8 for example, conditional comments simply do not work. No, that's not a typo. They simply do NOT work. All those best practice approaches, that developers have adopted and implemented over the years, to target older flavours of IE are just not recognised. That means you CANNOT rely on Document Mode in IE11 to test legacy IE versions.

After spending 3 hours or so trying to hunt down the bug in our code that was causing this issue only to find it was Microsoft's design decision that was causing this to happen did not leave us particularly impressed or pleased. All that wasted time thanks to a corporation that has consistently got it wrong when it comes to getting it right with web standards and development. Not good. Not good at all.

Thankfully Microsoft have provided a solution to this particular dilemma in the form of downloadable instances of each IE version for Windows XP through to 8 for virtualisation tools such as VirtualBox or Parallels. The download and installation of these can take a little time (depending on the speed and capacity of your network connection) but that's nothing to really complain about when they're being offered for free.

After setting up various installations in VirtualBox we fired up the IE8 instance (native NOT in Document Mode from any newer version of IE) and were more than relieved to find our code was working and rendering exactly as expected (see following image)! After all those unnecessary headaches and WTF expletive-laden moments we were finally able to close the door on that sordid little chapter.

Native IE8 rendering of the Saints at Play website upgrade screen

The moral of this story? Test natively when it comes to IE and do NOT rely on Document Mode to view legacy versions of the same browser.

Categories

« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.