Building Better HTML5

With IE9's recent release, I wanted to share with you a little about some of our development tools that support HTML5, ECMAScript 5, and CSS3 development.

Throughout its release cycle, IE9 has blogged about ongoing improvement around standards support, particularly around support for the HTML5, CSS3, DOM, and JavaScript standards. From a developer perspective, we wanted to ensure that developers had the tools to work with IE9's new capabilities.

F12 Tools

A web client developer's first line of defense when something goes wrong will be to use the browser's built-in toolset. IE9's F12 tools include updated DOM and CSS inspectors, a script debugger and profiler, and tools that help developers preview their sites in IE's different browser and document modes, quickly clear the browser cache, and validate HTML.

In IE9, we added a new network analysis tab that enables developers to quickly and easily visualize where their pages are spending network time and bandwidth and where there may be possible network errors (such as malformed headers) to help them track down and debug their sites. Below, you can see how the Network Inspector displays information on a website request.

In addition to adding some major features to the F12 tools, we also addressed some of the top customer requests. A few examples of customer-requested features:

  • Customers wanted to be able to change values using the up and down arrow keys in the CSS tab, so we added that
  • We improved IE9's View/Source performance by a factor of at least 10.
  • The F12 tools can now format minified script (script that has been reduced in size using a tool such as Microsoft's Ajax Minifier), turning a typical single-line of minified JavaScript into something much more readable. Below, you can see the before and after views of minified script.

Before:

After:

Expression Web 4

Expression Web is an authoring tool that combines a visual web site creation experience with code editor-based page authoring capabilities. We coordinated the introduction of SP1 with the release of IE9 to enable Expression Web to support the latest web standards and to support them particularly well with Internet Explorer 9.

Like IE9, Expression Web 4 SP1 now supports HTML5 (you can see a demo in this video) including IntelliSense for the complete HTML5 draft specification, support for the CSS3 draft spec in the CSS Properties palette, and support for common CSS properties in the Style dialogs, including support for Border Radius in IE9 (pictured below). Semantic HTML5 tags that IE9 supports such as <canvas>, <section>, <hgroup>, and <footer> are now recognized and usable in Expression Web's Design View.

Expression Web's Snapshot feature has also been updated to integrate support for IE9. Snapshot is an Expression Web panel that shows how your page will render in versions 6-9 of Internet Explorer as you are authoring it. It's ideal for helping you upgrade your pages from earlier browser versions to the latest and greatest.

You can download Expression Web SP1 or get a trial version of Expression Web.

Expression SuperPreview

Expression SuperPreview is a tool for simplifying the process of testing and debugging layout issues across different web browsers. With SuperPreview, you can view your pages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a comp or mock-up image of a page. SuperPreview helps web site authors address an important aspect of authoring-namely, how to identify and fix cross-browser layout issues. It can render pages in IE6, IE7, IE8, IE9, Safari 4 & 5 (on Macintosh), Chrome, and Firefox, and lets you easily compare and interrogate those renderings.

SuperPreview takes advantage of your locally-installed browsers and browsers hosted in a cloud service to generate its page renderings. It displays element information such as size and applied styles, as well as DOM tree information. SuperPreview works with both local and remote sites. You can see a demo video of SuperPreview in action. SuperPreview is a great tool for letting authors take advantage of HTML5 features while ensuring that pages still render nicely on down-level browsers.

SuperPreview will work with any web authoring tool, but is nicely integrated (and ships) with Expression Web.

Recently, Expression SuperPreview has been updated to support IE9. With that update, we've also made a trial version of SuperPreview available. The trial provides unlimited support for IE6, IE7, IE8 and IE9 and 60-day trial support for other browsers, including all those supported by the SuperPreview online service.

Visual Studio 2010 SP1

Visual Studio 2010 SP1 includes improved support for HTML5 and CSS3 IntelliSense and validation as you're typing. New tags such as <footer>, <canvas>, <audio>, and <video> are supported, as well as new attribute values such as <intput type="email">. SP1 contains improvements in CSS3 support as well. For example, the editor now supports the more advanced selectors such as div:nth-child(2n+1) without giving validation errors. The new color values rgba, hsl, hsla and 8 digit hex values are also supported.

Other Useful Tools

F12 tools, Visual Studio, Expression Web, and SuperPreview are just some of the useful tools for developers focused on building HTML5, JavaScript, and CSS3 websites. I already mentioned one other tool - AjaxMin - that you can use to boost the performance of your site, but there are many others. For example, the Jscript Editor Extensions add features like brace matching to JavaScript IntelliSense in VS. And last year we shipped the Visual Studio AJAX Profiling Extensions (formerly AjaxView) as a Power Tool that will help developers get a much better sense of the performance characteristics of their client web code. We have done quite a bit to improve support for jQuery as well, including ongoing updates to insure that Visual Studio supports IntelliSense for the latest version of jQuery, jQuery templates and globalization contributions, and a collection of snippets. Last, but not least, is Fiddler, the popular web debugging proxy.

These tools provide a taste of some our tools work as it relates to HTML5, CSS3 and JavaScript. To learn more about developing in HTML5, CSS3 and JScript please visit ScriptJunkie.

Namaste!