CSS3 IS FOR EVERYONE
I’ve been hearing this quite a bit from fellow web designers across the globe: “I can’t wait to use CSS3 … when it’s done.”
But the truth is everyone can begin using CSS3 right now. And
2. http://www.w3.org/TR/css3-roadmap/#whymods
fortunately you don’t have to think differently or make drastic changes to the way you craft websites in order to do so. How can anyone use CSS3 on any project? Because we’re going to carefully choose the situations where we apply CSS3, focusing squarely on the experience layer.
Targeting the experience layer
If we’ve been doing things right over the past several years, we’ve been building upon a foundation of web standards (semantic HTML and CSS for layout, type, color, etc.), leav- ing much of the interaction effects—animation, feedback, and movement—to technologies like Flash and JavaScript.
With CSS3 properties being slowly, but steadily introduced in forward-thinking browsers, we can start to shift some of that experience layer to our stylesheets.
As an interface designer who leans heavily toward the visual side of design rather than the programmatic side, the more
I can do to make a compelling user experience using already- familiar tools like HTML and CSS, the more I do a happy little dance.
CSS3 is for web designers like you and I, and we can start using portions of it today, so long as we know when and how to fold it in.
When to apply CSS3
In terms of a website’s visual experience, we could group things into two categories: critical and non-critical (table 1.01).
Areas like branding, usability, and layout are crucial to any website’s success, and as such utilizing technology that’s not fully supported by all browsers would be a risky venture there.
For example, in the evolving CSS3 spec there are multiple drafts for controlling layout—something we drastically need.
|
CRITICAL |
NON-CRITICAL |
|
Branding |
Interaction |
|
Usability |
Visual Rewards |
|
Accessibility |
Feedback |
|
Layout |
Movement |
table 1.01: A website’s visual experience can be grouped into critical and non-critical categories. The latter are where CSS3 can be applied today.
We’ve been bending the float property to handle layout for years now. We’ve figured out how to get by with what we have, but a real layout engine is absolutely a necessity.
That said, two of the three new CSS3 layout modules have yet to be implemented by any browser. They’re still being worked out, and arguably are still confusing, difficult to grasp, and likely not the final solution we’ve been looking for. Most im- portantly, for something as important as layout, CSS3 just isn’t the right tool. Yet.
On the opposite end of the spectrum are non-critical events like interaction (hover, focus, form elements, browser viewport flexibility), and visual enhancements that result from those interactions (along with animation). It’s far less crucial to match an identical experience between browsers for events like these, and that’s why it’s a perfect opportunity to apply certain portions of CSS3 here for browsers that sup- port them now.
It’s atop these non-critical events where we’ll be applying CSS3 throughout the book, keeping the more important char- acteristics of the page intact for all browsers, regardless of their current CSS3 support.
When we decide to focus on and target these non-critical
areas of the visual experience, it becomes incredibly freeing to layer on CSS3 and enrich the interaction of a website without worrying that the core message, layout, and accessibility will be hindered.