An Event Apart: The CSS3 Experience

by Luke Wroblewski April 5, 2010

At An Event Apart in Seattle, WA Dan Cederholm illustrated the potential of CSS3 to enhance the user experience in modern Web browsers by walking through The CSS3 Experience. Dan used a showcase site he created to illustrate CSS3 in action at: Things We Left on the Moon.

  • NASA engineers were creating the best experience possible given the technology they had. Web designers are also sending out messages (that can reach the most people possible).
  • We also want to enrich that message for our users. Progressive enhancement allows you to build a user experience that optimizes for the capabilities of different devices.
  • Markup, Style, and Experience. You can add CSS3 to your site today to add enrichment (experience) in many major browsers. There are two kinds of visual events: critical and non-critical. CSS3 makes the most sense for non-critical areas of interactions.
  • One of the problems with CSS3 now is you need to manage vendor-specific attributes and standard attributes together in your code.
  • Core CSS properties we can use today to enrich experiences in some browsers: border-radius, text-shadow, box-shadow, opacity, RGBA, and multiple backgrounds.
  • CSS transforms, transitions, and animations were pioneered in WebKit but support will be enabled in next FireFox release.
  • RGBA allows you to specify color as well as opacity.
  • Put your CSS3 properties last in a CSS style declaration.
  • Transitions go on original elements not on hovers so they apply to all states.
  • Opacity swapping: start with one opacity and change to another onhover. If you want opacity changes in Internet Explorer, you can use the proprietary filter property.
  • Multiple backgrounds: currently supported relatively well (not IE). If you are using this for non-critical items –why not use multiple backgrounds? You can create parallax effects with much less code. Fallback for browsers that don’t support multiple background images is to list the critical background element first.
  • Forms: forms look very different depending on what browser you are using. Use an attribute selector to apply styles to form elements since browsers that don’t support it won’t support CSS3 either.
  • CSS gradient syntax is different in Webkit and Gecko.
  • Buttons: can be made with border-radius, box-shadow, text-shadow, and gradient properties together.
  • CSS3 animation syntax is pretty straightforward compared to some of the other syntax. Webkit is the only browser that does animation at this point.
  • Scale transform: transitions can smooth out events.
  • Rotation: another kind of transformation but use it sparingly. Being subtle is important.
  • Finishing touches: you can add a catchall transition for all scales and transforms to smooth out animations.
  • Common sentiment is “I can’t use CSS3 yet”. Depending on your project, you may not have the ability.
  • CSS3 is a series of modules being rolled out over time. You need to find things that can help enhance the user experience. Someone out there will enjoy it.