IE8 Rendering Modes theory and practice

Many web-developers moan about the Rendering Modes switch that’s been introduced in IE8. I’ve got some thoughts on this.

Rendering modes switches history

As you may know, IE5 on Mac (followed by IE6 on Windows) introduced Quirks and Standards compliancy modes with a DOCTYPE switcher. All other browsers followed the move and introduced similar approach – they tried to mimic IE behaviour in quirks mode and tried supporting CSS as close to the W3C standard as they could.

DOCTYPE switch approach was really straight forward – if you put a valid DOCTYPE for your HTML page, browser switches to the standards compliancy mode; if DOCTYPE is omitted, quirks mode is used.

This switch was required because many sites were built at the time when even CSS1 was a draft, and for browsers to evolve safely (and add newer standards’ support) without breaking the existing web these old websites were to be rendered properly.

At the time the idea of using DOCTYPE as a rendering mode switcher was fine – almost all pages that had been built without standards support in mind didn’t have DOCTYPE. And if developers wanted to use modern standards, they added HTML or XHTML DOCTYPE and the page was rendered using standard-compliant parser.

Quirks mode and DOCTYPE switch locked old web with old rendering engine, IE5 engine.

I’m not wrong – after IE4 won first browsers war (BW I) nearly all sites were built for IE4 and IE5 only, so all other browsers had nothing to do but copy IE5 behaviour.

It’s important to note that DOCTYPE can only toggle standards compliancy on and off.

Therefore DOCTYPE switch only solves backwards compatibility issue and does nothing to prevent future compatibility issues.

When developers started using DOCTYPE switch, IE6 was a major browser and all the sites were build around its CSS support level. So when IE7 was shipped, it had better support for CSS2.1 but had the same DOCTYPE rendering modes switch.

That’s why many of these websites had rendering issues and had to fix CSS/JS for IE7 specifically. Conditional comments and conditional compilation came to rescue. However, with XP SP3 update IE6 started showing @jscript_version equal to that of IE7 and conditional compilation became pretty useless.

In IE7 old web-sites in quirks mode continued being rendered by IE5 rendering engine, and standards compliancy engine was just an updated version of IE6 standards compliancy rendering engine with some bugs fixed. And while IE7 was a minor update to IE6 but still caused so much trouble, one could imagine what IE8 with proper CSS2.1 support would do to websites. Basically, all the websites with DOCTYPES that were just fixed for IE7 Standards Compliancy mode would break in IE8 again.

Other browsers didn’t have a similar problem, and there’re many reasons to this. First of all, by the time when first IE7 beta was shipped, other browsers had really insignificant market share (so their developers could change anything and wouldn’t be blamed for “breaking the web”), were updated really often and were mostly installed by IT-related people who knew how to update the browser. So DOCTYPE rendering switch was and still is fine for non-IE browsers.

And Microsoft had to solve interesting problem in IE8 – support CSS2.1, support IE7 standards compliancy mode and support IE5 quirks mode. But DOCTYPE can only toggle standards compliancy on or off! They couldn’t drop support for very old but still existing sites build in quirks mode, couldn’t drop IE6 and IE7 support, and couldn’t leave IE8 without proper CSS2.1 support.

So we see that if any browser is locked at some version and this version gains noticeable market share, DOCTYPE switching will not work as vendors will have to choose what to support – older sites or newer features.

And Microsoft found a way – they gave web-developers and users a way to control in which mode sites are rendered.

IE8 Rendering Modes Theory

In IE8 there’re 6 rendering modes:

• “Edge” Standard compliancy mode
• IE8 Standards mode
• “Emulate IE8” mode
• IE7 Standards mode
• “Emulate IE7” mode
• IE5 – Quirks mode

Edge Standard compliancy mode basically tells the browser that it should use the most recent rendering mode – in IE8 it’s “IE8 Standards mode”, in IE9 it will hopefully be “IE9 Standards mode”.

IE8 Standards mode makes browser render a page using IE8 standards compliancy parser and renderer.

Emulate IE8 – DOCTYPE switch will be used to determine whether to use IE8 Standards compliancy mode or IE5 Mode.

IE7 Standards mode

makes browser render a page using IE7 Standards compliancy parser and renderer.

Emulate IE7 – DOCTYPE switch will be used to determine whether to use IE7 Standards compliancy mode or IE5 Mode. If you have a site that’s been built with IE7 Standards compliant mode support and you don’t want to change anything there, just add this META tag or HTTP header and IE8 (and all future versions of IE) will emulate IE7 behaviour, i.e. use IE7 Standards Compliant renderer when DOCTYPE is present and use IE5 mode when there’s no DOCTYPE. So you virtually “lock” your website to a current browser version behaviour. “Emulate IE7 mode” even sets User Agent string to IE7 string and report Version Vector as IE7 (so conditional comments will be evaluated as for IE7).

IE5 Mode – basically, it’s Quirks Mode. If we compare this to DOCTYPE switch approach, Edge mode is similar to a mode when DOCTYPE is set, and IE5 mode – to a mode when DOCTYPE is not present.

To explain modes in more details, I need to show how they are applied.

IE8 Rendering Modes Practice

As I’ve shown above, the whole idea of using DOCTYPE as a rendering mode switch failed because there were more than two types of documents on the web – those that should work in quirks mode, those that should work in IE7 standards mode, those that should work in IE8 standards compliancy mode and those that should work even with future versions of IE. So instead of two types we have three and a half :)

To give a proper way to control this, Microsoft and WaSP invented X-UA-Compatible http header, so you can either configure your server to send this header with corresponding value or add it as META HTTP-EQUIV to your page. For example:

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

This declaration will tell IE8 to toggle IE8 Standards compliancy mode to render the page.

Here’s a list of modes:

Rendering mode	X-UA-Compatible value
Edge Standard compliancy	IE=edge
IE8 Standards compliancy	IE=8
IE8 Emulation	IE=EmulateIE8
IE7 Standards compliancy	IE=7
IE7 Emulation	IE=EmulateIE7
IE5 Quirks	IE=5

 

IE8 Rendering Modes Switches Priority

First and main rule – if you specify X-UA-Compatible header or meta tag, IE8 will use the rendering engine you set.

If it’s EmulateIE7, DOCTYPE switch will be used to determine whether to use IE7 Standards mode or IE5 Quirks mode. See test case with DTD and without DTD.

If it’s EmulateIE8, DOCTYPE switch will be used to determine if it should use IE8 Standards mode or IE5 Quirks mode. See test case with DTD and without DTD.

If it’s IE=8, IE8 Standards Compliancy mode will be used regardless of presence or absence of DOCTYPE. See test case with DTD and without DTD.

If it’s IE=7, IE7 Standards Compliancy mode will be used regardless of presence or absence of DOCTYPE. See test case with DTD and without DTD.

If it’s IE=5, IE5 Quirks mode is used even if there is a DOCTYPE (actually it didn’t matter for IE5 if there was DOCTYPE or not – quirks mode was the only mode it had). See test case.

If it’s Edge, most modern rendering engine is used. For example, IE8 uses IE=8 mode regardless if there’s a DOCTYPE or not and IE9 will use IE=9. See test case with DTD and without DTD.

It’s worthy to note that X-UA-Compatible META overwrites X-UA-Compatible HTTP header, so you can set X-UA-Compatible HTTP header for the whole website and then have X-UA-Compatible META with a different value on some pages.

If website doesn’t have X-UA-Compatible META tag or HTTP header, IE8 uses EmulateIE8 mode i.e. DOCTYPE is used to switch between IE8 standards compliancy mode and IE5 Quirks mode.

This means that everybody needs to add to add X-UA-Compatible header or META to their websites.

Accepting the fact that web-developers wouldn’t update all the websites that were built around IE6/IE7 standards compliancy mode, Microsoft decision to take standards compliancy mode as a default would certainly “break the web”.

So Microsoft had to find a way around this which they successfully did by introducing a bunch of Compatibility View settings.

Compatibility View

As I’ve already said, when developer didn’t care about adding X-UA-Compatible header or META, IE8 works in EmulateIE8 mode and uses DOCTYPE switch to determine which rendering mode to use. If the site hasn’t got a DOCTYPE set, IE5 Quirks mode will be used, so backwards compatibility is not an issue. But if there’s a DOCTYPE, which Standards compliant mode to use? IE7? IE8? IE9 Standards Compliancy mode when IE9 it’s shipped? There’s no automatic way to choose.

And as IE8 Standards mode is a default one, there might be issues on sites that only supported IE6/IE7 Standard modes. Apparently, only user can see if the site he’s viewing has rendering issues. And Microsoft gave users an easy way to switch back to IE7 Standards Compliancy mode if required by clicking on a Compatibility View button (located to the left of refresh button).

IE8 will switch to EmulateIE7 mode and save the setting for the domain so all the pages from this domain will be rendered using IE7 engine.

Compatibility View button is shown only when X-UA-Compatible HTTP header or META is not set.

Also during IE8 install a user can specify if he wants to use Compatibility View List feature. Basically, when this feature is turned and user clicks Compatibility View button while browsing, IE8 reports to Microsoft that the website on this domain required user to press the Compatibility View button.

If statistics show that users tend to press Compatibility View button for the site, it’s included in iecompatdata.xml file which fresh copy is distributed with Windows Update. It can be viewed by typing res://iecompat.dll/iecompatdata.xml into the address bar.

So when Compatibility View List feature is enabled and there’s no X-UA-Compatible HTTP header or META, and DOCTYPE is present, IE8 will look if the site is in the res://iecompat.dll/iecompatdata.xml file and make Compatibility View button pressed by default.

As soon as the site gets X-UA-Compatible header or META tag, IE8 will use the rendering mode from its value and won’t even check Compatibility View List and also Compatibility View button won’t show at all.

Local Intranet security zone

Intranet differs from Internet a lot.

If Compatibility View List feature will work fine for public internet websites, Intranet sites should not be reported anywhere. So what rendering engine to use when there’s no X-UA-Compatible value and DOCTYPE is present? IE7 Standards Compliancy? IE8 Standards Compliancy?

Intranet a controlled environment where to decrease support costs IT pros usually set everybody with same set of software. As most successful companies use Microsoft technologies as a core of their IT infrastructure and because only IE has been providing a decent platform for building powerful intranet web applications, IE was always a de-facto standard browser in companies.

Many intranet web applications were targeting IE5.5/6.0 and nobody cared to refactor to get standards compliancy – why bother if there was always only one browser supporting a well-known list of technologies so cross-browser interoperability was never an issue? We can argue if this approach is good or not – but IE8 team had thousands of intranet applications they had to support. That’s why compatibility view was the only option for sites from Local Intranet security zone.

If the site is in the Local Intranet zone and there’s no X-UA-Compatible header or meta tag, DOCTYPE switch is used to determine which rendering engine to take – IE7 Standards compliancy or IE5 quirks mode.

If there’s no X-UA-Compatible value and site is in Local Intranet security zone, it will be rendered in EmulateIE7 mode by default.

Compatibility View button is not displayed at all.

But as soon as a developer adds X-UA-Compatible header or META, site will start working in the specified mode.

Developer Tools

With great set of developer tools that Microsoft provided for IE8 you can also view what rendering is being used and change it if required. This is useful for developers only and overrides any other settings. It’s very useful for testing – you don’t need IE7 in a virtual machine to test how a page looks in IE7 – just press F12 to get the developer tools and play with Browser modes or Document modes :)

Hope I managed to cover all the modes. In future posts I’ll write more on this topic.

P.S. As SelenIT pointed in comments, it’s very important that X-UA-Compatible meta tag must be put before any other elements in the head section, otherwise it might not work!

Share:

Best Windows 7 gadgets

Found the best blog with windows 7 gadgets –
http://blog.orbmu2k.de/

I installed Memory usage gadget, updated version of CPU Usage, Network traffic, Volume control and Top 5 processes gadgets. Really great!

I also downloaded all Windows 7 themes from
http://windows.microsoft.com/en-US/Windows7/Personalize
page – they are just awesome :)

Now the right side of my 2nd monitor looks like that:

IE8 news – MUI packs, compatibility view for intranet

First of all, as guys at IEBLOG reported, IE8 MUI packs for Windows XP (and also Windows Server 2003) are now available and have the following languages: Arabic, Chinese (Traditional), Chinese (Hong Kong), Czech, Danish, Dutch, Finnish, French, German, Greek, Hebrew, Hungarian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese (Portugal), Portuguese (Brazil), Russian, Spanish, Swedish, Turkish, Bulgarian, Croatian, Estonian, Latvian, Lithuanian, Romanian, Slovenian, Slovakian, Thai. This is great for those who use localised versions.

Another interesting thing is that IE8 renders sites from Intranet security zone in compatibility view by default, unless the page specifically indicates that it should be rendered in standards-compliant mode (either by corresponding META or HTTP header). However, this behaviour can be controlled from Group Policy. This is one of the most valuable benefits of using Microsoft technologies – you get great level of integration out-of-the-box.

Great week – Hosting issues, dvd-rw, beanbags, silly putty, windows7, laptop battery

This week was really interesting – too much stuff happening at once.

Hosting issues redux

First of all, I’m moving to 1gb.ru hosting – they have quite good prices for standard virtual hosting and I don’t need anything more. As I’ve blogged earlier, I’m cross with my current hosting Naunet.ru because they’ve got squid installed as a front-end for all their servers, and they don’t even want to be flexible with their clients. When I emailed them saying that I can’t work with chunked encoding because of their SQUID, they said that supporting chunked encoding was not a priority issue for them. Awesome. So I looked at different options, tested few hosting providers and 1gb.ru seems to be the most reasonable so far. For unlimited traffic, standard LAMP + perl + 1 domain I’ll have to pay $50 for a year :) Going to change DNS records for sharovatov.ru domain tomorrow.

DVD-RW

I finally got to the computer store and bought a DVD-RW to replace my old CDRW. 30 bucks and now I can watch my movies on a TV – great. Don’t know why I didn’t replace it earlier.

Laptop battery

I have a really weird issue with my MSI Wind U100 laptop – it will charge only when it’s turned off. I just can’t understand why this is happening, it’s saying “plugged in (not charging)” in the battery properties. This is really frustrating because my company generously bought me this laptop only a couple of months ago. Fortunately, a girl from MSI service centre said it wouldn’t be a problem to replace the battery, however, I’ll have to wait for two weeks while the new battery gets delivered to their store from somewhere else (weird!). So it will be two weeks without a battery. This is especially bad since I’m attending OSPCON IT Project Management conference soon, and it’s awful to go to a conference without a laptop. *Still hoping it’s a software issue and can be resolved by updating BIOS or something*

Windows 7

Installed on both laptop and work PC and still can’t find proper words to describe how it’s cool! In few words: Windows 7 Ultimate RC works faster than XP Pro on my Core 2 Duo + 2GB RAM (and approximately at the same speed as XP Home on my laptop). And it’s UI is something I’ve never used before – really beautiful! All hardware was working right after the installation – and I’ve got 2 webcams, bluetooth dongle, wi-fi etc. All the software works without any problems. IE8 runs so smoothly that I don’t even bother using Chrome while on XP Google Chrome was my main browser for daily surfing.

Beanbag

Beanbags finally came to Moscow – beanbag.ru! For $70 you get a normal-sized beanbag and for $100 you can buy a huge one! Awesome! I’m thinking of getting a big one for sitting with laptop.

Silly Putty

My boss ordered me a pack of magnetic Silly Putty when he was in London. For some reason it’s sold for crazy prices here in Moscow. On Amazon.co.uk you can get 3” pack for £6.95 (350 roubles) and on handgum.ru you get the same for 1000 roubles (£20.00). Can’t wait to get it :)

And of course, as every other week, it was full of work for the great company I’m employed in – Real Russia Limited :)

Windows 7 Desktop Gadgets

I’ve been playing with Windows 7 Desktop Gadget technology and I must tell you – I just love it! And I’ll tell you why :)

History

The approach of putting web-application right on a desktop was invented by Microsoft in 1994-95 (in Windows Nashville which was intended to be released in 1996) and was a part of Windows Desktop Update for Windows 95 and a core of Windows 98 Active Desktop. You could set an HTML page (plus JS, of course) as your desktop background and it would be run in IE. Microsoft even had a gallery of Active Desktop widgets. So web-widgets-like functionality was around almost twelve years ago. As with many other Microsoft inventions, it was way too ahead of time.

Another technology that played a role in inventing desktop gadgets is HTA – short HTML applications that run in a standalone way. You had to put your scripts (VBScript or JScript) and styles in a single HTML file, add a special description and rename the file extension to .hta. Here’s a sample code:

<html>
<head>
<title>HTA Test</title>
<HTA:APPLICATION
ID="objTest"
APPLICATIONNAME="HTA Test"
SCROLL="yes"
SINGLEINSTANCE="yes"
>
</head>

<SCRIPT type="text/javascript">
//some javascript code
</SCRIPT>

<body>

<!-- some html -->

</body>


You could access all ActiveX objects that your system provided – Scripting.FileSystemObject, UserAccounts, WMI etc. – basically everything that was supported in WSH and Script Runtime. If you were using classic ASP on the server, you could switch to writing HTAs with zero effort – language and all the objects would be the same. While any web-development IDEs could be used, there even was a special IDE for building HTAs – HTAEDIT.

So Microsoft had two nice technologies that weren’t actively used – Active Desktop as a way to integrate web-application with desktop and HTA as a core for writing standalone client-side web applications. Both technologies combined both to create Microsoft Desktop Gadgets – small standalone client-side web applications that run as dockable widgets on your desktop – pure HTML,CSS and JS packed with manifest file in an archive.

Usage

If you double-click on this archive, gadget will get installed and can be moved to any place of your desktop. IE8 core is used to run them, so you get full support for CSS2.1, great level of javascript and other IE8 goodness.

The gadgets concept was introduced In Windows Vista – but gadgets had to be positioned inside a special sidebar area – which is not very flexible. In Windows 7 you can put your gadgets wherever you want them to be.

Here’s a screenshot how gadgets look like on my desktop:

Gadgets are especially useful when you have a widescreen monitor or two monitors configuration so that you’ve got much horizontal space, but even if you’ve got a normal monitor as gadgets can be freely positioned, you will find them useful.

I use Twitter, weather (standard), network traffic and cpu meter gadgets.

Awesome technology! I’m planning to build couple of my own gadgets and will definitely prepare a blog post on this :)

Update: It looks like Windows Mobile 6.5 will have support for similar gadgets functionality!

Share :

HTML+CSS+JS Widgets – future cross-platform environment

Yesterday I installed Windows 7 on both my laptop (MSI Wind U100) and work PC (Core2Duo with 2Gb RAM). Both machines had XP – Home on laptop and Pro on work PC. One of the first things I’ve noticed right after installation was Gadgets technology that Windows 7 supports (actually, support for Sidebar Gadgets appeared in Vista, but as I didn’t have Vista installed, I couldn’t check it out). The technology is very simple – you create a manifest file with your gadget settings and HTML file with your gadget code, styles and scripting (of course, you’d better put styles and js in separate files); then zip everything in one archive and rename its extension to .gadget. That’s it, then you can install it on your sidebar in Vista or Windows 7.

Technical details of how gadgets work are for one of next blog posts, but I feel the tendency that all small applications soon will be written in HTML/JS/CSS (especially those that use web-services!).

Look, Opera has proposed a draft to W3C called Widgets – the same concept of small HTML/CSS/JS application but running inside a browser. Vodafone hired PPK to spec Mobile Widgets technology and test thoroughly (and Peter-Paul is famous for his great tests and compatibility tables!). Nokia already supports Web Widgets on S60 phones.

So instead of multiple environments we have one common environment for building applications for almost any platform – be it a browser, a mobile phone or Windows desktop. Yes, there’re API and DOM differences, for example, Windows Gadgets allow access to WMI so that you can build an application leveraging all the system functionality provided by WMI, on the phones and in Opera you will be limited to web-service based development and some pretty basic DOM, but even so it’s great that html/js/css is becoming a standard for writing cross-platform applications.

Front-end developers – our skills will become even more valuable :)

Share:

Back to the blog

It was a great week – went to Stalingrad for 5 days business trip –
did all that’s been planned. The weather was just awesome –
sunshine and 20 degrees centigrade all the time, so evenings with friends drinking beer or wine were really pleasant :) Went to one café that had “free wi-fi” label hoping to have some coffee and read my mail/twitter; but the internet quality was so crap that gmail couldn’t open so I gave up.

Then back to Moscow – and 9th May Victory Day – great holiday, cool parade (C400 was shown) and fireworks – awesome day.

Then hockey – Russia-Canada 2:1- and we’re world champions again :)

So after a great business trip and really great holiday I’m back to my blog, will soon publish a big post on chunked encoding support and other interesting stuff :)

Apple submitted HTTP Live Streaming spec to IETF

As I’ve blogged recently, nearly a year ago Microsoft proposed an approach for adaptive video streaming over HTTP – Smooth Streaming. As Microsoft didn’t apply for a patent for this technology, I was hoping to see the same beautiful approach implemented in modules for other web-servers, or even as web-applications – as it’s really easy to implement.

The mistake Microsoft did was that they didn’t submit this technology standard to IETF to make it RFC – and that’s what Apple’s doing at the moment.

Yes, I’m not mistaken – Apple copied the whole idea, called it HTTP Live Streaming and submitted to IETF.

Yes, there’re differences, but they are absolutely insignificant:

• Apple spec suggests extending M3U format for a playlist – Microsoft uses SMIL-compliant ISMC client-manifest file (i.e. playlist)
• Apple spec defines that the server creates the playlist – in Microsoft approach the encoder creates the playlist
• Apple spec defines encryption for media files – Microsoft doesn’t

And the whole specification that’s been proposed is weird – I think they just wanted to submit it as soon as possible before Microsoft Smooth Streaming approach gets popularity and becomes de-facto standard.

Here’s what jumped at me when I was reading the spec:

1. section 6.2.3. Reloading the Playlist file – why specify the expiration time of the playlist separately when HTTP 1.1 already has flexible methods for
   setting expiration time of the resource?
2. encryption – what’s the purpose of encrypting media files when there’s HTTPS? And if there’s a purpose – HTTP already provides a place where encryption could be "plugged in" – Transfer-Encoding, why didn’t Apple just
   register another transfer-coding in IANA?
3. EXT-X-ALLOW-CACHE – why add this if HTTP already gives flexible tools to control caching?

So as I see it – Apple was just a little bit in a hurry to propose this “standard” – looks like they took Microsoft idea, added some proprietary bits and bobs without thinking them through, didn’t use what HTTP natively provides but bravely called the draft “HTTP Live Streaming”.

Awesome.

Share :

Hosting issues

I’ve been trying to prepare some test cases for HTTP Chunked Encoding support, but noticed that something went weird when I was requesting data from my host (sharovatov.ru).

I’ve got a basic LAMP virtual hosting at naunet.ru which worked fine when I was hosting static content. But when I started doing the testcase, I found out all the weird and wonderful issues – mainly because they have SQUID installed before apache, so every single request goes to squid, and it’s a caching proxy that serves all my request from its cache – so I can’t test chunked encoding properly, can’t test ranges support properly… Crap. Seems that they just use squid to reduce load on their web servers.

But the worst thing is bad techsupport – it works 8 hours a day and there’s nobody there on the weekends or bank holidays. I ask a question and nobody answers it in 3 days. It just drives me insane.

Will have to move to somewhere else where sysadmins know how to do load-balancing without installing front-end proxies.

Share :