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!
Comments
Anonymous
April 07, 2011
www.hanselman.com/.../TakingProperScreenshotsInWindowsForBlogsOrTutorials.aspxAnonymous
April 08, 2011
!Scott: Full-size versions of the images are available if you click on them. Smaller sizes are used on the site to ensure readable formatting across browsers. Polita Paulus MicrosoftAnonymous
April 09, 2011
@Polita: that is completely not the point.Anonymous
May 09, 2011
Really nice post. I think Microsoft Web Development Tools somehow are a little bit under rated. I like to work with them. Kind regards Stefan Bauer http://www.n8d.at/blogAnonymous
May 09, 2011
Except it doesn't work on XP !Anonymous
May 09, 2011
Perhaps the wrong pew but hope this is the right church. My life would be horribly altered without Microsoft "One-Note". Adding to One Note from the "Tools" drop down is one reason i have not changed to Google Chrome. After upgrading to I.E. 9 I find that the ability to do that no longer exists. Fact, or has it been moved?Anonymous
May 09, 2011
lol, come on now! I love the tools, what happened here? validator.w3.org/checkAnonymous
May 09, 2011
As stated by Memo, 9 May 2011 Except it doesn't work on XP ! HTML5 is never going to take-off unles IE9 is released for XPAnonymous
May 09, 2011
As stated by Memo, 9 May 2011 Except it doesn't work on XP ! HTML5 is never going to take-off unles IE9 is released for XPAnonymous
May 09, 2011
Great, a lot of little things I hadn't observed before. We are using HTML5 already for intranet applications and the experience is very good.Anonymous
May 09, 2011
nice postAnonymous
May 09, 2011
Here's a thought: When IE9 supports HTML5 as well as the other mainstream browsers, then an article like this would be appropriate.Anonymous
May 10, 2011
I did not know that I was deaf until I visited the "IE9, Expression Web 4 SP1 now supports HTML5" page. ( expression.microsoft.com/.../gg998776.aspx ) It doesn't matter which browser I use to view this page. The good news is that after leaving the above page I have regained my hearing.Anonymous
May 11, 2011
Its GreatAnonymous
June 19, 2011
The comment has been removed