Internet Explorer 9 Guide for Developers

March 14, 2011

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

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 400×300 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 Supported formats video MP4 container, H.264 video, Baseline, Main, and High profiles—audio in AAC or MP3 WebM video, if you have the VP8 codec installed audio MP3, and AAC in MP4 container 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 Bézier 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 Bézier 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 didn’t 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 element—in 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