To use this site begin in the Dates and Location tab. To experience the examples on this site, move through a simulated rental by interacting with the site and using the continue buttons. Each developer feature example is described in the “Features info with sample code” text on the right as you move though the simulated rental.
1. The Dates and Location tab contains examples demonstrating DOM Store from HTML5, Native JSON Support, Vertical Text, Box Sizing, compatibility Meta Tag, and Mutable DOM Prototype
The form on this page is saved to DOM storage in the localStorage object. All data saved to the
localStorage object must be in a string format so developers may use IE8’s native JSON support
to quickly and easily convert objects into strings and those strings back to objects.
> Show Example Code
Today, Web pages use the document.cookie
property to store data on the local machine. Cookies are
limited in capability by the fact that only 50 key/value pairs can be stored per domain.
Furthermore, the cookie programming model is cumbersome and requires that you to parse the entire
cookie string for data.
Specified in the W3C’s HTML 5 Draft, DOM Storage objects provide a much simpler global and
session storage model for structured data on the client side.
For more information on DOM Storage, see "to DOM Storage"
on MSDN, and download the Ajax Hands-on Lab on MSDN Code Gallery.
On this page, IE8’s native JSON support is utilized to serialize/deserialize data saved to
DOM storage.
> Show Example Code
JSON,JavaScript Object Notation is a
simple human readable data interchange format often used by AJAX applications when transmitting data
between the server and the web application. The Jscript engine for IE8 now has a full native implementation
of JSON that significantly improves the speed of serialization, deserialization and improves the
overall safety of parsing untrusted payloads while maintaining compliance with JSON support as
described in ES3.1 Proposal Working Draft.
This new feature can be seen in the "Customize Your Rental" label. Highlight the text to see the
label really is text, not a graphic.
> Show Example Code
Internet Explorer 8 provides support for the "writing-mode" property of Vertical text.
By supporting this CSS 3 feature you change the vertical orientation and direction that text flows.
It allows developers to render both vertical text and certain international languages from HTML
text instead of requiring images to be created.
On this page, the "Customize Your Rental" label uses the box-sizing property. Notice how the
bottom padding does not add to the total height of the element while the border-box model is used.
> Show Example Code
Internet Explorer 8 implements the new Box-sizing property from CSS3. This allows developers to
specify which box model the browser should use when rendering different elements. Currently, the
W3C has not finalized the box-sizing property so it has been implemented in IE8 as both
"box-sizing", as specified in the working draft, and vendor specific as "-ms-box-sizing".
We recommend most developers use "box-sizing" instead of the IE8 vendor specific property.
Internet Explorer 8 introduced the compatibility meta tag as a tool to allow developers and content
owners to control which rendering and layout mode they prefer for their content. Internet Explorer 8
supports three modes: IE8 Mode (default mode) for CSS 2.1 standard compatibility, IE7 Mode for
compatibility with pages built for IE7, and IE5 Mode to render pages using the IE7 Quirks mode.
This Meta tag can be used on a per site or per page level, enabling developers and content owners
to have ultimate control over display and rendering.
> Show Example Code
Internet Explorer 8 allows developers to customize the DOM through the DOM prototype. The
"Customize Your Rental" form has a few required fields which have the class "required"
assigned to them. The example below shows how a developer can modify the DOM prototype by adding
a new method and property to the document and element objects, in this case adding the getElementsByClassName() method
to the document object and adding a validInput property to the element object. The form validation
script uses the getElementsByClassName() method to do a simple validation on the form’s required fields.
The input element’s validInput property can be set to false which updates the element’s background
and border color to notify the user of an invalid entry, or to true which will reset the element’s style
to its default settings.
> Show Example Code
See Updated Getter/Setter Syntax in IE8 RC 1
for more information on using Mutable DOM Prototypes.