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.
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
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.
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.
* Since you will need to modify the code on the server side, you need to run this demo offline.
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
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.
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.
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.
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.
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).
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 />
In my previous posts, I mentioned my trip around the world. In this and the next few posts, I’d like to share a few demos and resources from my presentations.
Test cases to improve interoperability
I will start with the IE Testing Center, where you can find over 7,200 test cases we contributed to the W3C; these tests cover the CSS 2.1 specification in depth, plus a few other specs from other W3C Working Groups. Because there are ambiguities, options, and misinterpretations in any specification, the IE Team created these tests to verify that a browser supports what you are trying to do before you depend on it.
To get a sense of how these tests work, let’s run some of them using the latest builds of the browsers as of this writing: Firefox 3.5.3, Safari 4.0.3, Chrome 3.0.195.24, Opera 10.00 (1750) and IE 8 RTM. It’s important to understand that there is no winner or loser here, just different browsers that are working with the same goal: better interoperability.
1. Border applied to element with 'display' set to inline-block The test passes if there is a box below. Run it here.
All browsers pass the test
2. Inline box containing block boxes The test passes if there are blue borders around the top, left, and bottom, but not the right side of the text "First line," and borders around the top, right, and bottom, but not the left side of the text "Last line." Run it here.
All browsers but Firefox pass the test
3. Margin collapsing - element with clearance The test passes if there is no red visible on the page. Run it here.
Only Opera and Internet Explorer pass the test
If you look at the source code of the pages (on IE8, right-click the page and select View Source), you will notice some recurring elements such as author, help, flags, and assert. These elements are standard components of all tests in the suite, which also include a simplified scenario to validate the assertion.
To make your life easier, the Expression Team also developed and released a new tool for Web developers: Expression Super Preview.
During the Auckland Web Meetup, I demonstrated how to use Expression Super Preview to perform cross-browser debugging, and to help sites migrate from earlier versions of IE to Web Standards in IE8. I was excited to hear the very positive responses from the user group audience, including Rob O’Callahan and his colleagues from the Firefox team--between a pizza and a beer (or maybe more?) I heard some very interesting feedback and got great ideas for future scenarios!
Expression Super Preview for IE is available for FREE here. Once installed, you can run this demo:
In this demo, the site hit a well-known IE6 bug (double margin), that can be fixed by setting the display property to inline.
You can find other Training Kits, Tutorials, and Videos about Expression Super Preview here.
In my next posts, I’ll share other demos from my roadshow. Stay tuned!
PDC, Los Angeles. 11/18 of a sunny morning.
Steven Sinofsky, Windows President of Microsoft Corp, showed some of the commitments and the work in progress for Internet Explorer 9. Check out his video here.
Or, if you are interested to know more details from the IE team, watch the new Channel 9 videos or read the blog post from the IE General Manager, Dean Hachamovitch.
What about IE8? As soon as I’m back to my office, I’ll share some demo and tool of the many HTML 5 and web standards features already implemented in IE8.
Kudos to the IE team!
The IE roadshow continues, as I’m again travelling around UK, Germany and PDC in November. This will be a great chance to hear some “European feedback” - I’m looking forward to reporting back to the product team! ;-)
Here’s a calendar of the events:
I will talk about Browsers, about Web Standards and HTML 5 work in progress, about the new Web Features and Scenarios, about the Developer Tools, about best practices to improve AJAX performance and much more…
See you around!