One of the key people from whom I learned how to do standards-based markup and CSS is Dan Cederholm, through his books Web Standards Solutions and Bulletproof Web Design. He has a real knack for taking the complex and challenging and transforming into something seemingly simple and doable. So the opportunity to hear him talk about CSS3 at An Event Apart Minneapolis was a real treat.
His presentation began where all presentations on CSS3 should probably begin: the moon. He discussed his interest in NASA and in particular, the things left behind by astronauts on the moon, such as circuitry. Another marvelous item in space: the golden records on the Voyagers which try to explain through mathematics and geometry to an unknown audience who we are, and in particular, that we are intelligent.
Dan’s point was that after we create a message we don’t know how it will be received. Our job isn’t to make things fancy, but to tell a story and enrich a message through design.
He then gave the example of watching a TV show in black and white or on a color set. The show is the same, but the device determines user experience.
The same is true with web browsers. Dan likes to register really long domain names, such as DoWebsitesNeedToBeExperiencedExactlyTheSameInEveryBrowser.com, Check it out to find the answer.
With any site, you should start with markup, then add style and experience. CSS3 helps to deliver that solution. If a user doesn’t have CSS3, they may have a different experience, but they will receive the same message.
Throughout the rest of the presentation, Dan demonstrated CSS3 techniques through an example site, css3exp.com/moon/. This works marvelously well in the most recent version of Safari, and I suppose Google Chrome as well. Firefox has most of the experience. IE? In IE9, maybe.
CSS can help deliver a number of critical features, including:
- Branding
- Usability
- Accessibility
- Layout
Those features are non-negotiable: if they fail, problems ensue.
However, CSS can also deliver a number of features that are non-critical:
- Interaction
- Visual rewards
- Feedback
- Movement
The world does not end if the user is unable to experience these features, so if CSS3 can enhance those parts of a site’s experience, we can start using them today.
CSS3 has stuff that works now and stuff that doesn’t. Luckily, CSS3 is separated into modules. This makes it easier for browser vendors and for us to implement CSS3 in parts.
These CSS3 features already work across browsers in all but IE, and IE9 may fix that:
- Border-radius
- Text-shadow
- Box-shadow
- Opacity
- RGBA
- Multiple backgrounds
Other features are in progress for CSS3, including transforms and transitions. Animations are a bit more trouble: these started with Webkit and are moving into the spec.
On css3exp.com/moon, try hovering over the navigation elements. This surprising and delightful experience is created through CSS features such as text-shadow, box-shadow, RGBA and border-radius. If CSS3 is not available, a backup background is available so change is still evident.
If you futureproof your CSS, older browsers will still get a functional but simpler user experience while newer browsers receive a better experience.
A quick example of something you can do with :hover. On a standard link, set {opacity: .5;}. On a :hover link, {opacity: 1;}. Just a simple change of opacity on hover: pretty sweet!
Then Dan took this example to another level. Did you know this :hover opacity trick can be used on images, too? On the bottom of css3exp.com/moon, the images are actually fully white PNG icons that change opacity on hover. How funky is that?
Yes, you say, but this shall not work in IE! For IE, you can use the hack of filter: alpha(opacity = 50); to get the same result. You probably want to put this in a different stylesheet served up with conditional comments. This technique has a performance impact, but it works.
A few years ago, when CSS3 was still in its infancy, the proposed feature that most excited Dan was multiple backgrounds, because of the CSS techniques people were using at the time, such as sliding doors.
A great example? silverbackapp.com has a really neat multiple backgrounds effect when you resize the window: the parallax effect imitates depth. Silverback accomplishes this through the use of multiple PNGs and divs. Now, however, CSS3 allows multiple backgrounds on the same element with a comma-separated list.
As a sidenote, what struck me is that this technique of having multiple backgrounds move at different rates was one of the secrets of Disney’s animation success. Disney invented the multi-plane camera filming animation cels moving up and down in relation to the camera above to simulate depth and draw in the viewer, which helped spur emotion. We can do the same with a few lines of code
Keep in mind that if you are using multiple backgrounds, older browsers won’t display any backgrounds if the feature was not supported. You can solve this problem by first declaring one background image in the CSS on a separate line: this serves as a fallback.
Forms are great opportunity to make enhancements with CSS, although you need to be careful when you take away the familiarity of native OS form objects. The form on css3exp.com/moon helps demonstrate what is possible. Try putting your cursor in a form field and hovering over the submit button.
One important tool in creating these effects? CSS3 gradients. Unfortunately, these are not yet standardized, and different code is required for different browsers. A neat tool helps you create gradient CSS code that works cross-browser: www.westciv.com/tools/gradients/index.html.
Between the gradients, rounded corners, and shadows, all of these little things add up and mean that you don’t need to make PNGs throughout your site to make buttons look all fancy pantsy. This saves designers time and saves users from downloading those PNGs, thus speeding up the site.
Another nice feature of those example text inputs is that byusing CSS3 Animations (Webkit only right now), the form inputs pulse blue on focus and pulse red on error. This is done subtly, a nice usability feature.
CSS3 Tranform can do image magnification on hover with much less code than jQuery. This allows you to zoom slightly on hover, for example (too much zoom might not work well). You can see this on css3exp.com/moon by hovering over the objects on the moon.
Another transform option: rotate. For this one, be careful to use it appropriately. He showed a good example: adding rotating rays to a sun. A bad example is to add this to your code: *:hover {rotate:180deg}.
With all of these amazing features of CSS3, the key question is how you get permission to use these techniques on a project. Won’t clients be concerned about users in different browsers having different experiences? Dan’s advice: just do it. If you do this right, some users will notice and love the extra experience you add and some won’t ever see it. That’s fine. Try it out.
I was convinced. I have been leery of moving forward with CSS3 until there was more browser support, but now I’m convinced that there is enough support that we can start using these techniques today.
Mission accomplished, Dan Cederholm!