file-243119101

What’s New for Developers in IE11?

Internet_Explorer_10_logo.svg

The first big update to Microsoft’s Internet Explorer browser in three years will feature a number of advanced security features – and a whole lot more.

With Windows Blue, a.k.a. Windows 8.1, Microsoft will issue the first new version of its standard Web browser in three years. Contrast that with the constant upgrades coming from the Mozilla Foundation and Google. However, in Microsoft’s case, the company is introducing a whole lot of new browser features at once that rely on changes made to the underlying operating system.

IE11 is available in developer preview for both Windows 7 and 8. But many new features are disabled in Windows 7 because they are touch-based and only work on Windows 8.

In this article, I break down what’s new and significant in this big browser update, which has gone three years without significant overhaul.

New F12 Tools

Microsoft is revising its F12 Developer tools for building and debugging Web pages and applications using JavaScript. You view the final page in the browser but the tools provide a view of how those pages are interpreted on a code level by IE. F12 tools also help identify and report about elements on the page such as links and image reports.

Page code is displayed the way the IE Document Object Model (DOM) interprets the page and is not the original source code. This change shows the impact of dynamic objects, such as memory leaks, or you can just use it to fine-tune a CSS layout.

The F12 tools are completely rebuilt in IE11 Preview with a new UI and new functionality to make development and debugging faster and easier, Microsoft promises. There are eight distinct tools in the toolkit, each with their own tab in the F12 tools interface:

  • The DOM Explorer tool
  • The Console tool
  • The Debugger tool
  • The Network tool
  • The UI Responsiveness tool
  • The Profiler tool
  • The Memory tool
  • The Emulation tool

The Responsiveness, Memory, and Emulation tools are completely new. They all sport a Windows 8 minimalist interface and are fully integrated with each other. (Microsoft offers an in-depth look at the F12 tools, if you want to know more.)

WebGL and Hardware 3D Support

Two years ago, Microsoft Security Research and Defense posted a blog entry claiming that WebGL was not secure. For two years, Microsoft has been the lone browser maker to not support WebGL, but now that the company is satisfied with the security measures around the library, it’s adopting it.

WebGL is a technology that allows websites to use a computer’s graphic processing unit (GPU) via JavaScript by using an API (OpenGL) that developers know. Epic Megagames, maker of the game Unreal and its 3D engine with the same name, ported the Unreal Engine 3 to Chrome and Firefox running in JavaScript in four days, and they have a snazzy video to show for it.

Microsoft states that the WebGL renderer in IE11 Preview is an early preview version; however, objects, methods, and properties are mostly defined already. Some features, such as antialiasing, are not yet supported.

There are other video improvements as well. Internet Explorer supports the HTML Full Screen API to give a quality full screen video playback, TTML, and SPD standards for closed captioning. With WebCrypto support in IE11, websites can directly control how critical data is encrypted and exchanged. IE can now download video data without caching to disk, resulting in extended battery life when you watch your favorite video.

On Windows 8.1, IE11 supports the latest HTML5 video media streaming standards, including Dynamic TextTracks, Fullscreen API, Simple Delivery Profile, Streaming XHR cache control, and Media Source Extensions (MSE) and Encrypted Media Extensions (EME). With MSE, IE automatically switches the bitrate of the video based on current network conditions while EME provides a standard interface for playing protected media content.

In addition to improving on HTML5 support, the Charkra JavaScript engine is getting a performance tune-up. IE11 includes support for the well-defined and commonly used features of the emerging ECMAScript 6 standard like let, const, Map, Set, and WeakMap, as well as __proto__ for improved interoperability. IE11 also supports the ECMAScript Internationalization API (version 1.0) for handling international date and time formatting.

Faster HTTP transport

The Hypertext Transfer Protocol has been languishing for years even as our Web use has become more complex. Version 1.0 came out in 1990, when Tim Berners-Lee first introduced the World Wide Web and it got its first major revision in 1999 with v1.1. Since then, it’s been quiet, even as we have moved on to things like media streaming, secure connections, and on-demand services that require the browser.

To give the IETF a kick in the rear end, Google released a protocol called SPDY (not an acronym) that has become the basis of HTTP 2.0. SPDY support is already native in Chrome and Firefox, and Microsoft says it will add it to IE11.

In addition, Microsoft made its own contribution to next-generation HTTP in 2012 with Microsoft Speed+Mobility, or Microsoft SM, which modifies the way HTTP requests are sent over the wire to reduce page load times. Like SPDY, it was designed to be a part of HTTP 2.0, not compete with it.

Microsoft has since released the Katana server supporting HTTP 2.0 so developers can begin the process of learning the new protocol and testing applications. Visual Studio templates and other developer tools for building applications have been posted to CodePlex. Katana support will be native to Visual Studio 2013.

In addition to HTTP support, Katana will be Microsoft’s implementation of its Open Web Interface for .NET (OWIN), which will allow ASP.NET apps to talk to the Web and Web applications, including non-ASP.NET apps.

The combination of SPDY, WebGL, and improved HTML5 and CSS3 support can create much faster and more powerful applications deliverable over the wire. The IE browser will deliver a 3D experience previously only possible through a videogame installed on the PC.

Improved Touch

People may have the Modern UI but Microsoft isn’t backing down on this one. The company is further touch-enabling IE11 with Windows 8.1 while tweaking 8.1′s own touch support. IE11 is especially optimized for touch-enabled displays with live tiles, like the UI or in Windows Phone 8.

Users can pin websites and receive live updates or make a tile that serves as a RSS feed. Frequently visited and the Favorites list will also be showcased as tiles. Each site will have a photo cover that users can customize. Microsoft is also expected to add cross-device syncing (something Chrome has already), which syncs a user’s open tabs, browser history, favorite sites, and settings to the user’s Microsoft account and other Microsoft devices.

Since the menu bars of apps are made with the mouse in mind, IE11 introduces support for simulated hover with touch. Tap once to click and then hover to hold. In addition, a new context menu command bar now appears at the bottom of the screen when you press and hold on a link. By placing it at the bottom it won’t interfere with the site’s hover menu if there is one.

Link highlighting on IE11 is similar to Windows Phone 8 with CSS transforms. When you highlight a link, it’s actually highlighted, and it changes to a shade of gray so you know you’ve selected the right element.

In the new IE 11, developers will be able to programmatically trigger pan and zoom through the new msZoomTo() API, which scrolls or zooms into and out of an area with animation. HTML 5 Drag and Drop, first introduced in IE10 using the mouse, is now touch-enabled. Developers can test it out using the Refrigerator demo from IE10.

IE11 adds back-and-forward navigation using swipe gestures across the screen, something people really wanted in IE10. IE11 suspends and caches the previous page to memory when navigating between pages. When you swipe back to the previous page, the page resumes from memory. Microsoft is promising an update on how the new page caching works and how sites can be optimized for this experience using HTML5 APIs. The finished version of the browser will come with support unprefixed Pointer Events.

What’s Missing? Proprietary stuff

Microsoft has not just added features to Internet Explorer; it removed a few as well. One of the most glaring is that all existing isIE() code branches, whether in JavaScript or on the server, will return false for Internet Explorer 11. This could be seen as a demonstration that IE 11 supports Web standards so thoroughly that existing IE-specific behavior is no longer needed.

The “MSIE” token, which has been part of the Internet Explorer user-agent from the beginning, has been removed. In its place is “like Gecko,” something Safari does. Gecko is the engine in Firefox, so IE 11 is identifying itself in the user-agent as a Gecko-type browser. So here is what the user-agent string now looks like:

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

The “compatible” and “MSIE” tokens have been removed, “like Gecko” has been added for consistency with other browsers, and the version of the browser is now reported by a new revision (“rv”) token.

Also saying bye-bye, sort of, is “document.all,” which has been around since IE4. document.all was the IE way of getting an element reference. document.all is now flagged as a falsy. Instead, Microsoft will use document.getElementById(). This also means any code branches based on the presence of document.all will fail under Internet Explorer 11.

Microsoft also removed a bunch of other IE-specific handlers:

  • attachEvent() / detachEvent()
  • window.execScript()
  • window.doScroll()
  • document.fileSize, img.fileSize
  • script.onreadystatechange
  • script.readyState
  • document.selection
  • document.createStyleSheet
  • style.styleSheet
  • window.createPopup

They all have Web standards-based equivalents, which Microsoft encourages you to use instead.

Conclusion

Microsoft is not backing down from touch and is going full steam, adding where it is lacking. At the same time, it is removing all those proprietary features that broke HTML code on other browsers, which is a big plus. Microsoft has not said when IE11 will ship, but it should come with Windows 8.1 later this year.

The Web browser will also be ported to Windows 7, minus all of the touch features, which will be a plus for IE users to have a more standards-adherent browser and not need to use Chrome or Firefox if they don’t want to.

See also:

e5bf4e29-8c40-404c-a2cd-dbc3446a4666

subscribe-1

  • Joy

    css and Html 5 was the biggest hit when developing in web . Atleast they did something right for the first time in IE11

  • Pingback: Az Internet Explorer 11 újdonságai fejlesztőknek | MolePlex

  • maciek

    I’ve just done some image-decoding HTML5 project with a bit of computation. IE11 still is the slowest (FF, Chrome, Safari, Maxton) and doesn’t support transferable object to WebWorkers.
    Microsoft still is behind its competitors.

    • pqsk

      doesn’t surprise me at all. ?It would take a Xmas miracle for Microsoft to catch up.

    • Andy Patrizio

      Are you working with beta code or the final version? You’ll see a difference between the two. Or you should.

  • Steve From Pittsburgh

    “They all have Web standards-based equivalents, which Microsoft encourages you to use instead.”

    ARE YOU KIDDING ME!!!

    Wow, yeah, I see how this “transition” will go so very smoothly… NICE.
    I pray for the day we don’t have to support MS’s bulshit anymore.

    • pqsk

      I know my thoughts exactly….so basically more reason for companies to not upgrade, since that would mean they would have to rewrite code that already works. I too pray for this day, but I doubt that I will see it in my lifetime.

  • tmcgill

    “With Windows Blue, a.k.a. Windows 8.1, Microsoft will issue the first new version of its standard Web browser in three years.” Huh? IE 10 was released in 2012. IE 9 was released in 2011. So this will be the _third_ new version in three years.

    • pqsk

      Maybe those versions don’t count because they feel that they are not up to par with previous glorious versions. lol

  • Pingback: Ekhtarna Lak - October 3rd | ThePlanet Blogs

  • Passer

    Somethings what i realy missed, and somehow no one talk and explain why.. funcionality of IMAGE tab, tools like IMAGE REPORT VIEW and etc. They complitly strip it and avoid to explain it.