IE8 and HTML 5

  • Article

In the previous post, I showcased the Microsoft commitment to an open and interoperable Web by rendering Web pages in their standards-compliant mode by default. We also understand that developers want to build richer Web experiences with great interoperability, so we started delivering support for some of the features from the HTML 5 Working Draft. This specification is still a work in progress; very important technical discussions are continuing in the W3C HTML Working Group on many subjects.

In this post you will see some of the features from the W3C HTML 5 Working Draft, from the W3C Web Applications specification, and from the ECMAScript-262 Language specification (a.k.a. JavaScript) that the IE Team has already implemented in Internet Explorer 8.

For each topic I will provide scenarios or ideas that you can start using straight away, plus the reference to the original specification, the MSDN documentation, and a demo. You can run most of the demos either online or offline.

The source code is available here.

Network Connectivity

Although users are increasingly “always connected” to a network, it’s not rare to lose Wi-Fi or cable connectivity. Imagine, for example, the scenario where a user is registering to a new site: he fills in many textboxes with his personal information and then – as he press the “Submit” button – the page fails because the network is no longer discoverable. This will result in a bad user experience, as the user – as soon as the network comes up again - will need to input all the data again.

Using the network connectivity events, you can easily detect whether or not the browser is connected to a network.

Further information: W3C Spec - MSDN

  1. Run the demo.
  2. Click Refresh.
  3. Disconnect from the network (turn off Wi-Fi or unplug the cable).
  4. Connect to the network.

image

Document Object Model (DOM) Storage

You are probably familiar with cookies as a way to store information on the client side; cookies however, aren't very good at handling scenarios where the user could be carrying out multiple transactions in different windows at the same time. Also, because cookies are transmitted with every request, they don’t allow for scenarios where Web applications may need to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.

Now you can Use the new local or session storage area to store megabytes of user data for the current session or domain.

Further information: W3C Spec - MSDN

  1. Run the demo.
  2. Save some content to the storage area.
  3. Load content from storage.
  4. Clear storage.

image

Cross Domain Request (XDR)

User agents commonly apply same-origin restrictions to network requests. These restrictions prevent a client-side Web application that is running from one origin, from obtaining data retrieved from another origin.

Using the new Cross Domain Request API, a response can include an Access-Control-Allow-Origin header in order to allow access to the resource's contents on external domains.

Further information: W3C Spec - MSDN

  1. Run the demo (*).
  2. Follow the setup instructions in the ExtDom folder.
  3. Run XDR (it will fail).
  4. Remove the comment from Data.aspx.
  5. Run XDR (it will succeed).

* Since you will need to modify the code on the server side, you need to run this demo offline.

image

Native JSON Support

If you are building AJAX applications, you are probably familiar with the JavaScript Object Notation (JSON). In the past, you had to rely on external JavaScript libraries (for example, json.org) to serialize and de-serialize JSON. Due to increasing requests from Web developers to be able to perform this operation in a secure and performing way, the JSON object has been introduced in the ECMAScript specification and implemented natively in Internet Explorer 8.

Using JSON you can easily parse and construct JSON text.

Further information: ECMAScript Spec - MSDN

  1. Run the demo.
  2. Convert to string/JSON.
  3. Inspect using the IE8 Developer Tools.
  4. Open the IE8 Developer Tools (F12).
  5. Select the ‘Script’ Tab.
  6. Add a breakpoint on ‘JSON.parse(txt.value)’ (right-click and select Insert Breakpoint).
  7. Click on ‘Start Debugging’.
  8. Press the buttons on the page to enter in the debugger mode.

image

Native JSON vs. Json.js Performance Test

Having the JSON object built natively in the browser means that IE8 will take care of the security layer automatically; it will also execute the serializations much faster, as all the code is optimized to run at a low level. In this sample, I’m running a batch of stringify/parse using the JSON library from the json.org site and then the Native IE8 JSON object. You will notice that the latter is up to ~10x faster.

  1. Run the demo.
  2. Try with other browsers… :-)

image

Ajax Navigation

IE8 introduces Asynchronous JavaScript and XML (AJAX) Navigations. These features are designed to help alleviate the frustration of end users with AJAX-enabled Web sites that are not navigable through the Back and Forward buttons, and that do not update the browsing history. With just a few simple lines of script, you can add AJAX Navigations to your Web site, making the navigation of your AJAX-enabled content as smooth and seamless as "traditional" navigation.

Further information: W3C Spec - MSDN

  1. Run the demo.
  2. Navigate back/forward.

image

CSS Selectors

Selectors, which are widely used in CSS, are patterns that match against elements in a tree structure. The Selectors API specification defines methods for retrieving Element nodes from the DOM by matching against a group of selectors. It is often desirable to perform DOM operations on a specific set of elements in a document.

The CSS Selectors methods simplify the process of acquiring specific elements, especially compared with the more verbose techniques defined and used in the past.

Further information: W3C Spec - MSDN

  1. Run the demo.

image

CSS Selectors vs. DOM Navigation Performance Test

Since the CSS Selectors are built into the browser, they perform better than any other JavaScript implementation (for example, older versions of jQuery). In this demo, I’m using the DOM navigation and the Native IE8 CSS Selectors to select all the elements with the inner class. You can see how the performance of the IE8 CSS selectors is dramatically better than the previous approach.

  1. Run the demo.

image

Mutable DOM Prototypes

Today, Web developers need improved programming functionality, flexibility, and features to enable them to build the next generation of Web applications. To further empower Web developers with the programming tools necessary to build new JavaScript scenarios, IE8 offers a collection of features that extend some of JavaScript's advanced functionality into the Document Object Model (DOM).

Further information: W3C Spec - MSDN

  1. Run the demo.

image

Again, I’d like to remind you that the source code for all the demos in this post is available for download here.

I’m excited and looking forward to seeing these new functionalities implemented across the Web!

<Giorgio />