Friday, November 11, 2011

A website compatible with all IE versions - X-UA-Compatibility

Before HTML5 Boilerplate (H5BP), we created separate CSS files for IE7, IE8, IE9, IE10, IE11, IE12,.............. IE1000. This was the only way to develop websites compatible with all IE versions. With the help of H5BP we saved some numbers of CSS files and server requests. As we defined CSS classes -

.ie7 .classname{....}
.ie8 .classname{....}

H5BP has made our life way better with normlizing CSS and helper classes.

Now, for the sake of endless IE versions and its compatibilities, we can use <meta http-equiv="X-UA-Compatible" content="IE=7"> or content="IE=8". This line of code tells every new version of IE to render our website using defined rendering content e.g. IE7 or IE8 or IE9.

The website will render all pages without any issues in newer versions of IE. And we don't have to make extra efforts for fixing UI in all IE versions. Because, it is fixed in one version of IE, and the X-UA-Compatibility is telling all new versions of IE to render pages using the defined rendering content.

Ah! What a relief!

Hang on! Some expert may comment about latest features included in newer versions of IE. My website won’t support those features because I am rendering it using the older browser rendering engine. What about that? The answer to this question would be - we use jQuery, JavaScript, tricks, and fixes for the features that are not supported in IE7/IE8/IE9. This will continue until the death of IE9, because IE9 doesn't have much support to CSS3 and HTML5.

Considering the death of IE6, I am very sure that it will take more than a decade for the death of IE9. Till then we can surely use fixed compatibility mode. No client is gonna spare us from ignoring his website compatible with at least IE9.

At the end, if we check IE9, it is not a very great version of IE. It's very close to IE7.