The IE 11 preview is available with the 8.1 preview release. IE has seen several significant changes and I’m outlining a few of them ( the ones that will affect developers the most ) here.
New Dev Tools
Long gone are the days of cursing the DOM inspector because you can only modify the current CSS properties and not add new ones. When it comes to tooling, the development tools for IE 11 have been completely overhauled. Long gone are the days of the refresh button, as DOM changes are now reflected automatically in the DOM explorer.
A new UI Responsiveness tab can help a developer pinpoint problems in slow pages by breaking it down into loading, scripting, garbage collection, styling, rendering, image decoding and other. Also new, the Memory tool helps diagnose memory issues and can identify opportunities for improvement.
Personally, I would have loved to see the ability to inspect local storage or a way to record DOM changes ( thinking about CSS here ).Read more about all the changes and new features in the F12 Developer tools over at the online documentation for Internet Explorer 11 or through this recorded presentation from the Build Conference.
Graphics
WebGL
In terms of graphics, several welcome additions have found their way into IE 11. WebGL is now supported in IE 11 preview, and will be turned on by default – perhaps a few other browsers might start to do the same. For details about this, there was a good presentation at the Microsoft Build Conference by Frank Oliver that can be viewed online titled “Hyper-fast Web Graphics with WebGl”
Canvas
Canvas has seen some enhancements, one that made me silently curse and shake my fist as a previous project really could have benefited from it: the ability to create dashed lines with canvas. Now you can make all the marching ants you want with setLineDash, getLineDash, and lineDashoffset. The full list of proposed canvas enhancements for IE 11 can be found here.
Video
MPEG Dash is a standard for adaptive streaming over HTTP and IE 11 supports it. To see protected, adaptive streaming in action that won’t kill the battery thanks to hardware acceleration using the GPU, visit NetFlix on IE 11. Head over to the Netflix blog to read more about how they went plug-in free and the requirements thy had to meet do it.
Compatibility
User Agent String
User agent strings have been known to change – not long ago RIM did it for BB10 and this blog post details the history of the user-agent string.
In IE 11, the browser token (“MSIE”) has been removed along with “compatible” and the “like Gecko” has been added to be compatible with other browsers. Feature detection is the way to go to provide the best user experience, and is generally preferred for good reason over browser detection: take a note from jQuery who deprecated the “browser” property since around version 1.9. If you do find yourself needing to do browser detection, there is a new token “rv” that can be used.
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko
Document Modes
Introduced in IE 8, document modes will be deprecated as of IE 11 and should only be used on a temporary basis. Edge mode, which signifies to IE to render with the highest/modern mode possible, is what will be used in IE 11.
Dataset Attributes
IE 11 includes full support for the dataset attribute, allowing for custom data to be applied and accessed to an element. Previously custom data properties could be accessed by using getAttribute, but it has moved from partial support to full support.
A few rules do exist, however, and they include:
- names must not include capital letters
- names cannot start with xml
- accessing a property means the name gets converted to camel case
// gets the custom data attribute "data-transition-type"
var transition= element.dataset.transitionType;
A few other compatibility changes have occurred – such as the support for __proto__, replacement of the IE only XDomainRequest by XMLHttpRequest, and UTF-8 encoding for query strings and XHR requests. All of the compatibility changes in detail including FlexBox layout updates can be read here.
IE 11 has been optimized for the touch experience. An overview of all the UI or consumer facing changes can be read here. To get your hands dirty with IE 11 and see what 8.1 is all about, you can download the preview here. For web developers, a good overview of the platform capabilities can be had here.