What's New in Internet Explorer 9

  • Article

New for Windows Internet Explorer 9

This topic introduces the platform features of Internet Explorer 9.

Note  Most of the new standards support in Internet Explorer 9 requires the browser to be in IE9 Standards mode. For more information, see Defining Document Compatibility.

This topic contains the following sections:

  • CSS3 Support 
    • CSS3 2D Transforms 
    • CSS3 Background and Borders Module 
    • CSS3 border-radius Properties 
    • CSS3 Color Module 
    • CSS3 Fonts Module 
    • CSS3 Media Queries 
    • CSS3 Namespaces 
    • CSS3 Values and Units Module 
    • CSS3 Selector Module 
  • CSS Object Model (CSSOM) View Module 
  • DataURI Improvements 
  • DOM Level 2 and Level 3 Support 
  • ECMAScript 5 Support 
  • F12 Developer Tools Improvements 
  • Geolocation API 
  • HTML5 Support 
  • Selectors API Level 2 
  • Scalable Vector Graphics (SVG) 
  • Pinned Sites 
    • Installation 
    • Jump List Tasks 
    • Thumbnail Toolbar 
    • Notifications 
  • User-Agent (UA) String 
  • Web Performance 
  • Related Topics

CSS3 Support

Internet Explorer 9 adds support for the following components of Cascading Style Sheets (CSS), Level 3 (CSS3).

  • CSS3 2D Transforms 
  • CSS3 Background and Borders Module 
  • CSS3 border-radius Properties 
  • CSS3 Color Module 
  • CSS3 Fonts Module 
  • CSS3 Media Queries 
  • CSS3 Namespaces 
  • CSS3 Values and Units Module 
  • CSS3 Selector Module 

CSS3 2D Transforms

The CSS3 2D Transforms Module (Working Draft) describes how elements rendered by CSS can be transformed in two-dimensional space, and includes the following:

CSS3 Background and Borders Module

Internet Explorer 9 adds support for several features of the CSS3 Backgrounds and Borders Module.

In addition, the following existing CSS properties have been updated:

CSS3 border-radius Properties

The border-radius properties enable you to curve border corners by replacing the hard corners with a quarter-ellipse and specifying the radii of each.

Example of rounded corners

CSS3 Color Module

  • RGBA Color Model: The rgb() functional notation now includes an alpha channel for transparency, rgba().
  • Hue-Saturation-Lightness (HSL) Color Model: Define colors with hsl() and hsla() functional notation.
  • The opacity Property: By setting opacity, you can control the transparency of any element.
  • The currentColor Keyword: The currentColor keyword applies the current color value to any property that accepts a color.
  • The transparent Keyword: CSS3 extends the transparent keyword to enable its use with any property that accepts a color value.

For more information about alpha transparency and hue-saturation-lightness (HSL), see Color Table.

CSS3 Fonts Module

Internet Explorer 9 adds support for the CSS3 Fonts Module and the Web Open Font Format (WOFF) (a font format for use in webpages).

  • Better conformance: The font-weight and font-size are calculated as specified by CSS3.
  • The font-stretch Property: Use font-stretch to select a normal, condensed, or expanded font from a font family.
  • The @font-face Rule: A style sheet can reference a specified font file to download using the @font-face rule.

Additionally, Internet Explorer 9 ensures backward compatibility with Embedded OpenType (EOT) File Format while adding support for WOFF File Format 1.0 and installable (no embedding permission bits set) raw TrueType fonts. To see an example of web fonts in Internet Explorer, see the Internet Explorer Test Drive: Web Fonts Sample.

CSS3 Media Queries

The CSS3 Media Queries Module enables web developers to design a style sheet for precise device capabilities, such as a very small screen, limited color palette, or low resolution. The full list of media properties supported by CSS3 media queries includes: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, and resolution. For example, the following declaration applies only when the screen width is less than 400 pixels.

@media screen and (max-width:400px) {div {border:none;}}

Check out media queries in action at Internet Explorer Test Drive: CSS3 Media Queries. For more information, see the @media rule.

CSS3 Namespaces

The CSS3 Namespaces Module enables a developer to declare a default namespace for a CSS file. That is, by default, any element or attribute selector also uses that namespace. For more information, see the @namespace rule.

CSS3 Values and Units Module

Internet Explorer 9 adds support for many new values and units described in the CSS Values and Units Module. Most of these new values and units are required to support the other CSS3 features described in this document. For more information, see CSS Length Units Reference.

CSS3 Selector Module

Internet Explorer 9 supports the additions to CSS Selector syntax specified in the CSS3 Selectors Proposed Recommendation. Listed here are the selectors that are new for Internet Explorer.

Structural pseudo-classes

  • :root — selects the root element of the document.
  • :nth-child(n) — selects elements that are the n-th child of their parent.
  • :nth-last-child(n) — selects elements that are the n-th child of their parent, counting from the last one.
  • :nth-of-type(n) — selects elements that are the n-th sibling of a type.
  • :nth-last-of-type(n) — selects elements that are the n-th sibling of a type, counting from the last one.
  • :last-child — selects elements that are the last child of their parents.
  • :first-of-type — selects elements that are the first sibling of their type.
  • :last-of-type — selects elements that are the last sibling of their type.
  • :only-of-type — selects elements that are the only sibling of their type.
  • :only-child — selects elements that are the only child of its parent.
  • :empty — selects elements that have no children, including text nodes.

Element state pseudo-classes

  • :enabled — selects form controls that are enabled.

  • :disabled — selects form controls that are disabled.

  • :checked — selects form controls that are checked.

  • :indeterminate — selects form controls whose state cannot be determined.

    Note  The :indeterminate pseudo-class is no longer defined in the current CSS3 specification, but is supported in many popular browsers.

Additional CSS3 Selectors

  • :target — pseudo-class selects an element that is the target of a named anchor. If the document's URI has no fragment identifier, there is no target element.

  • :not(s) — pseudo-class selects elements that do not match the simple selector that you specify as an argument.

  • :selection — psuedo-element selects any part of the page that the user has highlighted, including text within an editable text field. Using this pseudo-element, for example, you could apply color and background-color properties to any user-selected text within an element.

    Note  The :selection pseudo-element is no longer defined in the current CSS3 specification, but is supported in many popular browsers.

CSS Object Model (CSSOM) View Module

The CSSOM View Module defines APIs that enable web developers to inspect and programmatically change the visual properties of a document and its contents, including layout box positioning, viewport width, and element scrolling. The following list contains items that are new to Internet Explorer 9:

DataURI Improvements

The DataURI scheme is a means of directly embedding data in the context of a web page. With Internet Explorer 9, developers can now use a DataURI in the SRC attribute of a SCRIPT element. Plus, the size limit for DataURIs has been raised from 32 kilobyte (KB) in Internet Explorer 8 to 4 gigabyte (GB) in Internet Explorer 9.

DOM Level 2 and Level 3 Support

Internet Explorer 9 continues to add support for Document Object Model Level 2 (DOM Level 2) and Level 3 (DOM Level 3) specifications.

  • DOM Core (Level 2 and Level 3) and Views (Level 2): Internet Explorer 9 adds support for documentType, ProcessingInstruction, and createDocument; DOM namespaces, such as namespaceURI, localName, prefix, and others; the most commonly used Document Object Model (DOM) Level 3 Core Specification methods and properties; and, both properties from Document Object Model (DOM) Level 2 Views Specification.

  • DOM Element Traversal: The Element Traversal Specification defines the IElementTraversal interface, which enables navigation via script of the elements in a DOM tree, such as element nodes in HTML, XML, or Scalable Vector Graphics (SVG) documents.

  • DOM Level 2 and Level 3 Events: Internet Explorer 9 adds support for event registration and dispatch APIs (addEventListener, removeEventListener, createEvent, and dispatchEvent); both event capture and bubble phases; new event objects, such as UIEvent, MouseEvent, KeyboardEvent, DragEvent, and so on; DOM hierarchy mutation events, such as DOMAttrModified; and, user-defined custom events.

  • DOM Level 2 HTML: Internet Explorer 9 adds support for the Document Object Model (DOM) Level 2 HTML Specification APIs that were not available in previous versions of Internet Explorer, including HTML5 APIs such as getElementsByClassName and characterSet. Internet Explorer 9 has improved the object model in tables, particularly with respect to DOM operations for adding or removing elements.

  • DOM Level 2 Style: The Document Object Model (DOM) Level 2 Style Specification specification defines APIs to programmatically access and change both the styles of individual elements and entire style sheets by removing or modifying rules. Previous versions of Internet Explorer were able to accomplish these tasks using proprietary methods, but Internet Explorer 9 adds support for the standardized APIs, such as the getComputedStyle method.

  • DOM Level 2 Traversal and Range: The DOM Range portion of the Document Object Model (DOM) Level 2 Traversal and Range Specification defines a general way to select document content between a pair of boundary points. Boundary points are specified by a container (the parent element that contains the point) and an offset (the location in the container where the point lies). In conjunction with the HTML5 Selection interface, DOM Range capabilities enable functionality such as programmatically retrieving a range, selecting children, and deleting a selection. Internet Explorer 9 supports all DOM Level 2 Range APIs, as well as all HTML5 Selection APIs, such as the widely-used setSelectionRange method.

    The DOM Traversal portion of the Document Object Model (DOM) Level 2 Traversal and Range Specification defines a way for you to move around in a document and filter out nodes as necessary. Internet Explorer 9 supports both the two ways to traverse the DOM (NodeIterator and TreeWalker), and the two ways to filter nodes (whatToShow and NodeFilter) that are defined in the W3C specification.

  • DOM Whitespace Handling: Exposing whitespace in the DOM has been handled differently in Internet Explorer than in other browsers. The lack of interoperability in this area has been frustrating to web developers. In previous versions, Internet Explorer collapsed any whitespace it encountered and did not place it into text nodes in the DOM. In Internet Explorer 9, whitespace is preserved and placed into text nodes within the DOM, as expected. This behavior is consistent with other major browsers.

ECMAScript 5 Support

Internet Explorer 9 introduces support for many new JavaScript methods, functions, and features described in the ECMA-262: ECMAScript Language Specification (Fifth Edition).

Array Object:

Object Object:

  • The defineProperty and defineProperties functions add data and accessor properties to an object and modify existing property attributes. The getOwnPropertyDescriptor function returns a property definition.
  • The getOwnPropertyNames and keys functions return the names of the properties and methods of an object.
  • The create function creates an object that has a specified prototype and that contains defined properties. The getPrototypeOf function returns the prototype of an object.
  • The freeze, seal, and preventExtensions functions prevent the modification of property attributes and the addition of new properties. The isFrozen, isSealed, and isExtensible object functions determine whether property attributes can be modified and whether new properties can be added.

Function Object:

  • The bind method creates a function that is associated with a specified object, and that can have specific initial parameters.

Date Object:

  • Date constructors accept ISO formatted strings. The toISOString method returns a string in ISO format. For more information, see Formatting Date and Time Strings.
  • The now function returns the current date and time as a milliseconds value.

String Object:

  • The trim method returns a string that has leading and trailing white space removed.
  • An individual string character can be accessed as a read-only array-indexed property. For example, "ABCD"[0] returns A, which is the first character in the string.

For more information about the new JavaScript language features in Internet Explorer 9, see (IEBlog) Enhanced Scripting in IE9: ECMAScript 5 Support and More.

F12 Developer Tools Improvements

The following features were added to the F12 developer tools in Internet Explorer 9:

  • A dedicated Console tab. This window collects the messages that are sent to the console as a script runs, even if you are not debugging. Right-click on the console window to filter messages by type: Errors, Warnings, Asserts, Info, and Log.

  • The Network tab. You can capture HTTP and HTTPS network traffic, display and save the contents of requests and responses, and inspect captured data, such as cookies, timings, and cache information.

  • The Change user agent string option, on the Tools menu. Select a pre-defined user agent string, or define one of your own. This tool enables you to test how sites respond to different browsers, or to enter sites that do not recognize Internet Explorer 9 as a valid browser version.

Geolocation API

Internet Explorer 9 implements the functionality described in the Geolocation API Specification (Candidate Recommendation). The Geolocation API centers around the geolocation object, which provides the getCurrentPosition method for getting the current geographic position, and the watchPosition method for watching the position as it changes over time.

HTML5 Support

Internet Explorer 8 introduced support for the HTML5 (Working Draft) specification, and Internet Explorer 9 continues to build on that foundation by introducing the following features:

HTML parsing in Internet Explorer 9 aligns more with behavior described in the HTML5 (Working Draft) specification. The following items are supported in Internet Explorer 9:

  • Support for SVG embedded directly in HTML. For more information about SVG, see Scalable Vector Graphics (SVG) later in this document.
  • Documents that have a mime-type of application/xhtml+xml as XHTML.
  • Unrecognized elements are parsed as generic elements, which allows them to work like a typical element and receive CSS styles in a typical way. This type of parsing removes the need for developer workarounds, like, for example, calling document.createElement to force Internet Explorer to recognize an element.
  • Overlapping tags are resolved at parse time as required by HTML5, which creates a more predictable DOM hierarchy.
  • Text in script or style blocks are persisted as text nodes. This makes source code available in the DOM as a text node so you can manipulate it with script.

Internet Explorer 9 also adds support for the following HTML5 text selection APIs:

  • The Selection object represents a list of Range objects, as defined by Document Object Model (DOM) Level 2 Traversal and Range Specification.
  • The getSelection method returns the Selection object for the window, which represents the currently selected text.
  • The selectionStart property gets the offset to the start of the currently selected text, and can also set the start of the selection.
  • The selectionEnd property gets the offset to the end of the currently selected text, and can also set the end of the selection.

Selectors API Level 2

The Selectors API Level 2 specification defines a set of APIs that enable you to evaluate selectors in the context of the DOM. Internet Explorer 8 implemented the querySelector and querySelectorAll methods. Internet Explorer 9 adds support for the msMatchesSelector method.

Scalable Vector Graphics (SVG)

Internet Explorer 9 implements the following functionality of the Scalable Vector Graphics (SVG) 1.1 (Second Edition) specification.

Internet Explorer 9 supports the following types of SVG markup:

  • SVG fragments in HTML5 embedding, without using a foreign object (that is, simply include an <svg> tag within your HTML)

  • SVG as full document type (with .svg file extension and svg root element)

  • SVG in XML or XHTML (similar to the HTML5 method, only with XML or XHTML files)

  • SVG as a CSS image

  • SVG using the object element, as in the following (note the type, height, and width attributes):

    <object data="rect2.svg" width="100%" height="400px" type="image/svg+xml"></object>

  • SVG using the img, embed, iframe, or frame elements, as in the following:

    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

For more information, see:

Pinned Sites

Internet Explorer 9 provides a way for users to quickly access the sites they use most often. By dragging the site icon or tab, you can pin a website to the Windows taskbar or Start menu. Launching a pinned site starts an isolated instance of Internet Explorer. Although any website can be pinned, a website author can take advantage of the pinned site API to make the website feel more like a Windows application. For more information, see Introduction to Pinned Sites.

Installation

These methods describe how to detect if the site is already pinned, or if the pinned site was launched for the first time.

  • msIsSiteMode: Site developers use this method to determine if the webpage was launched from a pinned site shortcut.
  • msAddSiteMode: This method installs the webpage as a shortcut on the Windows Start menu. The shortcut is not pinned to the taskbar automatically.
  • msIsSiteModeFirstRun: This method returns true if the pinned site window is running for the first time.

Jump List Tasks

A Jump List provides quick access to important features of your website.

  • msSiteModeCreateJumpList: Use this method to create your own Jump List group. Only one custom group can be active at a time.
  • msSiteModeAddJumpListItem: Dynamically add items to your Jump List with this method. When you select an item from the Jump List, the target of the URL opens in a new tab or window (depending on user settings). You can also define static tasks for your pinned site shortcut by using meta elements. For more information, see msAddSiteMode.
  • msSiteModeShowJumpList: This method immediately updates the Jump List with new items you have just added. If you do not call msSiteModeShowJumpList, the new items will appear the next time the pinned site is launched.
  • msSiteModeClearJumpList: Because the number of Jump List items is limited, older items might be removed as new items are added. Sometimes, you might want to clear the list and, in some cases, add a new custom list altogether. This method purges the items from the Jump List.

Thumbnail Toolbar

The Thumbnail Toolbar can contain commonly used commands, such as Play/Pause, or Favorite. The buttons are visible on the Preview window of the pinned site's taskbar button.

Notifications

These methods enable you to alert users to activity in your pinned site.

  • msSiteModeSetIconOverlay: You can use an icon overlay to communicate alerts, notifications, and status to users.
  • msSiteModeClearIconOverlay: This method removes an overlay icon that was previously set with the msSiteModeSetIconOverlay method.
  • msSiteModeActivate: This method flashes the taskbar button to indicate important application states.

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.) Internet Explorer 9 sends a short UA string by default. This change improves overall performance, interoperability, and compatibility. Internet Explorer 9 no longer sends additions to the UA string made by other software installed on the user's machine, such as Microsoft .NET and others.

There are four changes to the UA string that developers need to be aware of:

  1. 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.

  2. The version token is incremented from "MSIE 8.0" to "MSIE 9.0"

  3. The Trident token is incremented from "Trident/4.0" to "Trident/5.0"

  4. Internet Explorer 9 sends 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.) 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)

Web Performance

The Web Performance API can help you identify and troubleshoot problems with webpage performance. The following objects are defined.