HTML5, CSS3, and More with Expression Web 4 SP1

If you’re designing for the web (especially with HTML5 and CSS3), take a look at Expression Web 4, a design-focused environment for HTML, CSS, validation, SEO, and more. See “Top 10 Features” for an introduction.

Expression Web 4 Service Pack 1 has just been released, adding a bunch of new features:

HTML5 Support

While some HTML5 support was available via add-ins prior to SP1, SP1 directly integrates support for all HTML5 tags. For example, semantic elements like article and aside:

Expression Web will flag HTML5 schema violations in real time:

And you can run the Compatibility Checker (Tools –> Compatibility Reports) for a detailed report:

Notice the hr element’s size attribute, deprecated in HTML5, has been flagged:

CSS3 Support

CSS3 support includes IntelliSense and error checking for the CSS3 draft specification. To enable this, open the Authoring tab in Tools –> Page Editor Options and ensure the CSS Schema is set to “CSS 3 draft”:

You’ll have IntelliSense for new CSS3 properties like pseudo-classes and pseudo-elements:

And by the way, IntelliSense goes beyond listing text:

CSS3 also extends to tools like the New/Modify Style dialog (including border-radius and box-shadow):

CSS Properties is CSS3-aware as well. For example, here are CSS3 border-radius and box-shadow properties, along with an HSL color model:

SuperPreview, Now with More Super

A constant challenge for web developers is seeing how a page renders in different browsers. The problem is, a single machine often can’t run all of the browsers (and multiple versions of the same browser) a designer wants to test.

Part of Expression Web, SuperPreview makes that easier. Fire up a web page and compare how it renders in multiple browsers, including Internet Explorer 9: