Share via

HTML5, CSS3, and More with Expression Web 4 SP1

  • Article

imageIf 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 – Code Editor IntelliSense and Design View support
  • CSS3 – Property IntelliSense and new tooling support
  • New SuperPreview Features – Online service, Interactive pages, and Internet Explorer 9 support
  • Expanded PHP Support – PHP 5.3 and PHP module IntelliSense, PHP version-aware tooltips, and “Open as PHP” feature.
  • And of course various fixes and tweaks

Let’s dive into the first three items in this post.  The Expression Web team blog has a detailed post on the release, and there’s a What’s New page as well.

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:

HTML5 IntelliSense

Expression Web will flag HTML5 schema violations in real time:

HTML5 Schema Validation

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

Compatibility Checker

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

Compatibility Report

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”:

Authoring Options  Setting CSS Schema

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

CSS3 IntelliSense

And by the way, IntelliSense goes beyond listing text:

IntelliSense for colors

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

Modify Style dialog

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

CSS Properties

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. 

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

SuperPreview

Here’s an overview of SuperPreview features to get you started.  But let’s focus on what’s new…

Page Interaction Mode

Page Interaction ModeSome pages you’ll want to test require a user to log in. The new Page Interaction Mode (CTRL+I) adds support for many of these login-protected pages. Just turn it on then head to the page and log in.

SuperPreview Online Service

Online ServiceAdditional browsers are available remotely via the SuperPreview Online Service.  This service renders pages for you so you don’t need to install additional browsers/versions to compare results. 

View the Online Service status to see which browsers/versions are available:

Online Service Status

Expressing Yourself

Expression Web 4Now that you’ve seen all of this, how do you get Expression Web 4?

Then head to these places to learn more:

Enjoy creating those designs!

-Chris

Comments

  • Anonymous
    March 24, 2011
    Too bad I can't install it! Keep getting an error that the Web_en.msi file is missing. Have post in forum, but no response.