Whats new in IE11?

With the Windows 8.1 update in addition to a whole heap of OS changes and the reappearance of the start button (well kind of) we get the latest version of Internet Explorer – Internet Explorer 11!

Internet Explorer 11 of course contains improved support for new standards and API’s and it’s great to see Microsoft really stepped up their release cadence with IE 10 released only a year ago – can you believe there was about 3 years between IE 8 & 9 being released and 5 whole years between IE 5 & 6!

IE11 contains a heap of new features but for those of you with a short attention span my top 5 are:

  • A long overdue refresh of the F12 developer tools bringing IE11’s dev tooling into line with other browsers and with the addition of a few treats not found elsewhere
  • Support for a number of new standards & APIs  – e.g. dataset, mutation observers
  • WebGL meaning from now on every major browser supports a way to render 3d content!
  • Tab, history & setting synchronization
  • Page asset/network prioritization changes

IE 11 supported platforms
IE11 is of course supported on Windows 8 as part of the Windows 8.1 update but if you are running Windows 7 sp1 (and who can blame you as Win 8 has some er irritating quirks) you will still be able to use IE11 (although it’s not yet released at the time of writing so you er can’t quite yet).

It’s also worth noting there are some features that are not supported in Windows 7 due to OS limitations around graphics, security & device orientation. For a full list please refer to:  http://msdn.microsoft.com/en-US/library/ie/dn394063(v=vs.85)#unsupported_features

IE 11 will also be supported on Windows Server 2008 R2 Sp1 & will come with Windows Server 2012 R2.

Completely overhauled F12 developer tools
The new F12 developer tools deserve an entire blog post(s) of their own so I will just summarize some of the main changes (you can go to http://msdn.microsoft.com/en-us/library/ie/bg182326(v=vs.85).aspx to read in more detail about these):

  • New improved cleaner, more intuitive interface
  • Ability to right click to inspect an element
  • Intellisense auto completion for html, css & js
  • DOM drag & drop
  • No need to refresh page to enable debugging
  • Scrollbar shows breakpoints in code
  • See event handlers applied to node (and ill add that I found this better referenced the code than Chromes implementation)
  • Ability to move execution point backwards
  • Break on creation of new web worker
  • Performance profiling
  • Screen (size & resolution) & GPS emulation (for geolocation testing)
  • Ability to identify detached DOM nodes that can cause memory headaches

The below screenshot shows the new tools so you can see how different they are:

devTools

Synchronization
As long as you are using a Microsoft account (e.g. not just a local Windows account) then IE 11 will sync your browser history, typed URLs, favourites,  settings and credentials using Skydrive behind the scenes. The settings for this feature are a little hidden away under PC Settings, Skydrive, sync settings and enables fine tuning of just what’s synced.

Whilst we are discussing tabs IE 11 allows you to open unlimited numbers of tabs (you were limited to 10 in IE10) so you can have all your cat pictures open at once.

Standards & compatibility related changes
When IE 8 was released Microsoft introduced the concept of document modes to facilitate the rendering of older web pages. It is possible using a special http header or meta tag to tell IE to render a page using a particular document mode version. This feature would sometimes be useful when working with sites or CMS systems where you had little control over the html that was rendered and needed to ensure it worked with a particular browser version.

From IE 11 to help move things forward & provide the best user experience possible document mode should be considered deprecated (although will still currently work as of IE11). In IE11 edge mode is the preferred mode to render documents and contains the support for the standards. It’s very easy to tell IE11 that you want your page to be rendered using this mode simply add the html 5 doctype,

In the olden days some sites would use API’s such as navigator.appName & navigator.product to detect whether IE was accessing a page and serve a more basic version of a site (as older versions of IE had poorer standards support). The problem with this is that later versions of IE probably do support these features which can result in a poor experience  for users. IE 11 will now return “Netscape” when navigator.appName is called and “Gecko” for navigator.product. This also reflects whats specified in the HTML5 standard and what other browsers do so don’t think this is some Microsoft related hackary!

IE 11 removes support for a number of legacy api’s that you really shouldn’t be using anyway such as attachEvent, execScript & the most evil document.all. For a full list please refer to: http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx

Change to user agent string
On Windows 8.1 IE 11 will identify itself as:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Microsoft say they changed the user agent string to reduce the possibility of IE being incorrectly identified as an earlier version e.g. IE 10 identified itself as:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

So I guess “compatible” & “MSIE” potentially caused some issues. MS say that if for some strange reason you want to detect just IE 11 (and you probably don’t really want to do this as you should be using feature detection)  then you can check for the presence of the string “Trident” (IE’s layout engine) and presumably should also use the version number once when IE12 is released.

API & JS Feature Support
IE now supports the following features & APIs:

  • Dataset for reading custom data attributes from an element
  • Mutation observers (a way of monitoring DOM changes e.g. changes to values or the addition & removal of nodes)
  • let (blockscoped variable)
  • const (block scoped constant variable)
  • Set’s (Set’s ensure uniqueness of key, value pairs in a collection)
  • Maps (work a bit like a C# dictionary)
  • WeakMap – like a Map object but the key must be an object. If the key object is destroyed the weak map removes the key/value pair automatically
  • Internationalization API (date & number formatting stuff)
  • __proto__ property
  • Better canvas support
  • Fullscreen API
  • Screen Orientation API
  • Device orientation events
  • Web Cryptography API
  • Clipboard support for images pasted into contenteditable regions
  • Input Method Editor (IME) accessibility support  – I’m not too clear what this is but apparently as an example enables you to “avoid user interface collisions” http://msdn.microsoft.com/en-us/library/ie/dn385696
  • Accessibility support for clear button in text input
  • Command identifiers – allow control over undo stack for editing

Graphical & Layout related changes
IE 11 has the following graphical & layout related changes:

  • WebGL (yay! – it’s worth noting that Microsoft classify IE11’s WebGL implementation as an “early preview” so not all the APIs are fully supported yet. There is full a list of what’s working at: http://msdn.microsoft.com/en-us/library/ie/bg182648(v=vs.85).aspx)
  • New devicePixelRatio property (devicePixelRatio is the ratio between device pixels & dpi adjusted css pixels)
  • Better support for scaling & zooming
  • Support for different DPI’s on different monitors (previously one DPI was supported)
  • Updated flexbox support
  • CSS3 Border-images
  • Support for SVG pointer events
  • Fix for a number of bugs in East Asian & bi directional text

Performance
IE 11 has improved performance with the SunSpider bench mark in July 2013 showing IE 11 is faster than Chrome 28, Firefox 22 & Opera 15 in the testing of some er fairly specific JavaScript scenarios. Of course in the real world browser performance is affected by a number of factors such as rendering, network requests and a number of other things so its tricky to say which is the quickest browser currently. The takeaway is that IE’s JS engine is very fast and at the least comparable with competitors offerings.

Other performance enhancements in IE 11 include:

  • Caching of pages already loaded as long as they meet certain conditions (e.g. must be served over http, contain no websocket usage or pending IndexDb transactions, ActiveX controls etc)
  • Page assets prioritized (layout stuff first all the way to audio, video & ActiveX components)
  • Prioritization by context (e.g. pages in background tabs have lower preference than one in the foreground)
  • Support for lazyload attribute to delay individual resources e.g. <img src=”unimportant.png” lazyload=”1” /> (0 indicates should be loaded with default priority)
  • Preload attribute support (tells the browser to render a page in the background )
  • Prefetch support (tell the browser to download something into the cache – can do up to 10 times per page)
  • Dns-prefetch – tells the browser to resolve a dns query in the background

It’s worth noting that using prerendered & prefetch could have some side effects with scripts & animations already having been run on page – you have been warned!

Security
Microsoft quote that an independent study by NSS lab also showed that IE11 blocked 99.96% of malware based on a 754 examples of malicious software which was better than other browsers that were tested which is awesome news. In previous NSS tests other browsers performed better in some other areas e.g. preventing phishing attacks (http://www.infosecurity-magazine.com/view/33645/there-is-no-single-most-secure-browser/) so read into this you will.

It’s quite clear however that Microsoft take security very seriously and IE 11 offers further features to increase protection:

  • In IE11 on Windows 8 Enhanced protection mode (EPM) & App container are turned on by default. This prevents unauthorized reading/writing to OS and was previously off by default
  • The ability to create Do Not Track (DNT) exceptions (DNT is a header to indicate that a site shouldn’t track a user)
  • Support for a number of new group policy settings e.g. control of page prediction, ms personalization of search results, phone number, SPDY/3 network protocol
  • Ability to block all 3rd party cookies (found under settings, privacy, cookies)

Windows 8 app related changes
I don’t have a Microsoft tablet related device so I can’t test some of these but apparently IE 11 supports:

  • Phone number detection (not desktop mode)
  • Ability to show 2 windows side by side
  • Browser will scale to fix content
  • Access to downloaded file list
  • Tab position improved
  • Hover states mapped to tap & hold
  • Drag & drop via touch
  • Live tiles with Pinned sites
  • Backswipe with smarter caching
  • Gyroscope input

Misc changes
Some other changes didn’t really fit in other sections but deserve a mention:

  • Mpeg dash support (high quality streaming of media content over http)
  • Better video captioning support for HTML 5 videos – support for dynamic TextTrack (add captions to HTML5 videos using JS,
  • SDP (simple delivery profile) captioning support
  • Ability to control whether video data fetched using XHR is written to disk or not
  • SPDY/3 support (a protocol that modifies the way HTTP is sent to be more efficient)
  • IE 11 will encode all url’s using UTF-8
  • IE 11 includes Adobe Flash out the box!

Potential issues
Of course every new release of software brings with it potential issues and IE is no exception. There has already been an issue with the rendering of Google’s search results that is now fixed but I think the following could potentially cause some headaches:

Summary
I really feel this release of Internet Explorer competes with offerings from competitors and will win some developers back with it’s much improved F12 developer tools. It’s also great to see support for the newer web technologies such as WebGL and Microsoft contributing to the community by proposing new standards such as IME.

It is frustrating to see that IE is often one step behind competitors offerings due to its slower release cycle. If anything I think this is due to Internet Explorer’s tight integration with Windows which only seems to be increasing with Windows 8 apps relying on IE components 😦

I really don’t think it a good idea that a browser is tied to an operating system so closely (although this has its advantages as well) and it will be interesting to see the direction the Internet Explorer team take with this in the future. I found Aaron Powell’s suggestion that Microsoft fork IE to test new features that get fed back into the main Internet Explorer an interesting read.

My only real gripe with IE now is that I would really like to see a good way to extend the browser – this is currently far too hard & badly documented.

But in conclusion IE 11 is a great release and a massive improvement on IE 10 with its improved development tooling.

Further reading

IE 11 guide for developers http://msdn.microsoft.com/en-us/library/ie/bg182636(v=vs.85).aspx

IE Blog http://blogs.msdn.com/b/ie/

Overview of IE 11 http://technet.microsoft.com/en-us/ie/dn269977.aspx

IE test drive site http://ie.microsoft.com/testdrive/

How accurate are IE developer tools for testing previous versions?

Most web developers will hopefully test their sites and applications in a variety of browsers. It’s probably fair to say that the older versions of Internet Explorer in particular can cause even the most experienced dev to tear their hair out with their differences in rendering behavior and implementation of various DOM APIs so it’s always been particularly important to test a site in older versions of the big blue E.

I think IE 9 & 10 have done a pretty good job of keeping to standards so I don’t think this will be such a big issue in the future (that’s not to say you shouldn’t test these versions) but there are still a heck of a lot number of people using IE & and IE 7 (yes that’s your parents and big corporate’s with huge hulking Windows XP based networks) which means testing these previous browsers is still important – I don’t think my clients would be too happy if a significant portion of their customers couldn’t access their site or application.. 🙂

IE dev tools and testing previous versions

Since version 8 IE has contained an integrated set of development tools (available as a separate download for earlier versions) which amongst other features offer the ability to simulate older versions of the IE. This can give you a nice quick way to test how your site will function all the way back to good old IE 7.

To access this functionality hit F12 or right click inspect element on a page.

The below screenshot shows the development tools in IE 10:

 

But wait what is the difference between Browser and Document mode and more importantly how accurate a simulation is this of earlier versions of IE?

First let’s discuss browser & document mode..

Browser mode and Document mode

Document mode is important as changes how a browser renders a page, processes CSS & JavaScript and (in Browser modes case) how a browser identifies itself to the web server.

Determining the mode used to render a page is quite a complex process – see http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx.

The following can influence the document mode a page is rendered in:

  • Browser & Document mode setting in the dev tools
  • Conditional comments and HTTP headers
  • Compatibility view list
  • Doctype (or lack of)

You can force IE to render a page in a particular document mode by using special meta tags or setting certain HTTP response headers. This might be useful for example in telling IE how to render content in a legacy intranet application where you don’t have control over the source and it displays better in IE7 quirks mode.

It can seem a bit un-intuitive & confusing that IE dev tools has two separate modes (which do overlap in functionality) but this split allows you finer control over how a page is displayed, the ability to override browser defaults and to test how a page would display in scenarios such as compatibility mode.

Compatibility mode is a way of emulating earlier versions of IE so a page displays properly – Microsoft maintain a list of sites that should be rendered in this mode and you can add sites to your own local version of this list in compatibility view settings.

OK back to our testing question let’s look at the differences between document and browser mode:

Document mode

  • Does not modify the user agent string that is sent to a web server
  • Determines how mark-up will be rendered
  • Will re-render a page if changed in dev tools but won’t make another request to a web server

Browser mode on the other hand:

  • Modifies the user agent string that is sent to a web server
  • Changes how conditional comments in html will be evaluated
  • Determines the Document mode that will be used by default (see above)

Probably the main difference as far as we are concerned is the user agent string that is sent and the defaulting of document mode. With default browser settings the user agent string that is sent to a web server from my Windows 8 machine and IE10 is:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)

If I set just the document mode to IE 7 then the user agent string will not change although a different rendering mode will be used.

If however I set the browser mode to IE7 then the following UA string will be sent:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.3)

You can try this by using the network tab and examining the user agent header.

User agent

Some frameworks (ASP.net for example) and some (cough.. badly written) JavaScript use the user agent string to present a different experience for users so for the closest simulation you probably will want to ensure you use the Browser mode setting so the correct user agent string is sent and then check the document mode is set correctly for the scenario you are testing.

For example if you want to test a page with a doctype in IE7 standards mode you can set the browser mode to IE7 (the IE7 user agent string will now be sent) and ensure the document mode is set to standards mode.

If you want to test how an IE7 user viewing it in compatibility mode would view the page you can set the browser mode to IE7 and the document mode to Quirks.

OK so we understand the importance of the browser & document mode but we haven’t answered how IE simulates previous versions yet so let’s look at browser sub systems now.

 Browser sub systems

Your average browser is a complex beast and is made up of a number of subsystems such as:

Rendering engine

  • JavaScript engine
  • Network engine
  • Security systems
  • And many others..

It will come as no surprise to learn that different versions of a browser have different versions of these components.

So does IE contain previous versions of individual subsystems to enable you to simulate earlier versions?

No.

..however depending on the component in some cases kind of – it depends on the subsystem (and no I sadly don’t have a list).

One of the big things that is not simulated when you use the IE dev tools to simulate previous versions is security related changes. This makes sense because it would be a really bad thing if you could force the browser into an earlier security mode that contained various potential system compromising flaws. This means you will never get a 100% accurate simulation of how an earlier browser would process a page although this probably won’t affect the majority of scenarios users will be testing.

There are some components that are completely different in newer versions of Internet Explorer such as the JavaScript engine (the latest is called “Chakra” to its friends) that try and replicate older bugs & hide unavailable functionality when earlier versions are simulated which of course may not be a 100% accurate simulation.

However there are also some other components such as the DOM selection engine that although a later version still also contain the older code so it can be simulated meaning you are probably getting a fairly accurate simulation of how something might have worked previously.

Of course if every version of every component was shipped with each version of IE it would be a massive install, the maintenance would be a nightmare and there could be memory implications for loading previous versions of components.

All this however points to the conclusion that for a 100% accurate simulation of earlier versions of Internet Explorer you are going to have to use an earlier version of internet explorer L

So what to do…

Well I guess you could set up a number of virtualized instances allowing you to test every possible version of a browser but few teams are going to have the resources to do this so and hey that sounds like a heck of a lot of work!

My recommendation would be to instead use a service like browserstack.com or spoon.net that contains virtualized versions of earlier browsers all nicely setup for you. These services are inexpensive and allow you to simulate many different browser versions (and even offer other browser options such as mobile devices).

Secondly it’s a good idea to review the compatibility cookbooks that Microsoft release when they ship a new version of Internet Explorer as these can assist in giving you a heads up of breaking changes: http://msdn.microsoft.com/en-us/library/ie/hh771831(v=vs.85).aspx

Thanks to IE team for assistance in this article.