At An Event Apart in San Diego, CA 2010 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 to communicate. Web designers are also sending out messages (that try to reach the most people possible). We can make assumptions about how people will engage with our Websites but we don’t know the capabilities of the actual audience we will reach.
- We also want to enrich our message for our users. Progressive enhancement allows you to build a user experience that optimizes for the capabilities of different devices.
- Do Websites need to be experienced the same in every browser? Nope. CSS3 can be used to enhance interactions that will only be visible in some browsers.
- 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 because not all of CSS3 is implemented yet.
- Don’t be afraid of vendor-prefixes in CSS3. They allow you to provide support across browsers as the final standards are developed. Be sure to list non-prefixed properties last.
- 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. Make sure there is a back-up color specified when using RGBA.
- Put your CSS3 properties last in a CSS style declaration. When standardized, this declaration will trump any vendor specific pre-fixes listed earlier in the declaration.
- Transitions should go on the 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. This is not part of the CSS3 specification.
- You can develop completely white (PNG) images and then adjust their transparency using CSS opacity. This gives you more flexibility.
- 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 (IE) is to list the critical (single) 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. Overall the syntax is a bit hard but there are tools that give you a visual way to see changes.
- Buttons: can be made with border-radius, box-shadow, text-shadow, and gradient properties together.
Transforms & Animations
- 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. Add rotation where it means something.
- Finishing touches: you can add a catchall transition for all scales and transforms to smooth out animations. This smoothing can apply transitions to lots of properties: width, height, position, opacity, etc.
- 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 and apply CSS3 there. Someone out there will enjoy it.