Dan Cederholm - CSS3 for Web Designers

Looking back upon the storied history of CSS , we see some important milestones that have shaped our direction as web designers. These watershed techniques, articles, and events helped us create flexible, accessible websites that we could be proud of both visually as well as under the hood.

You could argue that things began to get interesting back in 2001, when Jeffrey Zeldman wrote To Hell With Bad Browsers ( signaling the dawn of the CSS Age. This manifesto encouraged designers to push forward and use CSS for more than just link colors and fonts, leaving behind older, incapable browsers that choked on CSS1. Yes, CSS1.

We spent the next several years discovering and sharing techniques for using CSS to achieve what we wanted for our clients and bosses. It was an exciting time to be experimenting, pushing boundaries, and figuring out complex ways of handling cross-browser rendering issuesall in the name of increased flexibility, improved accessibility, and reduced code.

Somewhere around 2006 or so, the talk about CSS went quiet. Most of the problems we needed to solve had documented solutions. Common browser bugs had multiple workarounds. We created support groups for designers emotionally scarred by inexplicable Internet Explorer bugs. Our hair started to gray. (OK, Im speaking for myself here.) Most importantly though, the contemporary crop of browsers was relatively stagnant. This period of status quo gave us time to craft reusable approaches and establish best practices, but things got a little, dare I say, boring for the CSS aficionado yearning for better tools.

Thankfully things changed. Browsers began iterating and updating more rapidly (well, some of them anyway). Firefox and Safari not only started to gain market share, they also thrived on a quicker development cycle, adding solid standards support alongside more experimental properties. In many cases, the technologies that these forward-thinking browsers chose to implement were then folded back into draft specifications. In other words, periodically it was the browser vendors that pushed the spec along.

Ask a roomful of web designers, Who likes reading specs? and you might get one person to raise their hand. (If you are that person, I commend you and the free time you apparently have). Although they serve as important references, I certainly dont enjoy reading specifications in their entirety, nor do I recommend doing so in order to grasp CSS3 as a whole.

The good news is that CSS3 is actually a series of modules that are designed to be implemented separately and independently from each other. This is a very good thing. This segmented approach has enabled portions of the spec to move faster (or slower) than others, and has encouraged browser vendors to implement the pieces that are further along before the entirety of CSS3 is considered finished.

The W3C explains the module approach:

Rather than attempting to shove dozens of updates into a single monolithic specification, it will be much easier and more efficient to be able to update individual pieces of the specification. Modules will enable CSS to be updated in a more timely and precise fashion, thus allowing for a more flexible and timely evolution of the specification as a whole.

The benefit here for us web designers is that along with experimentation and faster release cycle comes the ability to use many CSS3 properties before waiting until they become Candidate Recommendations, perhaps years from now.

Now, by all means, if you enjoy reading specifications, go for it! Naturally theres a lot to be learned in therebut its far more practical to focus on whats currently implemented and usable today, and those are the bits that well be talking about in the rest of this chapter. Later, well apply those bits in examples throughout the rest of the book.

Ive always learned more about web design by dissecting examples in the wild rather than reading white papers, and thats what well stress in the pages that follow.

Ive been hearing this quite a bit from fellow web designers across the globe: I cant wait to use CSS3 when its done.

But the truth is everyone can begin using CSS3 right now. And fortunately you dont 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 were going to carefully choose the situations where we apply CSS3, focusing squarely on the experience layer.

If weve been doing things right over the past several years, weve been building upon a foundation of web standards (semantic HTML and CSS for layout, type, color, etc.), leaving much of the interaction effectsanimation, feedback, and movementto 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.

In terms of a websites visual experience, we could group things into two categories: critical and non-critical ( TABLE 1.01 ).

TABLE 1.01 : A websites visual experience can be grouped into critical and non-critical categories. The latter are where CSS3 can be applied today.

Critical	Non-critical
Branding