Yesterday Microsoft released the first beta of the next Windows 8 generation: Windows 8.1. Part of this beta release is the new Internet Explorer 11 which is especially interesting for web designers and developers around the world.

In this post you’ll learn which new Web Standards and features Internet Explorer 11 supports and we’ll take a look at the improved developer tools (finally!).

Compatibility Changes

Before we enter the big changes let me quickly show some web development relevant changes made to the general browser behavior.

New User Agent String

Of course the Internet Explorer 11 User Agent String has been changed. The new User Agent String is:Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

In direct comparison the Internet Explorer 10 User Agent String is:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

The new User Agent String is more consistent with other browsers which should be a good thing.

Web Standards

Currently Firefox and Chrome are raising the bar for web standards compatibility month after month. If Microsoft want’s to keep up they will need to make quite a few improvements in this area. Let’s start out with a browser comparison:

Browser	Acid3	HTML5test.com	CSS4 Selectors
Internet Explorer 11	100/100	355+6/500	75%
Internet Explorer 10	100/100	320+6/500	75%
Chrome 27	100/100	463+13/500	83%
Firefox 22	100/100	395+14/500	79%

So clearly we can see a step forward in the new Internet Explorer 11. But still we are nowhere near the level of Firefox or Google Chrome. That’s sad because many people still use whatever IE version comes with the operating system as there main browser. Regardless Internet Explorer 11 brings some new feature to the table which will gain a wider adoption once the browser is released.

So What’s new?

The most important new features in Internet Explorer 11 are:

WebGL

With Internet Explorer 11 WebGL lands in the last of the major browsers. As WebGL enables developers to create dynamic 2D and 3D graphics, games and content we’ll see more usage of this great feature in the future. Of course the WebGL implementations by Microsoft has some specialties which are documented quite well in the developer guide.

Mutation Observer

The Mutation Observers, as specified in the W3C DOM4 specification, can be used to replace property change events. These observers provide a way to declare which DOM manipulations you want to monitor and be notified of changes after script execution but before a new frame is rendered and displayed.

The observers can be used like this:

var observer = new MutationObserver(mutationCallback);
observer.observe(targetObject, { 
  attributes: true,
  attributeFilter: [“name”, “id”],
  attributeOldValue: true,
  childList: true
});

You can find more information and source code examples at MSDN.

Device Orientation Support

Internet Explorer 11 implements a new JavaScript event which is mainly useful for mobile devices and tablets, the deviceorientation event. This event get’s fired whenever the device detects a change in orientation (the user changes the orientation of the physical device). This event can be found on the window object.

More information are available in the specification.

Canvas enhancements

Internet Explorer 11 includes 3 new features for the Canvas element: msImageSmoothingEnabled, even-odd Fill rule and dashed lines.

The msImageSmoothingElabled property can turn off bilinear scaling and activate nearest-neighbor scaling. This is especially useful for game sprites which will appear sharper scaled that way. You can clearly see the differences (bilinear scaling on the left, nearest-neighbor scaling to the right).

The even-odd filling rule can be used to fill shapes created by a path. This way you can fill the even parts and let out the odd parts of a shape. Maybe a picture makes it more clear?

The last new canvas features are dashed lines which does what you might expect it to do, it draws dashed lines. You can use setLineDash, getLineDash and lineDashOffset to create the lines.

You can find more details and code examples on MSDN.

Enhanced HTML 5 Video support

More features have been added to the HTML 5 video playback including Dynamic TextTracks, Encrypted Media Extensions, Fullscreen API, Simple Delivery Profile, Streaming XHR cache control and Media Source Extensions. You can find out anything you want about these features at the IE 11 Developer Guide.

Embedding custom non-visible data

Support for custom data attributes and the property dataset have been added. This means you can use the data- prefix to add any custom data to the DOM. This data can later be used inside JavaScript code. A simple example:

<div id=“test-data” data-my-custom-data=”Here could be your custom data”></div>

<script type=”javascript/script”>
   function ReadWriteCustomData(newData) {
var mydata = document.getElementById(‘test-data’).dataset.mycustomdata;
document.getElementById(‘test-data’).dataset.mycustomdata = newData;
}
</script>

Flexible box layout

The CSS flexbox layout was already introduced in Internet Explorer 10 using the Microsoft vendor prefix ms-. In Internet Explorer 11 this prefix has been removed for most properties and values. Moreover the shorthand property flex has been added. A list of all changed properties can be found at MSDN.

Developer Tools

The developer tools in Internet Explorer 11 have final been rebuild and are now a decent competition for Chrome and Firebug. Especially the UI Responsiveness tool comes in rather handy. Some of the new features are:

Console

In the new console window you can see errors, warnings and other messages including debug output. Just like in Chrome or Firefox you can also inspect and run JavaScript code in the console.

Measure UI Responsiveness

Using the UI Responsiveness tool you can profile any website and identify bottlenecks and what processes takes more time than they should. It is especially useful to optimize JavaScript driven UI’s and web applications.

Memory Analysis

This tool can track the memory usage of any website over it’s lifetime. Aside from a timeline of overall memory usage you can create snapshots for a specific point in time. Unfortunately I could not get the snapshots to work on my test machine.

Autocompletion

In the new console and DOM explorer the developer tools provide you with auto completion whenever you to type in HTML, CSS or JavaScript.

GPS emulation

No more pain while testing any websites GPS functionality. Using the new emulation tool you can simulate different GPS position to simplify the testing workflow. It is really great!

All new features are described in depth in the developer documentation on MSDN.

Conclusion

All in all I’d say that Internet Explorer 11 is another step in the right direction. Especially I like the new developer tools which are way more usable than the old ones ever where. In regard to standards compatibility and browser features Microsoft widens the gap between Internet Explorer and other browser like Chrome and Firefox. This will slow down the process of new feature adoption inside the development community because nearly no one can simply ignore Internet Explorer users altogether. Let’s hope that Microsoft will release new IE versions independently of Windows in the future to speed up the development process and release cycles.

Sources / More Information

Introducing IE 11

IE 11 Developer Guide

Microsoft IE Testdrive