Internet Explorer's Compatibility Mode: Has IE Come of Age?
As indicated no so long ago, I am currently working on a new venture with a good friend who is one of the best consultants in the business, and one thing any new venture needs is a website. Naturally our site is powered by Salesforce using sites, and I was having the usual fun and games that inevitably arise in web development due to the plethora of browsers and devices out in the wild.
Being Responsive
This is a bit of an aside, but something I wanted to mention. The site (which will be uncovered soon) has a familiar column based layout, and I wanted to ensure that it works well on all form factors given that three vertical columns are not a great fit for small phone screens which are often held in portrait mode. I stumbled across Twitter Bootstrap and decided to give it a go, and I can't recommend it highly enough; it took no time at all to convert the layout I'd already built to use it, and once I'd done so it was definitely an improvement. The responsive elements are super easy to include and now on small devices the content is displayed in a single column, with certain (more decorative) parts being hidden altogether.
Testing Browsers
For the last few years I've used Macs as my primary machines, with the original switch being driven by necessity as I was developing games for the iPhone, but I did switch to a Windows 8 Phone (Nokia Lumia 920, and I love it) and that was the only device where certain styling aspects were not working correctly, namely CSS 3 features such as drop shadows and gradients.
I recently purchased a Windows 8 convertible tablet, and upon firing up the site on there I realised the issues weren't limited to my phone, it appeared to be IE 10 in general. For a while I was concerned that supporting Internet Explorer was going to be as tiresome as always, but then I realised that a certain page was rendering correctly (via redirected DNS) and seemingly because it was contained within an iframe. Looking at the developer console I quickly noticed that when the page worked in the frame the browser was using its latest browser mode and its new document mode, whereas when the same CSS didn't work it was falling back to using an IE7 compatibility mode.
It turns out that sites served up from a Visualforce domain automatically use this compatibility mode, and in doing so breaks compatibility with the latest and greatest. I did some research into how I could disable this mode and found some meta tags that are supposed to force the browser to using its latest models for rendering, but these simply failed to do anything in my tests.
<!-- This did NOT do anything for me -->
<meta http-equiv="X-UA-Compatible" content="IE=10"/>
StackExchange to the Rescue
Having spent several fruitless hours trying to force the browser out of compatibility mode, I posted a question on StackExchange and received an answer from a friend of mine within minutes. He pointed out that he'd had prior success setting the mode using the page headers from the page controller, so I tried this out and was immediately successful; the page looked perfect both on my new tablet and on my mobile. Although Jeremy's fix was for IE9, thanks to the wiki nature of StackExchange I could update his answer myself to show the final code used for my scenario.
/* The equivalent apex in the controller.
This had to be in the constructor, it
didn't seem to work in the Init action */
Apexpages.currentPage().getHeaders().put('X-UA-Compatible', 'IE=10');
So Has IE Come of Age?
To say such an old browser has come of age might seem a bit odd, but with regards to adhering to standards (rather than trying to define them) I believe it really has turned a corner. What I found interesting about this whole episode was that while Internet Explorer was the browser causing issues (an all too familiar turn of events) this time it was simply because it was being told by the compatibility list maintained by Microsoft that it should be using a render mode compatible with older versions; this is done to ensure that pages that rely on quirks of versions past in order to function correctly. Once that particular hurdle had been leapt I had no problems at all, and that is something that until now has almost never happened in my experience to date.
As long as developers are allowed to look to the future and ignore the older versions of IE they should no longer be forced to endure hours of torment, using browser specific tweaks to make their work appear and function as it should. Perhaps the best bit is that it even renders a CSS transformation correctly that Chrome chooses to ignore! So please, don't force your developers to cater for IE6, 7 or even 8. If using such an outdated browser is part of your standard operating environment mandated by your IT department, then perhaps it is the department you should be reconsidering, as no doubt they'd be also resisting any movements to leverage the power of the cloud.