HTML5 in Internet Explorer 9

[Spy$Eyes]

In Internet Explorer 9 were some features from HTML5 Working Draft Specification introduced. These were:
DOM Storage - as part of the HTML5 specification, Web Storage defined.
Ajax Navigation - on the property window.location.hash and the event onhashchange implemented (both in the History section Traversal defines the HTML5 specification).
Cross-document messaging - on the method PostMessage and the event onMessage (defined both as part of the HTML5 Web Messaging Engine format.

Internet Explorer 9 builds on this in Internet Explorer 8 implemented HTML5 features and adds the following new features:

• HTML5 video and audio elements
• HTML5 canvas element
• HTML5 Selection APIs
• Improvements in HTML parsing
• Several new DOM APIs
• Scalable Vector Graphics (SVG)

Note: You should be aware that the HTML5 specificity Transportation always in Working Draft status is still. Until it reaches the Candidate Recommendation status can result in significant changes. For more information, see the current HTML5 Working Draft.

[Spy$Eyes]

HTML5 video and audio elements

Two of the most anticipated HTML5 features are now supported in Internet Explorer 9: the elements of video and audio. These two elements are discussed in the Embedded Content defines the HTML5 specification and described without a specific video format. Internet Explorer 9 support playback of H.264 video over the HTML5 video tag and playing VP8 video, when the user has VP8 codec installed under Windows.

The elements of video and audio embed video and audio content in HTML pages - without a plug-in is required. Developers can specify various attributes for the two elements. A corresponding markup might look like this:

<video ="400" width height src ="300" ="video.avi" posters ="frame.png" AutoPlay controls loop> 

This text is displayed when the video tag, or the codec is not supported. 

</ Video>

In Internet Explorer 9, with the markup, an area of 400 x 300 pixels (width and height attributes) are displayed. While the video is loaded, see the picture "frame.png" to (attribute poster). The video file video.avi "(src attribute) will play automatically when the page loads (autoplay), and there are controls for the video display (attribute controls). When the video reaches its end, it is repeated (attribute loop). If the video format support is not, then the element is the text within the video ("This text is ...") instead of the video display. The video element also supports the element preload. This element tells the browser how the developer presents the best display. An example of the video element in action, visit the Internet Explorer Test Drive Web site.

Internet Explorer 9 also supports video elements with multiple sources. The sources are documented by the sub-element source specified. This can be especially useful when developing for multiple browsers and file formats. The audio element is exactly like the video element defined. The attributes, height and width, however, posters are missing. An example of the audio element in action, visit the Internet Explorer Test Drive Web site.

[Spy$Eyes]

Internet Explorer 9 supports the following formats:

HTML5 canvas element

Another long awaited feature is the new HTML 5 canvas element. It is used together with the Canvas 2D API. The canvas element is in the HTML5 specification defines and enables the display of graphics on resolution-dependent bitmap canvas. To display the Canvas to be "context" is used - such as the Canvas 2D context from the W3C Canvas 2D API Specification. Internet Explorer 9 out of the canvas element with the 2D canvas API only supported as a context. As for all the graphics in Internet Explorer 9 is for the canvas element, the hardware acceleration on Windows and the GPU used. Canvas elements provide a way to program graphics on the Internet. The canvas tag is immediately converted, two-dimensional drawing surface is one that developers things like real-time graphs, animation or interactive games can be realized with the - without requiring a separate plug-in must be downloaded.

Developers can use JavaScript to animate canvas elements or for interactive environments that react to key presses, mouse clicks, or any browser event. A deeper introduction to the canvas element of HTML5 in Internet Explorer 9.


HTML5 Selection APIs

Internet Explorer 9 supports the HTML5 APIs to select text. The Selection object compile a list of Range objects ready (the Range object and the concept of programmatic text selection portion L2 DOM Traversal and Range. The Selection object has a much more reliable way to select content than previously available and proprietary solution in Internet Explorer (document.selection, Eng.).


Improvements in HTML parsing

Parsing HTML in Internet Explorer 9 has been improved and now acts exactly as described in the HTML5 draft specification. Specifically, the following areas in Internet Explorer handled 9 interoperable:

• Parsing of SVG in HTML: Internet Explorer 9 supports the direct embedding SVG in HTML. For more information, see the following section.
• Parsing XHTML. Internet Explorer 9 introduces the parsing of documents with the MIME type / xhtml + xml application by as XHTML.
• Generic elements: Previous versions of Internet Explorer have elements as unrecognized HTML elements treated generic. Non-standard used div elements with CSS class names were simply ignored by Internet Explorer. Internet Explorer 9 to handle these elements as expected and consistent with other major browsers.
• Overlapping Tags: Internet Explorer 8 and its predecessors have been in overlapping HTML tags will not be the HTML5 specification treated accordingly. Developers often used scripts that have been with overlapping HTML tags thrown. Internet Explorer 9 performs the parsing of overlapping tags as expected and consistent with other major browsers out.
• Changes in the parsing of script and style blocks: Internet Explorer 9 passes text in a script or style block of text in the DOM node. This technique is often used to display source code.

[Spy$Eyes]

Scalable Vector Graphics (SVG)

One of the main new features of Internet Explorer is the support for SVG (Scalable Vector Graphics). SVG offers the possibility to add visually striking elements of any size to Web sites - without a plug-in required or a separate viewer is. With Internet Explorer 9, we introduce the support for SVG elements. It is based on the SVG 1.1 (Second Edition) draft specification for desktop browsers. As the new HTML5 features also uses the SVG hardware acceleration.
In Internet Explorer 9, the following capabilities:

• SVG document structure, interactivity (scripting events) and styles (and inline CSS)
• Presentation elements and the corresponding attributes and DOM Interfaces:
  
  • Basic shapes
  • Fill, Stroke, marker and color properties
  • Gradient and pattern properties
  • Paths
  • Text
  • SVG allows many more different scenarios than could be described here. The following list contains some examples on the use of SVG technologies, now with Internet Explorer 9 are possible:
  • Small static vector graphics for logos, list characters (via the list-style-image CSS attribute, Eng.), Frame (on the border-image CSS attribute, Eng.) Or other small graphics that were previously the img tag use of HTML. In such scenarios, the download size is smaller, the graphics are extensive, the quality of prints is rising, and the details on enlarged pages look better.
  • Large static vector graphics for backgrounds (via the background-image CSS attribute, Eng.) Or other large graphics, for the img tag has been used by HTML. In such scenarios, the graphics are extensive, the quality of prints is rising, and the details on enlarged pages look better.
  • Complex drawings with high precision in software such as Microsoft Visio, Adobe Illustrator and CAD. By SVG support in Internet Explorer 9, it is no longer necessary to download the appropriate elements and display it in a separate viewer.
  • Interactive vector graphics such as maps, diagrams, user interfaces for websites and other vector-based interactivity options. Such environments have often been implemented only through plug-ins.
  • Dynamically compiled interactive vector graphics such as charts and graphs that change through the user input. This too was previously often only possible by plug-ins.