Internet Explorer 10 Platform Preview 1

I was surprised to read this week that Microsoft is not only working on IE10, but has already published a Platform Preview 1 available for download since April 12th. There’s also a guide for developers available which accompanies IE 10 Platform Preview 1. In this guide you can read about several new features which are going to be supported which are compatible with the W3C Working Draft:

1. Flexible Box (“Flexbox”) Layout, which will allow child element positioning, use unused space within the box and handle resizing and different browser resolutions.
2. Grid Alignment, which will allow to divide a container into rows and columns for better positioning and better handling of screen resolution changes. MS’ people are the ones currently signed on this draft.
3. Multi-column Layout Module, which allows content to be split into columns with a “gap and a rule between them”.
4. Gradients, which allows gradient coloring of the background of graphical elements.

From a preliminary reading of these features and abstracts, it looks like the first three items are targeting not only the web developer’s usual difficulties of supporting different resolutions and browser resizing, but also the dynamic layout of the tablet world which storms upon us all.

With regards to IE10, being used to a slow delivery pace of IE browsers over the years, especially the 5 year gap in between IE6 and the release of IE7, Microsoft finally seem to realize that they have to take the browser development to a rapid pace, and especially compete with Google Chrome’s ultra quick release of their browser updates. Unfortunately my current favorite browser, Firefox, seems to lag behind, at least as far as the version numbering and the buzz involved, but not necessarily in quality. I guess that as long as Firefox maintains the leadership in extensions, or so it seems, it will still find a place amongst IE and Chrome. I’m uncertain however regarding IE’s extensions. I guess that MS has to encourage a developer community to develop more and more extensions in order to compete with Chrome and FF.

Finally – if I had just one wish to ask of Microsoft and IE10, I’d ask that they improve their sluggish Developer Tools, specifically the JavaScript debugger. There are not enough bad words in the dictionary for this utility. It’s performance is terrible when it comes to complex pages, and the debugger is not a match to Firebug or Chrome’s. I was hoping that in IE9 the Developer Tools would be better than in IE8, but I was extremely disappointed. You have to have quite a strong workstation for this or it’s a pain. Therefore I fear that in IE10, Microsoft isn’t planning on improving it and would stick to the “bad old” Developer Tools. I know that it’s supposed to be a major improvement from the Developer Toolbar we had in IE6 and IE7, but it’s so behind the competition. In order to debug JavaScript in IE, I forgo the debugger in the Developer Tools and attach Visual Studio to IE – otherwise it’s simply impossible to debug, even pages which aren’t necessarily loaded with Ajax client code. I must say that the other tabs (e.g. CSS etc.) are also not worthy competition comparing to the alternatives. In short – a major overhaul is required in this area.

All in all, I’m content that Microsoft seems to be taking on this seriously, providing faster and more standard compliant browsers. We, users and developers alike, are only expected to gain from this competition, as long as the different browser manufacturers maintain W3C standards, unlike Microsoft’s earlier browsers.

 

IE9, compatibility mode and the META tag

Note: This post describes how to use the Compatibility META tag correctly in order to force IE9 to switch to an older browser mode. If you’d rather skip the explanation and get to the technical stuff, simply scroll down to the last paragraph.

There are many posts addressing IE compatibility issues. This post from the IE team, back in 2008, also demonstrated how META tags or Http Headers can be used to control Compatibility View in IE8 (now also in IE9). This was supposed to help us developers to overcome compatibility problems without having the user to do anything (well, this was the intention…)

In short, older IE browsers support quite a few “IE only features”. If these were used in your website, they could break if your users upgrade their browser to a newer IE. This might happen because IE is becoming more and more compatible with world-wide standards. In other words, Microsoft is taking out stuff which wasn’t supposed to be there in the first place, and are also making sure that stuff which was supposed to work is actually working the way it was supposed to work in the first place (mainly CSS and rendering issues).

While this is a good and promising direction from Microsoft, this could be bad for your website. For example, if you’re using 3rd party controls which are a year or more older on your web application, these may break as their code was probably written prior to IE9 betas which allowed tests. Upgrading to the latest version of these controls is not always an option as some of these may no longer be supported. Even upgrading your own code may be costly.

Fortunately, the IE team thought of these issues and have provided us with a solution. Those meta tags/headers previously mentioned. According to their blogs and documentation, a developer could specify a meta tag instructing the browser to use a more compatible mode, so that the website will not break. Following the instructions here, you should be able to place the following meta tag in your head section (you can replace the EmulateIE8 with supported values as listed here or here):

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

While this should have solved the now-breaking website – it didn’t. IE9’s Developer Tools (F12) Script tab displayed the following error:

HTML1115: X-UA-Compatible META tag (‘IE=EmulateIE8’) ignored because document mode is already finalized.

Needless to say, this was frustrating. In order to try and figure this out, I have downloaded the IE9 Platform Preview. Basically this is an IE9 browser, which provides two great benefits:

1) It runs side by side to the existing IE browser and does not replace it, as a regular installation would have. So it saves you the trouble of installing a VM machine to test things or simply installing a non-released IE9 instead of your current IE.

2) On the Status Bar of the Platform Preview is easily visible the running Document Mode. While this info is available also in the Developer Tools of IE9 Beta/RC if you do choose to install it, having the status bar display the Document Mode constantly is just plain comfort.

After debugging and creating a new website to test why IE9 fails to switch to IE8, the problem seemed to be the position of the meta tag. It seems like the X-UA-Compatible tag has to be the first tag in the <head> section. If this conclusion is correct, then I believe it is undocumented in Microsoft’s blogs/msdn (and if it is documented, then it isn’t sticking out well enough from the docs). Ensuring that this was the first meta tag in the <head> forced IE9 to switch to IE8 mode successfully, and the website started working again.