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.
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.
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.
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