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 – 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:
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:
Here’s an overview of SuperPreview features to get you started. But let’s focus on what’s new…
Page Interaction Mode
Some 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
Additional 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:
Expressing Yourself
Now that you’ve seen all of this, how do you get Expression Web 4?
- Trial versions
- Full version for MSDN subscribers
- Or directly purchase Expression Studio Ultimate, Expression Studio Web Professional, or Expression Web.
Then head to these places to learn more:
- Expression Web Learning Center – Videos, starter kits, and tutorials
- More Expression Web Getting Started tutorials
- Expression Web team blog
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.