Internet Explorer 9 Guide for Developers

March 14, 2011

The Internet Explorer 9 Guide for Developers provides a look at the features and improvements in Internet Explorer 9. By using this guide, web developers and designers can take full advantage of these enhancements. Developers can also experience the platform in action using the Internet Explorer Test Drive. Contents Introduction All-around browser performance Web standards support for same markup New graphics capabilities harnessing the power of Windows PCs Improved Interoperability through Standards Support List of New Features Cascading Style Sheets, Level 3 (CSS3) CSS3 2D Transforms CSS3 Backgrounds & Borders Module CSS3 Color Module CSS3 Fonts Module CSS3 Media Queries Module CSS3 Namespaces Module CSS3 Values and Units Module CSS3 Selectors Additional CSS Capabilities CSSOM View Module Document Object Model Improvements Introducing the Enhanced DOM Parsing and Serializing XML to and from the DOM Document Object Model (DOM) Levels 2 and 3 DOM Core (L2 and L3) and Views (L2) DOM Element Traversal DOM L2 and L3 Events DOM L2 HTML DOM L2 Style DOM L2 Traversal and Range DOM Whitespace Handling ECMAScript 5 HTML5 HTML5 Geolocation HTML5 video and audio Elements HTML5 canvas Element HTML Parsing Improvements HTML5 Selection APIs HTML5 Semantic Elements

Scalable Vector Graphics (SVG) Basic Shapes Clipping, Masking, and Compositing Coordinate Systems, Transformations, and Units Document Structure Gradients and Patterns Interactivity Linking and Views Painting and Color Paths Text New Tools for Web Developers Pinned Sites Platform Versioning New Document Mode User-agent (UA) String Developer Tools Console tab Network tab User-agent switcher tool Measuring real-world performance Data URI ICC Color Profiles Selectors API Level 2 Revision History

Introduction
Welcome to Windows Internet Explorer 9. As a developer, you want to know the latest information about the browsers you and your customers use. Internet Explorer 9 is the latest version of the worlds most popular web browser. We designed Internet Explorer 9 to help the web development community create rich, interoperable, standardscompliant web applications by providing the platform, tools, and features for the future web. This document shows you, the web developer whose customers rely on Internet Explorer, how to use these new enhancements in your websites and applications. Be sure to check out the accompanying Test Drive site for a demonstration of these features in action. To offer feedback and see more information on what's new in Internet Explorer 9, see the Release Notes, as well as What's New in Internet Explorer 9 on MSDN. For the latest news about Internet Explorer 9, see the IE Team Blog. And as always, for the very latest developer information about Internet Explorer, visit the Internet Explorer Developer Center on MSDN. Internet Explorer 9 is intended to help developers better understand

how Internet Explorer 9 has progressed in the following dimensions of the platform: All-around browser performance Web standards support to help enable the same markup to work identically across different browsers New graphics capabilities that harness the power of Windows PCs

All-around Browser Performance

Browser performance involves many different sub-systems within the browser. Different sitesand different activities within the same site place different loads and demands on the browser. For instance, a web application like Windows Live Mail or Microsoft Office Web Apps exercises browser subsystems in completely different ways than a news aggregation site like Bing News or Digg.

Introducing Chakra, the New JavaScript Engine

Script engine performance is just one part of the overall browser performance picture. Script performance in Internet Explorer 8 improved exponentially over that of Internet Explorer 7, and Chakra, the new JavaScript engine in Internet Explorer 9, does it again. The Chakra engine interprets, compiles, and executes code in parallel and takes advantage of multiple CPU cores, when available. For more details, see "The New JavaScript Engine in Internet Explorer 9" on the IE Team Blog. Of course, the Internet Explorer team is looking at the performance characteristics of all the browsers subsystems as real-world sites use them. The goal is to deliver better performance across the board for real-world sitesnot just benchmarks.

Web Standards Support for Same Markup

Internet Explorer provides rich, interoperable capabilities to web developers. The Internet Explorer Team knows you dont want to rewrite and retest your websites again and again; standards adoption by browser vendors is a good way to reach that objective. With Internet Explorer 8, the Internet Explorer team delivered a highly interoperable implementation of CSS 2.1, and concurrently contributed a test suite with over 7200 tests to the World Wide Web Consortium (W3C). This is important. Without validation tests, standards are more challenging to implement consistently, thereby making them difficult for site developers to rely on.

Internet Explorer 9 makes significant investments in standards support and interoperability. For instance, new HTML5 support, better support for a number of CSS3 features, anda first for Internet Explorerbuiltin support for SVG are all part of Internet Explorer 9.

New Graphics Capabilities that Harness the Power of Windows-based PCs

The Windows ecosystem provides amazing hardware innovation. With Internet Explorer 9, web developers can now take advantage of that innovation with hardware-driven rendering of graphics and text. Internet Explorer 9 uses the DirectX family of Windows application programming interfaces (APIs) to enable several advances for web developers. We have moved all graphics and text rendering from the CPU to the graphics card by using Direct2D and DirectWrite. Graphics hardware acceleration means that rich, graphically intensive sites can render faster on Windows while using less CPU power. Plus, you can take advantage of these changes automatically while you author sites with the same standards you are used to.

Improved Interoperability Through Standards Support

Important The new standards support in Internet Explorer 9 requires the browser to be in Internet Explorer 9 Standards mode (IE9 mode). The best way to do this is to use a standards !DOCTYPE directive and no XUA-Compatible meta tag or HTTP header. The !DOCTYPE to invoke IE9 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 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. See the Platform Versioning section of this guide for updates about document mode behaviors in Internet Explorer 9.

List of New Features

For your convenience, this list contains all the new developer features in Internet Explorer 9. For information about changes from prerelease builds of Internet Explorer 9, see Revision History.

Enhanced CSS3 support o Rounded corners via the border-radius property o CSS3 background and border features o The opacity property o RGBA, HSL, and HSLA color models o CSS3 fonts properties and new web font formats o CSS3 media queries o CSS3 namespaces o CSS3 values and units o CSS3 selectors Improved data URI support Document Object Model (DOM) Improvements o Enhanced DOM capabilities o Parsing and serializing XML to and from the DOM o New DOM Level 2 (L2) and Level 3 (L3) support and updated behaviors DOM Core (L2, L3) and Views (L2) DOM Element Traversal DOM Events (L2, L3) DOM L2 HTML DOM L2 Style DOM L2 Traversal and Range o New whitespace handling behavior ECMAScript feature enhancements Added HTML5 support o Geolocation o The video and audio elements o The canvas element o The Selection interface o Improved parsing of HTML elements o Text selection APIs ICC v2 and v4 color profile support on images New Selectors API Level 2 support for the msMatchesSelector method SVG features o Basic shapes: rectangles, circles, ellipses, lines, polylines, and polygons o Clipping, masking, and compositing o Coordinate systems, transforms, and units o Document structure, metadata, and extensibility functionality o Gradients and patterns o Interactivity o Linking and views o Painting and color o Paths, including full capabilities of the path element and d attribute o Text

Additional platform versioning capabilities o Pinned sites o New document mode o New user-agent (UA) string Developer Tools additions o Performance improvements o Console tab o Network tab o UA switcher tool o Real-world performance measurement

Revision History
March 16, 2010: Created for Internet Explorer Platform Preview. April 15, 2010: Updated with information about: CSS3 Namespaces Module support Additional CSS3 selectors support More DOM support details More SVG support details, including embedding limitations ICC color profiles support May 5, 2010: Updated for Internet Explorer Platform Preview Build 2 with information about: More DOM support details New DOM features: o New DOM Core APIs o DOM HTML o DOM Traversal o New DOM L3 events: DOMAttrModified event DOMContentLoaded event Composition events New user-agent (UA) string Data URI changes Developer tools additions: Console tab and UA switcher tool June 23, 2010: Updated for Internet Explorer Platform Preview Build 3 with information about: New CSS3 features: o New background and border features o HSL and HSLA color models o CSS3 Fonts support o CSS3 Values and Units support o New display property values New DOM Element Traversal support New HTML5 features:

o o

video, audio, and canvas elements Selection interface New Selectors API Level 2 support: o matchesSelector method New SVG features: o Clipping, masking, and compositing o Gradients and patterns o Interactivity o Linking and views o Painting and color o Text

August 4, 2010: Updated for Internet Explorer Platform Preview Build 4 with information about: Chakra, the new JavaScript engine Enhanced DOM capabilities New support for the WebIDL specification The window.msPerformance object Fleshed out canvas section with links to examples September 15, 2010: Updated for Internet Explorer 9 Beta with new links and information about: DOMParser and XMLSerializer Pinned Sites October 28, 2010: Updated for Internet Explorer Platform Preview Build 6 with information about: CSS 2D Transforms HTML5 Semantic Elements Fixed supported ICC color profiles version number February 10, 2011: Updated for Internet Explorer 9 Release Candidate with information about: HTML5 Geolocation Pinned Sites (updated) Compatibility Mode (updated) Other miscellaneous document fixes February 18, 2011: Updated with additional information about: Pinned Sites HTML5 Canvas March 14, 2011: Updated for Internet Explorer 9 (RTW): updated version text ECMAScript 5 (added links)

Cascading Style Sheets, Level 3 (CSS3)

Internet Explorer 9 has more support for Cascading Style Sheets (CSS) than any prior Microsoft browser. Continuing on the work that was done in Internet Explorer 8where Internet Explorer became fully compliant with the CSS2.1 specificationInternet Explorer 9 adds support for many components of CSS3. Note It is important to remember that many CSS3 modules are still in the Working Draft or Last Call stages. Until they reach the Candidate Recommendation stage, they could change significantly. For more information, see the latest CSS3 draft modules.

CSS3 2D Transforms
Internet Explorer 9 adds support for CSS3 2D Transforms. CSS 2D Transforms enables elements that are rendered by CSS to be transformed in two-dimensional space. Internet Explorer 9 supports the following 2D Transforms properties: The -ms-transform property applies one or more twodimensional transformation function to an element. The -ms-transform-origin property establishes the origin of transformation for an element. This property is useful when you want to change the default origin (the center).

Note Because the CSS 2D Transforms module has not yet received Candidate Recommendation status from the W3C, both the transform and transform-origin properties must be used with the -ms- prefix to be recognized by Internet Explorer 9. For more information on vendorspecific prefixes, see IE9, Vendor Prefixes, and Developers on the IE Team Blog. Internet Explorer 9 supports the following transformation functions for use with the -ms-transform property: The matrix(a,b,c,d,e,f) function specifies a 2D transformation in the form of a transformation matrix of six values (a through f). The translate(tx,[ty]) function specifies a 2D translation by the vector [tx,ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not specified, its value is zero. (Translation-value parameters can be either percentages or lengths.). The translateX(tx) function specifies a translation by the given

amount in the x direction. The translateY(ty) function specifies a translation by the given amount in the y direction. The scale(sx,[sy]) function specifies a 2D scale operation by the [sx,sy] scaling vector that is described by the two parameters. If the second parameter is not provided, it takes a value equal to the first. The scaleX(sx) function specifies a scale operation by using the [sx,1] scaling vector, where sx is given as the parameter. The scaleY(sy) function specifies a scale operation by using the [1,sy] scaling vector, where sy is given as the parameter. The rotate(angle) function specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. The skewX(ax) function specifies a skew transformation along the x-axis by the given angle. The skewY(ay) function specifies a skew transformation along the y-axis by the given angle. The skew(ax,[ay]) function specifies a skew transformation along the x- and y-axes. The first angle parameter specifies the skew on the x-axis. The second angle parameter specifies the skew on the y-axis. If the second parameter is not given, a value of zero is used for the y angle (that is, no skew on the y-axis).

The -ms-transform-origin property accepts one or two values. Each value can be a keyword, a length, or a percentage. If the -ms-transform-origin property is not set, the transform begins in the center (equal to a -mstransform-origin value of 50% 50%). The first value indicates the horizontal position (the position along the x-axis), and can be negative. This value can be a length value (in any of the supported length units), a percentage (of the total box length), or one of the following three keywords: left (equal to 0% or a zero length), center (equal to 50% or half the box length), or right (equal to 100% or the full box length). The second value indicates the vertical position (the position along the y-axis), and can be negative. This value can be a length value (in any of the supported length units), a percentage (of the

total box height), or one of the following three keywords: top (equal to 0% or a zero height), center (equal to 50% or half the box height), or bottom (equal to 100% or the full box height). If only one value is specified, the second value is assumed to be center. Consider the following markup. div { -ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg); -ms-transform-origin: 60% 100%; } In Internet Explorer 9, setting the -ms-transform-origin property to 60% 100% sets the transforms origin point to 60% of the length and 100% of the height of the element to be transformed. The -ms-transform property first moves the element 200 pixels in the x direction and 100 pixels in the y direction. It then scales the element by 75%. Finally, it rotates the element 40 degrees clockwise around the origin point set by the -ms-transform-origin property. For more information on CSS3 2D Transforms, see MSDN.

CSS3 Backgrounds and Borders Module

Internet Explorer 9 adds support for several features of the CSS3 Backgrounds and Borders Module. The most notable new feature, the border-radius properties, is also the most requested CSS border feature. Internet Explorer 9 also introduces support for the following new CSS3 properties:

background-clip background-origin background-size box-shadow

Internet Explorer 9 also adds functionality to the following existing CSS background and border properties:

background-color: Supports CSS3 Color. background-image: Supports multiple values and SVG images. background-repeat: Supports multiple values, plus the space and round values. background-attachment: Supports multiple values, plus the local value. background-position: Supports multiple values. background: Updated for CSS3. border-color: Supports CSS3 Color.

The border-radius properties

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

border-radius (The value given will specify the radius for all four corners of a box.) border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius

For example, take a look at the following markup: border-radius: 100px 66.66px 200px 50px; border: 10px blue double; padding: 24px; width: 400px;height: 125px; This will generate the following when applied to a text block.

CSS3 Color Module

Internet Explorer 9 adds support for the CSS3 Color module. This module includes support for the RGBA, HSL, and HSLA color models; the opacity property; and the currentColor keyword. Internet Explorer 9 also expands support for the transparent keyword.

RGBA Color model

The RGB color model has been extended to include an alpha channel, or transparency. The format of an RGBA value is rgba(red,green,blue,alpha).The red, green, and blue components are

identical to those of the RGB color model, and are expressed as integers or percentages. The alpha component is expressed as a value between 0.0 (completely transparent) and 1.0 (completely opaque). For instance, to set the background color to red with 50% transparency, you can include either of the following two CSS declarations in your style sheet: background-color: rgba(255,0,0,0.5); background-color: rgba(100%,0%,0%,0.5); Be aware that though RGB values support hexadecimal notation, RGBA values do not.

HSL Color Model

Internet Explorer 9 supports the CSS3 Color modules hue-saturationlightness (HSL) color values. In the HSL color model, hue is defined as the indicated colors angle on the color wheel (for instance, red is 0 or 360, green is 120, and blue is 240). Saturation and lightness are expressed as percentages. For instance, the following CSS declaration defines a red background. background-color: hsl(0,100%,50%);

HSLA Color Model

Internet Explorer 9 also extends the HSL color model with an alpha channel. As with the RGBA model, the alpha channel is expressed as a value between 0.0 and 1.0. For instance, the following CSS declaration defines a red background with 50% transparency. background-color: hsla(0,100%,50%,0.5);

The opacity Property

Internet Explorer 9 adds the CSS3 Color modules opacity property, which enables you to control transparency at the element level. Similar to the alpha component of RGBA values, the opacity value is a number that ranges between 0.0 (completely transparent) to 1.0 (completely opaque). The opacity property is available on all elements. The following example shows the opacity property on the color navy, with opacity values in increments of 0.2 from 0 to 1. <div class="opacity_sample"> <div style="background: navy; opacity: 0;"></div>

<div style="background: navy; opacity: 0.2;"></div> <div style="background: navy; opacity: 0.4;"></div> <div style="background: navy; opacity: 0.6;"></div> <div style="background: navy; opacity: 0.8;"></div> <div style="background: navy; opacity: 1;"></div> </div> This example generates the following output for a 25125-pixel div.

Color Keywords
The CSS3 Color module makes the list of color keywords for CSS identical to that for SVG 1.0. Though SVG support is new in Internet Explorer 9, this change was implemented in Internet Explorer 8. Internet Explorer 9 introduces the CSS3 Color modules currentColor keyword, which indicates the current value of the color property on any property that accepts color. When set on the color property itself, currentColor is equivalent to color:inherit. Internet Explorer 9 also expands the use of the transparent keyword beyond the border-color and background-color properties. It can now be used with any property that accepts the color property.

CSS3 Fonts Module

Better typographic control has been a consistent feature of each new version of CSS. At the same time, the lack of an interoperable web font format can be frustrating. Internet Explorer 9 enhances existing support for CSS fonts to provide compliance with the CSS3 Fonts Module. It also adds support for the Web Open Font Format (WOFF) and raw TrueType fonts.

Font Properties
The font-weight property has been updated so that Internet Explorer 9 calculates font weights as specified in the CSS3 Fonts Module.

The font-size property has been updated so that each keywords scaling factor is as defined in the CSS3 Fonts Module. Also, keywords and HTML heading sizes are now mapped as specified in the CSS3 Fonts Module. The font-stretch property is new in Internet Explorer 9, and selects a normal, condensed, or expanded face from a font family. This property is also available as a @font-face rule descriptor.

The @font-face Rule

The @font-face rule enables font linking. That is, a style sheet can reference a specific font file for the browser to download and use. For instance, consider the following markup. @font-face { font-family: MyFont; src: url(http://mysite/fonts/MyFont.ttf) format("embedded-opentype"); } p {font-family: MyFont, serif; } In this example, the @font-face rule instructs the browser to go to the URL specified in the src descriptor to download the font file that contains the specified font. In Internet Explorer 8 and earlier, the src descriptor was incorrectly ignored if it contained an optional format string, such as the one shown in the previous example. In Internet Explorer 9, the src descriptor is parsed as expected. Internet Explorer 9 also adds support for the unicode-range descriptor, which enables you to specify the range of Unicode characters supported by a given font. For instance, the following code example specifies the range of basic ASCII characters. @font-face { font-family: MyFont; src: url(http://mysite/fonts/MyFont.ttf); unicode-range: U+0-7F; }

Web Font Formats

Microsoft created Internet Explorer 9 to maximize web font choice. To that end, we have done the following:

Ensured backward compatibility with continued support for Embedded OpenType (EOT) Added support for the Web Open Font Format (WOFF), which

repackages sfnt-based font files (TrueType, OpenType, and Open Font Format fonts) by compressing each table individually using a ZIP compression format Added support for installable (no embedding permission bits set) raw TrueType fonts

To see an example of web fonts in Internet Explorer 9, see the Web Fonts or More Web Fonts demos on the Internet Explorer Test Drive For more information on CSS3 fonts in Internet Explorer 9, see MSDN.

CSS3 Media Queries Module

The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities. For instance, you might want to design pages differently for users browsing on a mobile device (that has a very small screen, limited color palette, low resolution, and so on) versus a netbook (that has a small screen, full color palette, high resolution, and so on) versus a standard computer (that has a large screen, full color palette, high resolution, and so on). The full list of media properties supported by CSS3 media queries includes width, height, device-width, device-height, orientation, aspectratio, device-aspect-ratio, color, color-index, monochrome, and resolution. The following declaration is a typical media query, using the @media rule. @media screen and (max-width:400px) {div {border:none;}} In this case, screen indicates the target media type, and max-width is the target media property. The declaration states that the specified rules (no border on div elements) are only to be applied when the page is displayed on a screen with a width of at most 400 pixels. You can use media properties together to create even more specific queries, such as the following. @media screen and (max-width:400px) and (max-height:600px) {} This declaration applies the specified rules when the medium is a screen that has a width of no more than 400 pixels and a height of no more than 600 pixels. Check out media queries in action on the Internet Explorer Test Drive site. Internet Explorer 9 introduces support for media queries in CSS, HTML, XML, and XHTML. For more information about media queries in Internet

Explorer 9, see MSDN.

CSS3 Namespaces Module

Internet Explorer 9 supports much of the CSS3 Namespaces Module. CSS namespaces enable a developer to declare a default namespace for a CSS file. That is, by default, any element or attribute selector also uses that namespace. CSS namespaces also enable a developer to create namespace prefixes, which can be used later within the CSS file. Internet Explorer 9 further enables you to declare a namespace that targets SVG elements.

The @namespace at-rule

The @namespace at-rule declares an XML namespace (and, optionally, its prefix) and associates it with a string that represents a namespace name. For example, the following rule declares a default namespace. @namespace "http://www.w3.org/1999/xhtml"; The default namespace is applied to names that dont have an explicit namespace component. If an @namespace rule is declared with a prefix, the prefix can be used in namespace-qualified names. For example, given the following namespace declaration for a namespace prfx @namespace prfx "http://prfx.contoso.com"; the following selector matches E elements in the namespace referred to by the prfx prefix. prfx|E The following example is slightly more complex. @namespace prfx "http://prfx.contoso.com"; @namespace msft "http://msft.example.com"; p {background-color:red;} prfx|p {background-color:blue;} msft|p {background-color:green;} In this example, two namespace prefixes are created. First, p elements in any namespace are colored red. Any p elements in the prfx namespace are then recolored blue, and p elements in the msft namespace are

recolored green. The following example styles an SVG element. @namespace svg|circle {fill:red;} svg "http://www.w3.org/2000/svg";

Using the namespace and declaration from this example, all circles created with SVG will be given a red fill. For more information, see the @namespace rule reference page on MSDN.

CSS3 Values and Units Module

Internet Explorer 9 adds support for many of the new values and units described in the CSS3 Values and Units Module. Most of these new values and units are required to support the other CSS3 features described in this document. Internet Explorer 9 adds support for the following new values and units:

deg: degrees (angle unit) grad: grads (angle unit) rad: radians (angle unit) turn: turns (angle unit) ms: milliseconds (time unit) s: seconds (time unit) rem: font size of the root element (relative length unit) vw: viewport width (relative length unit) vh: viewport height (relative length unit) vm: smaller of viewport width or height (relative length unit) ch: zero-width (width of the zero glyph in the rendering font; relative length unit)

In addition, Internet Explorer 9 updates the attr() function that is used for generated content. It can now be applied on any property and accept multiple arguments. The following CSS3 function is new for Internet Explorer 9:

calc(): calculates values using arithmetic operators and is usable wherever length values are allowed

For more information on CSS functions, see CSS Values and Units Reference on MSDN.

CSS3 Selectors
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 9. (For full details about selector support in Internet Explorer, see CSS Compatibility and Internet Explorer on MSDN.) For more information, see the CSS Selectors reference section on MSDN. To see an example of CSS3 selectors in action, go to the Internet Explorer Test Drive site.

Structural Pseudo-Classes
Structural pseudo-classes enable selection based on extra information in the document tree that cant be selected using simple selectors or combinators. The following selects an E element that is the root of the document. E:root The following selects an E element that is the n-th child of its parent. E:nth-child(n) The following selects an E element that is the n-th child of its parent, counting from the last one. E:nth-last-child(n) The following selects an E element that is the n-th sibling of its type. E:nth-of-type(n) The following selects an E element that is the n-th sibling of its type, counting from the last one. E:nth-last-of-type(n) The following selects an E element that is the last child of its parent. E:last-child The following selects an E element that is the first sibling of its type. E:first-of-type

The following selects an E element that is the last sibling of its type. E:last-of-type The following selects an E element that is the only child of its parent. E:only-child The following selects an E element that is the only sibling of its type. E:only-of-type The following selects an E element that has no children (including text nodes). E:empty

The target Pseudo-Class

The target pseudo-class selects the target element of the referring URI. A fragment identifier is used to identify a location within a page, and is formed using a number sign followed by an anchor identifierfor example, http://www.example.com/mypage.html#section_3. The following selects the div element of class important that is the target element of the referring URI. If the documents URI has no fragment identifier, there is no target element. div.important:target

UI Element States Pseudo-Classes

The UI element states pseudo-classes are used to select UI elements (form controls such as radio buttons or check boxes) that are in a certain stateenabled, disabled, or selected (checked). The following selects an E form control element that is enabled. E:enabled The following selects an E form control element that is disabled. E:disabled The following selects an E form control element that is selected.

E:checked The :indeterminate pseudo-class selects radio buttons and check boxes whose toggle states cannot be determinedthey are neither checked (selected) nor unchecked (cleared). The following selects an E form control element whose state cannot be determined. E:indeterminate Note The :indeterminate pseudo-class is no longer defined in the current CSS3 specification, but is supported in many popular browsers.

The negation Pseudo-Class

The negation pseudo-class takes a simple selector as an argument to select elements that are not selected by that argument. The following selects an E element that does not match the simple selectors: E:not(s)

The UI element fragments pseudo-element

The UI element fragments pseudo-element, ::selection, is used to select any part of the page that the user has highlighted, including text within an editable text field. This pseudo-element can be applied to the color and background-color properties. The following selects any userselected text within an E element. E::selection Note The ::selection pseudo-element is no longer defined in the current CSS3 specification, but is supported in many popular browsers.

Additional CSS Capabilities

Some support for the CSS Object Model (OM) View Module Working Draft has been implemented in Internet Explorer 9.

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. Internet Explorer 8 introduced support for some of this module. Internet Explorer 9 extends support for even more of the CSSOM View APIs:

ClientRect (TextRectangle) interface o width property o height property Additions to Range interface o getBoundingClientRect method o getClientRects method Screen interface o pixelDepth property Screenview interface o innerWidth property o innerHeight property o pageXOffset property o pageYOffset property o screenX property o screenY property o outerWidth property o outerHeight property

Document Object Model (DOM) Improvements

Internet Explorer 9 features a significantly improved Document Object Model (DOM). In addition to more World Wide Web Consortium (W3C) DOM Level 2 (L2) and L3 support, Internet Explorer 9 features an enhanced DOM, as well as improved whitespace handling.

Introducing the Enhanced DOM

The enhanced DOM in Internet Explorer 9 improves the overall performance of Internet Explorer 9 Standards Mode (IE9 mode) by speeding up the script execution layer between Chakra, the new JavaScript engine, and the Trident layout engine, and by moving the entry points of the DOM into the Chakra engine. For more information about IE9 mode, see Improved Interoperability through Standards Support in this document. The enhanced DOM also simultaneously delivers the correct DOM inheritance object hierarchy as specified by the W3C DOM L2 and L3 specifications. The enhanced DOM object types are now reflected in the F12 developer tools when running pages in Internet Explorer 9 Standards Mode. (For more information about the new F12 developer tools in Internet Explorer 9, see F12 Developer Tools in this document.) Rather than showing the legacy COM-based types (consisting of an assortment of Interfaces and Disp-objects), IE9 mode pages report the actual enhanced DOM object type names in use by the Chakra engine, which is aligned with the W3C DOM L2 and L3 standards (for instance, NodeList, DocumentType, HTMLBodyElement, and so on). The enhanced DOM in Internet Explorer 9 significantly advances the

state of interoperability between Internet Explorer 9 and other browsers. It also simultaneously delivers performance gains in many scenarios, due mainly to DOM objects that are represented as native JavaScript objects. The enhanced DOM extends a wide array of new capabilities provided by Chakra, the new JavaScript engine into the objects and APIs provided by the DOM, including:

Selective DOM object extensibility (through Object.preventExtensions) DOM API mutability (by mutating the DOM APIs property descriptors or deleting properties entirely) JSON support of DOM objects Native JavaScript Object features via inheritance (hasOwnProperty, toString, etc.) Native JavaScript Function features via inheritance (call, apply, bind)

These features unify the programming experience between the JavaScript engines native objects and the DOM. In addition the following new DOM features have been added:

W3C DOM exceptions: DOM exceptions are new types of error objects that are thrown as a result of DOM API failures. The error codes for these exceptions map to constants defined on the exception itself. W3C DOM const properties (for instance, Node.ELEMENT_NODE): The const properties are simple fields that provide names for many common numerical return values from other DOM APIs. For example, the number returned by the nodeType DOM API can be compared against the constant to make more readable code: if (myElement.nodeType == Node.ELEMENT_NODE)

Parsing and Serializing XML to and from the DOM

While Internet Explorer already provided support for parsing and serializing XML to and from the native DOM, there was no easy way for script to access this functionality from within HTML documents. For that reason, Internet Explorer 9 adds support for the DOMParser and XMLSerializer interfaces. These interfaces are widely supported by other popular browsers. The following script example shows how to parse a string into an XML document by using the DOMParser interface:

var parser = new DOMParser(); var doc = parser.parseFromString("<test>Some XML</test>", "text/xml"); The following script example shows to serialize a DOM node (including nodes from HTML documents) to an XML string by using the XMLSerializer interface: var serializer = new XMLSerializer(); var xmlString = serializer.serializeToString(doc);

Document Object Model (DOM) Levels 2 and 3

Internet Explorer 9 adds support for more of Document Object Model Level 2 (DOM L2) and Level 3 (DOM L3), and improves DOM L2 support over existing implementations in Internet Explorer. It also adds support for the WebIDL Working Draft specification. Internet Explorer 9 introduces support for the following DOM features. DOM Core (L2 and L3) and Views (L2) Internet Explorer 9 adds support for many new DOM L2 Core APIs, including the following:

documentType ProcessingInstruction createDocument

It also adds interoperable support for DOM namespaces, such as support for *NS methods and namespace-related properties (createElementNS, namespaceURI, localName, prefix, and others). Internet Explorer 9 also supports many of the most commonly used DOM L3 Core methods and properties:

adoptNode compareDocumentPosition CDATASection importNode inputEncoding isDefaultNamespace isEqualNode isSameNode isSupported lookupNamespaceURI lookupPrefix replaceWholeText textContent

xmlEncoding xmlStandalone xmlVersion wholeText

Internet Explorer 9 fully supports both DOM L2 Views properties. For more information, see the DOM Core and Views reference section on MSDN.

DOM Element Traversal

The Element Traversal specification defines the ElementTraversal interface. This interface enables navigation via script of the elements in a DOM tree, such as element nodes in HTML, XML, or SVG documents. Internet Explorer 9 introduces support for the ElementTraversal interface and its five properties.

DOM L2 and L3 Events

The DOM Events specifications describe the DOM event system, which enables registration of event handlers, describes the flow of events through a document tree, and defines contextual information for events. For more information about the event model, see Understanding the Event Model on MSDN. One of the goals for the event system in Internet Explorer 9 is to align with the interoperable system specified by the W3C. This enables you to move away from Internet Explorers proprietary attachEvent model, removing the need to branch your code for different browsers.

DOM L2 and L3 Events

o o o

Event registration and dispatch APIs (addEventListener, removeEventListener, createEvent, and dispatchEvent) Event capture, bubble, and target phases New event objects (KeyboardEvent, MouseEvent, MutationEvent, and so on; CustomEvent for applicationspecific events; as well as event object interfaces for event types from other standards, such as DragEvent New standards-based event types (composition events, text events, wheel events, DOM mutation events, and so on) from HTML5)

Note DOM Mutation events are included for completeness, but are deprecated in the W3C standard.

DOM L2 HTML

Internet Explorer 9 adds support for the DOM L2 HTML 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. getElementsByClassName The getElementsByClassName method returns all element nodes that have class attributes matching the input string. Its functionality is similar to that of the getElementsByTagName method. characterSet The characterSet attribute returns the preferred MIME name of the character encoding of the current document.

DOM L2 Style
The DOM L2 Style 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; Internet Explorer 9 adds support for the standardized APIs defined in the DOM L2 Style specification. In addition, support has been added for standardized APIs that have no equivalent in Internet Explorer, such as the getComputedStyle method. See an example of the getComputedStyle method in action on the Internet Explorer Test Drive site. For more information, see DOM Style on MSDN.

DOM L2 Traversal and Range

The DOM Range portion of the DOM L2 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 L2 Range APIs, as well as all HTML5 Selection APIs, such as the already widely used setSelectionRange method.

For more information, see DOM Range on MSDN. The DOM Traversal portion of the DOM L2 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. For more information, see DOM Traversal on MSDN.

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 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
Internet Explorer 9 introduces enhancements to the JavaScript language feature in addition to improved JavaScript performance. In December 2009, ECMA approved the Fifth Edition of ECMA-262 as the successor to the Third Edition (a Fourth Edition was never published), and that same year, Microsoft debuted elements of ECMAScript 5 (ES5) support when native JSON support for JavaScript objects was added to Internet Explorer 8 and Accessor Support for DOM objects was added to Internet Explorer 8. Beyond JSON and DOM Accessor support, though, ES5 standardizes many significant enhancements to the JavaScript language. There are many important ECMAScript 5 features implemented in Internet Explorer 9, including the following:

New array methods: every, filter, forEach, indexOf, isArray, lastIndexOf, map, reduce, reduceRight, some Enhanced object model and object functions: Object.create, Object.defineProperties, Object.defineProperty, Object.freeze, Object.getOwnPropertyDescriptor, Object.getOwnPropertyNames, Object.getPrototypeOf, Object.isExtensible, Object.isFrozen, Object.isSealed, Object.keys, Object.preventExtensions, Object.seal Other computational methods and functions: Date.now, Date.parse support for ISO Date Format, Date.toISOString, Function bind, String trim

Internet Explorer 9 also corrects several issues present in the previous implementations of JavaScript in Internet Explorer. For more information, see the Internet Explorer Team Blog. To see ECMAScript 5 support in action, go to the Internet Explorer Test Drive site.

HTML5
Support for some features of the HTML5 Working Draft specification was introduced in Internet Explorer 8, including:

DOM Storage, defined as part of the HTML5 Web Storage specification. Ajax Navigation, implemented via the window.location.hash property and the onhashchange event, both of which are defined in the History Traversal section of the HTML5 specification. Cross-document messaging, implemented via the postMessage method and the onmessage event, which are both specified as part of the HTML5 Web Messaging module.

Internet Explorer 9 builds on the work done on HTML5 compliance in Internet Explorer 8, and implements the following new features:

HTML5 Geolocation APIs The new video and audio HTML elements The new canvas HTML element The Selection interface More interoperable HTML parsing Several new DOM APIs, as discussed in the DOM L2 HTML section of this document Scaling Vector Graphics (SVG)

Note It is important to remember that, as of this writing, the HTML5 specification is still in the Working Draft stage. Until it reaches the Candidate Recommendation stage, it could change significantly. For more information, see the latest HTML5 working draft.

HTML5 Geolocation
Internet Explorer 9 adds support for geolocation. The Geolocation API enables a web application to access the current geographical location of the PC running Internet Explorer. The webpage can then tailor the user experience according to the location, for instance, to display the position on a map or display up-to-date local information, such as weather or news reports. Location data is returned in terms of latitude and longitude coordinates. The geolocation APIs in Internet Explorer 9 conform to the standards set forth in the Geolocation API Specification.

To see geolocation in action, see the Internet Explorer 9 Test Drive site. For more information on geolocation, see MSDN.

HTML5 video and audio Elements

Two of the most anticipated HTML5 features now supported in Internet Explorer 9 are the new video and audio elements. The video and audio elements are both defined within the Embedded content section of the HTML5 specification. Essentially, the video and audio elements enable embedding of video and audio content into an HTML page. Web developers can also specify several attributes for both elements. For instance, consider the following markup. <video width="400" height="300" src="video.mp4" poster="frame.png" autoplay controls loop> This content appears if the video tag or the codec is not supported. </video> In Internet Explorer 9, this will display, in a 400300 space (the width and height attributes), the image file "frame.png" (the poster attribute) before the video content is loaded. The video file, "video.mp4" (the src attribute), will start playing automatically upon page load (the autoplay attribute), and controls will be displayed for controlling the video (the controls attribute). When it finishes, the video will repeat (the loop attribute). If the video format is not supported, the text within the video element (This content appears) will be displayed instead. The video element also supports the preload element, which hints to the browser what the web developer thinks will lead to the best user experience. To see an example of the video element in action, see the Video Panorama demo on the Internet Explorer Test Drive site. Internet Explorer 9 also supports the video element with multiple sources, each of which is specified by the child element source. For instance, consider the following markup. <video width="400" height="300" poster="frame.png" autoplay controls loop> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>

<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video> Here, Internet Explorer 9 picks the first listed supported format (in this case, the second source element) and plays its associated source file. The audio element is defined similarly to the video element, but without the width, height, and poster attributes. To see an example of the audio element in action, go to the Internet Explorer Test Drive site. Internet Explorer 9 supports the following content formats: Element name video

Supported formats MP4 container, H.264 video, Baseline, Main, and High profilesaudio in AAC or MP3 WebM video, if you have the VP8 codec installed MP3, and AAC in MP4 container

audio

For more information, see HTML5 video and audio on MSDN.

HTML5 canvas Element

Another anticipated HTML5 feature new in Internet Explorer 9 is the canvas element, which is used in conjunction with the Canvas 2D API. The canvas element, as defined in the HTML5 specification, enables rendering of graphics on a resolution-dependent bitmap canvas. To draw on the canvas, contexts are used, such as the Canvas 2D context, specified in the W3C Canvas 2D API specification. Internet Explorer 9 introduces support for the canvas element, using the 2D Canvas drawing API as its context. (In Internet Explorer 9, the Canvas 2D context is represented by the CanvasRenderingContext2D object or the ICanvasRenderingContext2D interface.) Like all the graphics in Internet Explorer 9, canvas is hardware-accelerated by using Windows and the GPU. Canvas enables drawing scenarios that include rectangles, paths, lines, fills, arcs, and Bzier and quadratic curves. In addition, the canvas element in Internet Explorer 9 supports the width and height attributes. (The default values for width and height are 300 and 150 pixels, respectively, and the default color is transparent black.) Canvas is a way to program graphics on the web. The canvas tag is an immediate mode (drawing commands are sent directly to the graphics hardware), two-dimensional drawing surface that you can use to deliver real-time graphs, animations, or interactive games without having to

download a separate plug-in. Because of APIs defined by the CanvasRenderingContext2D object, canvas enables the following drawing scenarios that include:

rectangles lines fills arcs shadows Bzier curves quadratic curves images video

You can use JavaScript to animate canvas drawings or make interactive experiences that can react to keyboard input, mouse clicks, or any browser event. For instance, this example on the Internet Explorer Test Drive site produces, with just a few lines of JavaScript, randomly placed and colored glowing lines. The canvas element in Internet Explorer 9 supports the width and height attributes. (The default values for width and height are 300 and 150 pixels, respectively, and the default color is transparent black.) Internet Explorer 9 supports the following Canvas 2D Context APIs (members exposed by the CanvasRenderingContext2D object):

the canvas property (back reference to the canvas object) state methods (save, restore) transformation methods (scale, rotate, translate, transform, setTransform) compositing properties (globalAlpha, globalCompositeOperation) color and style properties (strokeStyle, fillStyle) the CanvasGradient object and methods (addColorStop, createLinearGradient, createRadialGradient) the CanvasPattern object and method (createPattern) line attributes (lineWidth, lineCap, lineJoin, miterLimit) shadow attributes (shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur) rectangle methods (clearRect, fillRect, strokeRect) complex shapes methods (beginPath, moveTo, closePath, lineTo, quadraticCurveTo, bezierCurveTo, arcTo, arc, rect, fill, stroke, clip, isPointInPath) the TextMetrics interface (CanvasTextMetrics object), its property (width) and text methods and attributes (font, textAlign, textBaseline, fillText, strokeText, measureText) the images method (drawImage)

the ImageData interface (CanvasImageData object), its properties (data, height, and width) and pixel manipulation methods (createImageData, getImageData, putImageData) the CanvasPixelArray object and its property, length

For a more in-depth introduction to HTML5 Canvas in Internet Explorer 9, see MSDN. Additionally, visit the Internet Explorer Test Drive site to view more demonstrations of the canvas element. For technical information on the canvas element in Internet Explorer 9, see the canvas element reference page on MSDN.

HTML Parsing Improvements

HTML parsing in Internet Explorer 9 has been improved to more closely align to behavior described in the HTML5 Draft Specification.

Parsing SVG in HTML

Internet Explorer 9 supports SVG embedded directly in HTML. For more information about SVG, see Scalable Vector Graphics (SVG) in this guide.

Parsing XHTML
Internet Explorer 9 will parse documents with a mime-type of application/xhtml+xml as XHTML.

Generic Elements
Previously, Internet Explorer would parse elements it didnt recognize as unknown elements. These elements would be flattened, which kept normal CSS styling rules from applying to them, and was not compliant with the HTML5 draft specification. Internet Explorer 9 changes this behavior, and now parses unrecognized elements as generic elements, allowing them to function like normal elements do. This obviates the need for developer workarounds, like calling document.createElement to force Internet Explorer to recognize an element. Following is a simple example of a generic elementin this case an undefined element called mydiv. <style type="text/css"> mydiv { color: blue; font-weight: bold; } </style>

... <p>I am using a <mydiv>generic element</mydiv> in this sentence.</p> Internet Explorer 8 ignores the mydiv tag and its associated CSS rules. This sentence renders as follows.

Internet Explorer 9 parses the mydiv tag as expected, and renders the following.

Overlapping Tags
If your HTML contains overlapping tags, Internet Explorer 8 and earlier versions do not resolve them at parse time. This behavior is contrary to what is specified in the HTML5 draft specification. If you have overlapped some elements for scripting purposes (such as the one illustrated here), this can lead to confusing scripting errors. Internet Explorer 9 follows the HTML5 draft spec and resolves overlapping tags at parse time. Following is a simple example of a script that turns text between overlapping i and b tags red. <script type="text/javascript"> function load() { var elms = document.getElementsByTagName("i"); for(var i = 0; i < elms.length; i++) { var elm = elms[i]; if(elm.parentNode.tagName.toLowerCase() == "b") elm.style.color = "red"; } } </script> ... <body onload="load();"> You should be aware of how <b>this <i>affects</b> script</i>. </body> In Internet Explorer 8 and earlier, this markup results in an unintended

rendering.

In Internet Explorer 9, the markup renders as expected.

Parsing changes to script and style blocks Internet Explorer 8 and earlier versions do not persist text, in either a script or style block, to text nodes in the DOM. Internet Explorer 9 persists text in script or style blocks to the DOM as text nodes, as expected. This makes source code available in the DOM as a text node so you can manipulate it with script.

HTML5 Selection APIs

Internet Explorer 9 adds support for three HTML5 text selection APIs. The Selection object represents a list of Range objects, which are enabled by the new support for DOM L2 Range in Internet Explorer 9. For more information, see Document Object Model (DOM) Improvements earlier in this document.

The getSelection method

The getSelection method returns the Selection object for the window, which represents the currently selected text.

The selectionStart property

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

The selectionEnd property gets the offset to the end of the currently selected text, and can also set the end of the selection.

HTML5 Semantic Elements

Internet Explorer 9 improves support for several HTML5 semantic elements. A semantic element in this context is defined as one whose tag name describes its content, but which does not have any special behaviors. Semantic tags can be especially helpful for accessibility. Internet Explorer 9 makes the following changes to its support for

semantic elements:

The elements now inherit from HTMLElement interface, rather than from HTMLUnknownElement interface, as specified in the HTML5 specification. By default, the elements are now styled as specified in the HTML5 specification.

The following semantic elements are now recognized:

section nav article aside hgroup header footer figure figcaption mark

Scalable Vector Graphics (SVG)

Support for Scalable Vector Graphics (SVG) has become one of the most requested features for implementation in Internet Explorer, and is a powerful way to add high-fidelity, easily scalable visualsfrom small and simple to large and complex to a website without the need for a plugin or separate viewer. With Internet Explorer 9, Microsoft is proud to introduce support for the basic SVG feature set. The SVG support in Internet Explorer 9 is based on the SVG 1.1 (Second Edition) specification recommendation (for desktop browsers). The following functionality has been implemented:

Most SVG document structure, interactivity (scripting events), and styling (inline and through CSS) Many presentation elements and their corresponding attributes and DOM interfaces, including: o basic shapes o filling, stroking, marker, and color o gradients and patterns o paths o text

Internet Explorer 9 supports the following methods to display 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) 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 about SVG support in Internet Explorer 9, see MSDN. For more information about SVG, see the svg element reference page on MSDN.

Basic Shapes
Internet Explorer 9 introduces support for the parsing and rendering of all the basic shapes elements, their attributes, and associated DOM interfaces, as specified in the Basic Shapes module of the SVG 1.1 (Second Edition) specification. The set of basic shapes supported by Internet Explorer 9 consists of the following shapes elements:

rect circle ellipse line polyline polygon

Internet Explorer 9 also supports these elements associated DOM interfaces. Following are examples of each of the aforementioned shapes elements. After the markup is a screenshot of the corresponding result in Internet Explorer 9.

Rectangles: rect Element

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect fill="orange" stroke="black" width="150" height="75" x="50" y="25" /> </svg>

<rect fill="orange" stroke="black" width="150" height="100" x="50" y="25" rx="10" ry="50"/>

For more information, see the rect element reference page on MSDN.

Circles: circle Element

<circle fill="orange" stroke="black" stroke-width="3" cx="40" cy="25" r="20"/>

For more information, see the circle element reference page on MSDN.

Ellipses: ellipse Element

<ellipse stroke="orange" cx="100" cy="60" rx="75" ry="50"/>

For more information, see the ellipse element reference page on MSDN.

Lines: line Element

<!-- vertical --> <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: blue;"/> <!-- diagonal --> <line x1="30" y1="30" x2="150" y2="85" stroke="red" stroke-width="4"/> <!-- horizontal --> <line x1="50pt" y1="25pt" x2="150pt" y2="25pt" stroke="yellow" stroke-width="3"/>

For more information, see the line element reference page on MSDN.

Polylines: polyline Element

A polyline is defined in SVG to be several connected lines, often forming an open shape, or a polygon with one or more missing sides or non-convex shapes. <polyline points="15, 5, 100 8,3 150" fill="orange" stroke="black" stroke-width="4"/>

For more information, see the polyline element reference page on MSDN.

Polygons: polygon Element

A polygon is a closed shape. <polygon points="15, 5, 100 8,6 150" fill="orange" stroke="black" stroke-width="4"/>

For more information, see the polygon element reference page on MSDN.

Clipping, Masking, and Compositing

Internet Explorer 9 supports SVG clipping, clip paths, masking, and opacity as specified in the Clipping, Masking, and Compositing module of the SVG 1.1 (Second Edition) specification. (SVG paths are discussed in the Paths section of this document.)

Clipping
A clipping path cuts or clips the area that a color, pattern, or image can be drawn. All parts of the graphical element that lie outside the clipping path are not drawn. Clipping paths are fully opaque; the portion of the graphical element that is outside the clipping path is completely invisible. In SVG, the overflow and clip properties establish initial clipping paths, or shapes in which content will be displayed. By default, the initial clipping path is defined as the SVG viewport, or the rectangular area of the page where the SVG content is displayed. The clipPath element defines a clipping path. The clipping path is then referenced using the clip-path property. The clip-rule property applies to graphic elements within a clipPath element, and the clipPathUnits attribute defines a coordinate system for the contents of the clipPath. Clipping paths can be applied to text as well as colors, patterns, and images. Clipping functionality can be accessed programmatically with the SVGClipPathElement DOM interface. Following is a simple example of an SVG clipping path. <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100"> <clipPath id="clip1"> <circle id="clipShape" cx="60" cy="60" r="50" /> </clipPath> <rect x="20" y="20" width="100" height="100" fill="blue" clip-path="url(#clip1)" /> </svg> This example uses the clipPath element to define a clipping path in the shape of a circle. The clip-path property is then used to apply the clipping path to a rectangle. This produces the following in Internet Explorer 9.

Masking
A mask is similar to a clipping path, except it is semi-transparent. Masks are often used for compositing foreground objects into the current background. The mask element defines a mask. The mask is then referenced using the mask property. The following is a simple example of an SVG mask. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example mask01 - three different colored circles used to mask the color of a rectangle </desc> <defs> <g id="circles"> <g stroke="white" stroke-width="2" > <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" /> <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" /> <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />

</g> </g> <mask id="myMask" > <use xlink:href="#circles" /> </mask> </defs> <rect x="0" y="0" width="100%" height="100%" fill="purple" mask="url(#myMask)" /> </svg> This example uses the mask property to define a mask in the shape of three adjacent circles with different colors. The mask property is then used to apply the mask to a purple rectangle. This produces the following in Internet Explorer 9.

Coordinate Systems, Transformations, and Units

Internet Explorer 9 introduces support for SVG coordinate systems, transformations, and units as specified in the Coordinate Systems, Transformations and Units module of the SVG 1.1 (Second Edition) draft specification. The features supported by Internet Explorer 9 include:

Units and percentages. Arbitrary transformations on any element and the transform attribute. The viewBox and preserveAspectRatio properties (including interaction with the overflow property). Support for transforms and transform list types.

Internet Explorer 9 also supports the DOM interfaces associated with SVG coordinate systems and transformations.

Document Structure
Internet Explorer 9 introduces support for basic SVG document structure, metadata, and extensibility functionality, as specified in the Document Structure, Metadata, and Extensibility modules of the SVG 1.1 (Second Edition) specification. The elements supported by Internet Explorer 9 include:

svg desc

title metadata g use defs symbol image switch

Internet Explorer 9 also supports these elements associated DOM interfaces.

Gradients and Patterns

SVG provides the ability to paint or stroke shapes and text using color, gradients, or patterns. Internet Explorer 9 supports SVG gradients and patterns, as specified in the Gradients and Patterns module of the SVG 1.1 (Second Edition) specification.

Gradients
Gradient support is provided through the gradient elements (linearGradient and radialGradient) and attributes (gradientUnits and gradientTransform). Gradient colors are defined by the stop element. The gradient elements can be used in the fill and stroke properties of SVG shapes. For example, consider the following markup: <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="10%" stop-color="yellow" /> <stop offset="90%" stop-color="blue" /> </linearGradient> </defs> <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="20" y="20" width="300" height="100"/> </svg> This markup defines a rectangle with a linear gradient. The two stop elements specify color stops along a vector for the color transitionsa yellow one at the 10% point and a blue one at the 90% point. This appears as follows in Internet Explorer 9:

Patterns
Pattern support is provided through the pattern element and its attributes. Like gradients, pattern elements can be used in the fill and stroke properties of SVG shapes. For example, consider the following markup. <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse" x="0" y="0" width="150" height="100"> <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue" /> <rect x="100" y="0" width="50" height="50" fill="blue" stroke="yellow" /> </pattern> </defs> <ellipse fill="url(#mycircleandsquare)" stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" /> </svg> In this example, the pattern element defines a pattern that consists of an alternating small blue square and tiny yellow circle. The ellipse that is then specified is given a fill of the pattern. The following image shows how this appears in Internet Explorer 9.

Interactivity
SVG content can be interactivethat is, it can change in response to user input. Internet Explorer 9 supports SVG interactivity features, as specified in the Interactivity module of the SVG 1.1 (Second Edition) specification, including:

mouse events: o mousedown o mouseup o click o mouseover o mousemove o mouseout cursor/pointer events: o focusin o focusout o activate the Interactivity modules

Internet Explorer 9 also supports SVGCursorElement DOM interface.

Additionally, the Internet Explorer 9 supports the focusable attribute as specified in the Interactivity module of the SVG Tiny 1.2 specification. The following markup shows a very simple example of SVG interactivity in action. <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"> <script type="text/ecmascript"> <![CDATA[ // object representing circle var redcircle; // variable representing circle's radius var r; window.onload = function() { redcircle = document.getElementById('redcircle'); r = parseInt(redcircle.getAttribute("r")); } var grow = function() { r = 2*r; redcircle.setAttribute("r",r); } var shrink = function() { r = r/2; redcircle.setAttribute("r",r); } ]]>

</script> <circle id="redcircle" cx="100" cy="100" r="50" fill="red" onmousedown="grow()" onmouseup="shrink()"/> </svg> When this snippet is loaded, it displays a small red circle.

Clicking the circle causes it to grow to twice its size.

The same effect can be achieved with mouseover and mouseout events, which will cause the circle to grow and shrink just by moving the cursor over and off of it. ... <circle id="redcircle" cx="100" cy="100" r="50" fill="red" onmouseover="grow()" onmouseout="shrink()"/> ...

Linking and Views

SVG enables linking out of SVG content to other pages, as well as predefined views of SVG documents. Views are useful when you want to link directly to, for instance, a close-up of a diagram. Internet Explorer 9 supports SVG linking and views, as specified in the Linking module of the SVG 1.1 (Second Edition) specification. This includes support for the a and view elements. The Linking modules associated DOM interfacesSVGAElement and

SVGViewElementare also supported.

Linking
Just like in HTML, the a element is used to create a hyperlink in SVG. For instance, the following markup provides a hyperlink on a rectangle. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://www.bing.com" target="_blank"> <rect x="20" y="20" width="250" height="250"/> </a> </svg>

Views
Views can be used to instruct the browser to display an SVG image in a certain way. For instance, the following markup defines a link to a view. ... <a xlink:href="#rect-view"> <text x="320" y="70" style="fill:red">Go to Rectangle</text> </a> <view id="rect-view" viewBox="280 245 135 85" /> <rect id="rect-object" style="fill:red" x="280" y="245" width="135" height="85"/> ... In this example, the rect-view view is defined as a viewBox with the given coordinates. When the link (the text Go to Rectangle) is clicked, the rect-view view appears, which reveals the red rectangle. The following markup defines another link to a view. ... <a xlink:href="#circle-view"> <text x="250" y="70" style="fill:blue">Go to Circle</text> </a> <view id="circle-view" viewBox="5 36 128 115" preserveAspectRatio="none"/> <circle id="circle-object" style="fill:blue" cx="70" cy="85" r="45"/> ...

In this example, the circle-view view has the attribute preserveAspectRatio set to none. This means that, even though the shape is a circle, it will not scale uniformly to fill the specified viewBox rectangle when the view is invoked. Instead, it will stretch non-uniformly so that its bounding box exactly matches the viewBox rectangle. This markup appears as follows in Internet Explorer 9 when the page is first loaded.

When you click Go to Circle, the circle-view view is invoked, and the circle is stretched to fill the viewBox rectangle. This makes it appear to be an ellipse.

Painting and Color

Painting and color are essential components of SVG. The concept of painting encompasses fills (solid color, gradients, patterns), strokes (lines drawn along paths), and marker symbols (applied to the end of line segments; for instance, arrowheads), and can also incorporate opacity. Fills and strokes can apply to paths, text, and shapes. Internet Explorer 9 introduces support for SVG painting and color, as specified in the Painting: Filling, Stroking and Marker Symbols module and the Color module of the SVG 1.1 (Second Edition) specification. This includes support for:

fill properties: o fill o fill-rule o fill-opacity stroke properties: o stroke o stroke-width o stroke-linecap o stroke-linejoin o stroke-miterlimit

o o o

stroke-dasharray stroke-dashoffset stroke-opacity visibility properties: o display o visibility the marker element painting inheritance (Paint is automatically inherited on containing elements.) the color property

The Painting modules associated DOM interfacesSVGPaint and SVGMarkerElementare also supported. Several examples of fills and strokes in SVG are included in the Paths section of this document.

Paths
SVG paths are outlines of shapes. They can be filled in, stroked (a line is drawn along the path), or used as clipping paths (cutouts of other shapes). Internet Explorer 9 introduces support for SVG paths, as specified in the Paths module of the SVG 1.1 (Second Edition) specification. This includes support for the path element, as well as the d property, which enables parsing of path data. The Paths modules associated DOM interfaces are also supported. The path element enables many different developer scenarios. Following are just a few simple examples. After the markup is a screenshot of the corresponding result in Internet Explorer 9.

Closed Shape with Straight Lines and a Fill

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M 20 20 L 60 20 L 40 60 z" fill="green" fill-opacity="0.5" stroke="red" stroke-width="3" />

</svg>

Bezier Path (Quadratic)

<path d="M20,30 fill="none" stroke="red" stroke-opacity="0.2" stroke-width="3" /> Q40,50 60,30 T100,30"

Line with Arc

<path d="M30,60 l 50,0 fill="green" stroke="blue" stroke-width="4" />aa700834 a25,45 0 0,1 50,0 l 50,0"

Text
SVG documents can include text. Text is rendered just like other graphic elements in SVG, which means that coordinate system transformations, painting, clipping, and masking can all be applied to text. Internet Explorer 9 supports text rendering, as specified in the Text module of the SVG 1.1 (Second Edition) specification. The text element specifies the characters to be drawn. Because SVG does not break lines or wrap words automatically, you must determine line breaks in advance. To adjust text properties (such as font, weight, color, kerning, and many others) within a line of text, SVG provides the tspan element. Internet Explorer 9 also supports the Text modules associated DOM interfaces.

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, youll 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 enhancementsfor 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 websites 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 sites taskbar button. Overlay icons help draw attention to a website when the view to the pinned sites 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 modeInternet Explorer 9 Standards modewhich 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 users 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: 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 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 IE9s 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, youll 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 stageis 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.

Data URIs
The data URI is a means of directly embedding data in the context of a web page. The most common example is a tiny image embedded in a web page, such as the following: data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP When placed in the src attribute of an img element, this text effectively embeds the image in the markup of the page. Internet Explorer 8 introduced data URIs to Internet Explorer. With Internet Explorer 9, developers can now use a data URI in the src attribute of a script element. Plus, the size limit for data URIs has been lifted from 32 kilobytes (KB) in Internet Explorer 8 to 4 gigabytes (GB) in Internet Explorer 9.

ICC Color Profiles

The International Color Consortium (ICC) publishes color profiles, which describe color attributes of both software and hardware. Internet Explorer 9 introduces support for ICC v2 and v4 color profiles on images, as defined in ICC specifications.

Selectors API Level 2

The Selectors API Level 2 specification defines a set of application programming interfaces (APIs) that enable you to evaluate selectors in the Document Object Model (DOM). Internet Explorer 8 implemented the Selectors APIs querySelector and querySelectorAll. Internet Explorer 9 adds support for the msMatchesSelector method.