Create better HTML5

[Original article address]Building Better HTML5

[Original article posting time] 7 Apr 2011 PM

With the recent release of IE9, I would like to share with you some of our development tools that support HTML5, ECMAScript 5, and CSS3 development.

Throughout its release cycle, IE9 blogs have improved standard support, especially for HTML5, CSS3, DOM, and JavaScript standards. From the perspective of developers, we want to ensure that developers have tools to work with new features of IE 9.

F12 tool set

When a problem occurs, the client sender's first line of defense will be a tool set built into the browser. IE9's F12 toolkit includes updated DOM and CSS detectors, a script debugger and analyzer, and some tools, it is used to help developers preview their websites in different IE browsers and file models, quickly clear browser cache, and verify the validity of HTML.

In IE9, we added a new network analysis tab, which allows developers to quickly and easily locate the time and bandwidth consumption of their web pages, where a network error occurs (such as a defective header) to help them track the debugging site. Next, you will see how the network detector displays information in a website request.

In addition to adding some main functions in the F12 tool set, we also responded to some of the most popular requests. The following are the features required by the user:

· Users want to use the up and down arrow keys in the CSS label to change the value, so we have added this function.

· We have improved the source File Viewing Performance of IE9 by at least 10 times. The F12 tool set can now format the compression script (the script can use tools like Microsoft's Ajax Minifier to compress the capacity), and also make the compressed JavaScript more readable. The following shows how the compression script is formatted.

Before:

After:

Expression Web 4

Expression Web is a website creation tool that combines the visual website creation experience and webpage code editing functions. We coordinated the launch of Win7 SP1 with the release of IE9 to enable Expression Web to support the latest web standards and to better support these standards in IE9.

Like IE9, Expression Web 4 SP1 now supports HTML5 (this video shows the demo version), including support for the intelliisense for HTML5 full sketch specification, support for CSS3 sketch specification in the functional bar of CSS3 properties and general css attributes in the Style dialog box, including the border range in IE9 (see). HTML5 markup semantics supported by IE9 is as follows,

,
And
It has been recognized and used in the Expression Web design view.

The updated Expression Web's Snapshot function can fully support IE9. Snapshot is an Expression Web panel that shows the Display Effect in Internet Explorer 6-9 when you create a page. It is an ideal assistant to help you upgrade your page from an earlier browser version to the latest and best version.

You can download Expression Web SP1 or get the trial version.

Expression SuperPreview

Expression SuperPreview is a tool that simplifies the process of testing and debugging the layout of different browsers .. With SuperPreview, you can view your page on multiple browsers at the same time or how a page is generated and compared with the page's conforming images or model images. SuperPreview helps website producers solve an important aspect of the production process, that is, how to identify and fix cross-browser layout problems. It can generate pages on IE6, IE7, IE8, IE9, Safari 4 & 5 (on the Macintosh platform), Chrome, and Firefox, and allows you to easily review the display effect.

SuperPreview uses your locally installed browser and the host browser of the ECS to generate Web page rendering. It displays element information, such as dimensions, application styles, and DOM tree information. SuperPreview can be used either locally or remotely. You can watch this Demo Video application SuperPreview. SuperPreview is a great tool that allows the author to use HTML5 and ensure that web pages are generated on low-end browsers ..

SuperPreview works with any web writing tool, but works best with Expression Web.

Recently, Expression SuperPreview has been updated to support IE9. Through that update, we have also made a trial version that SuperPreview can use. The trial version provides unlimited support for IE6, IE7, IE8, and IE9, but only supports the 60-day trial period for other browsers. This version supports everything supported by SuperPreview online services.

Visual Studio 2010 SP1
[
Visual Studio 2010 SP1 provides enhanced support for HTML5 and CSS3 smart sensing and effective verification. New tags such

, And are all supported. New attribute values are also supported, for example. SP1 also includes enhanced support in CSS3. For example, the editor now supports more advanced selector such as not giving div: nth-child (2n + 1) validation error. The new color values rgba, hsl, hsla, and 8 digit hex are also supported. New tags, such as footer>, and new attribute values are also supported, such. SP1 also includes enhanced support in CSS3. For example, the editor now supports more advanced selectors (such as div: nth-child (2n + 1) without reporting verification errors. New color values, such as rgba, hsl, hsla, and 8-bit hexadecimal values are also supported.

Other useful tools

For developers who focus on creating HTML5, JavaScript, and CSS3 websites, F12 tools, Visual Studio, Expression Web, and SuperPreview are just some useful tools. I have already mentioned another tool-AjaxMin, which you can use to improve website performance, but there are many other tools. For example, Jscript Editor Extensions has added some functions. For example, in VS, brackets can automatically match JavaScript's smart sensing functions .. Last year, we released Visual Studio AJAX Profiling Extensions (formerly called AjaxView) as a Power Tool, which will help developers better understand the performance characteristics of their customers' web code. We have done a lot to improve jQuery's support, including ongoing updates. Therefore, to ensure that Visual Studio supports intelliisense, jQuery templates, and globalization for the latest jQuery version, and a split set. Last but not least, it is Fiddler, the most popular debugging proxy server.

These tools allow us to use them together with tools related to HTML5, CSS3, and JavaScript.

For more information about HTML5, CSS3, and Jscript, visit ScriptJunkie.

Namaste