Internet Explorer 9 Guide for Developers

March 14, 2011

About CSS DOM ECMAScript 5 HTML5 SVG Tools For Developers Other New Features

New Tools for Web Developers This section first describes Pinned Sites, a new way to strengthen the connection between your website and your users. Then, it describes the new way to assign versions in Internet Explorer 9, to help address compatibility concerns in the migration to the modern version of Internet Explorer. Next, you’ll read about improvements to the Internet Explorer developer tools, which were first incorporated directly into the browser in Internet Explorer 8. Pinned Sites When you take advantage of pinned sites, users become even more immersed in your website. Pinned sites are a new set of tools that feature a site-enhanced user interface, with an enlarged favorites icon (favicon), plus Back and Forward buttons and other interface elements that can be unified with the brand and overall appearance of the site. Integration with Windows 7 enables new ways for people to experience developer websites using the latest Windows APIs to create website Jump Lists, thumbnail toolbars, and notifications. (Pinned sites are supported only with the Windows 7 taskbar.) Pinning sites to the taskbar Users can do one of the following to pin a site to the taskbar: “Tear” off a tab by clicking and dragging it to the taskbar Drag the favorites icon (favicon) from the address bar to the taskbar Drag a custom image with the “msPinSite” class (a “drag-to-pin” image) to the taskbar After a site is pinned, it renders with custom enhancements—for instance, the Back and Forward buttons match the color scheme of the website. Sites can also be pinned to the Start menu. Jump Lists Jump List tasks are application-specific actions that are tailored to a pinned website. They are based on the same feature for applications in Windows 7.  By using Jump List tasks, a website can surface its most frequently used commands to users. You can define Jump List tasks based on both your website’s features and the key actions a user is expected to perform. The tasks provide a set of static links that users can access at any time, even if Internet Explorer is not running. For more information about Jump List tasks, see How to Create Dynamic Jump Lists on MSDN. Thumbnail Toolbars A thumbnail toolbar is essentially a “remote control” for your website. The toolbar appears underneath the thumbnail preview when you hover over a pinned site's taskbar button. This feature is especially useful for sites that implement video or audio playback, but thumbnail toolbars have many potential uses. Thumbnail toolbar buttons might include controls for controlling playback, adding or sharing favorites, search, changing online status, instant purchases, or rating webpages. For more information about creating thumbnail toolbars, see How to Create Thumbnail Toolbars on MSDN. Notifications Just like applications in Windows 7, pinned sites can communicate notifications and status to users by displaying an overlay icon on top of the pinned site’s taskbar button. Overlay icons help draw attention to a website when the view to the pinned site’s window is blocked, for instance, when the browser window is minimized or blocked by another window. You can use overlay icons to supply important status information or notifications such as network status, online status, or new mail. For more information about notifications, see How to Provide Notifications on MSDN. Discovering Pinned Sites Internet Explorer 9 will not notify a user if the site can be pinned. It is up to the developer to advertise these features. There are many ways you can alert your users to the pinned site features of your website, including fly-ins, drop-downs, banners, and div effects; drag-to-pin icons and images; and providing a first-run experience that advertises the features of your pinned site after the user pins the site for the first time. For more information on discoverability, see How to Improve Discoverability on MSDN. For how-to information and code samples about pinned sites, see the MSDN Developer Center on Pinned Sites. For a demonstration of pinned sites, see the Internet Explorer 9 Test Drive site. Platform Versioning Internet Explorer 8 introduced document compatibility modes, which are an extension of the compatibility mode introduced in Microsoft Internet Explorer 6. Document modes enable you to choose the specific rendering mode that Internet Explorer uses to display your web pages, and are described in detail in Defining Document Compatibility on MSDN. New Document Mode Internet Explorer 9 adds a new document mode—Internet Explorer 9 Standards mode—which enables the fastest performance, scales to handle the demands of modern web applications, and implements the latest standards support. Internet Explorer 9 runs in IE9 Standards mode by default, unless otherwise specified on the page or by the web server. The best way to ensure that Internet Explorer 9 renders your page in the latest document mode is to use a standards !DOCTYPE directive and no X-UA-Compatible meta tag or HTTP header. The !DOCTYPE to invoke IE9 Standards mode is the following. <!DOCTYPE html> Of course, you can use the !DOCTYPE and X-UA-Compatible meta tag or HTTP header to change the default as you see fit. To determine the current document mode, press F12 to open the Internet Explorer F12 developer tools, and then look on the right side of the menu bar. To override the document mode, on the Document Mode menu, click Internet Explorer 9 Standards. User-Agent (UA) String The user-agent (UA) string identifies the browser to host servers and provides certain system details. (For more information about UA strings, see Understanding User-Agent Strings on MSDN.) Internet Explorer 9 is different from previous versions of Internet Explorer in that it sends the short UA string by default. This change improves overall performance, interoperability, and compatibility. Internet Explorer 9 will no longer send additions to the UA string made by other software installed on the user’s machine, such as .NET and others. Internet Explorer 9 sends the new Internet Explorer 9 UA string. There are four changes to the UA string for Internet Explorer 8 that developers need to be aware of: The application version is incremented from “Mozilla/4.0” to “Mozilla/5.0” to match other browsers. This change signals that Internet Explorer 9 is an interoperable browser. The version token is incremented from “MSIE 8.0” to “MSIE 9.0”. The Trident token is incremented from “Trident/4.0” to “Trident/5.0”. Internet Explorer 9 will send the following short UA string without additions made by other software that is installed on the computer: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0) Compatibility View in Internet Explorer 9 maps to IE7 Standards Mode, just as Internet Explorer 8 does. (For more information about Compatibility View, see Understanding the Compatibility View List on MSDN.) When in Compatibility View, Internet Explorer 9 sends the following UA string: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0) For more information about the new UA string for Internet Explorer 9, see the Internet Explorer Team Blog post "Introducing IE9’s User Agent String". F12 Developer Tools To access the F12 developer tools in Internet Explorer 9, press F12; or, on the Tools menu, click F12 developer tools. If you used the developer tools in Internet Explorer 8, you’ll notice feature enhancements and performance improvements right away. Console Tab F12 developer tools in Internet Explorer 9 introduces a Console tab for exposing scripting events. When you inspect script, several toggle buttons appear: Error, Warning, and Message. Each button displays the number of messages of each type. Network Tab Internet Explorer 9 adds a network inspection tool to its developer tools. Access the tool by clicking the Network tab. You can then: Capture HTTP and HTTPS network traffic. Display (and save) the contents of captured requests and responses. Display extra details about captured data, such as cookies, sizes, timings, and cache information. User-Agent Switcher Tool With the new user-agent (UA) switcher tool, you can modify the UA string that identifies the browser type and version to the web server. (For more information about the new UA string in Internet Explorer 9, see User-agent (UA) String in this document.) The chosen UA string will be sent across the network as a header in every request. To change the UA string of the browser, on the developer tools’ Tools menu, point to Change user agent string, and then choose the browser whose UA string you want to send. Measuring Real-World Performance With the F12 developer tools in Internet Explorer 9, you can now measure even more aspects of website performance than in previous versions of Internet Explorer. However, you cannot measure the performance that users actually experience. To solve this problem, some sites develop their own libraries that try to measure live performance on webpages, but this can introduce overhead that actually slows down the pages for users. We believe that the W3C WebTiming specification—which, as of this writing, is in the “Working Draft” stage—is a good conceptual foundation for responsibly solving this problem. The WebTiming functionality can be accessed in Internet Explorer 9 using the window.msPerformance interface in the DOM. Developers can also enable script debugging in the F12 developer tools and then access the window.msPerformance object. To view a demonstration of the window.msPerformance object in use, see the Internet Explorer Test Drive site.