In his Everything Old Is New Again talk at An Event Apart in Seattle, WA Eric Meyer highlighted how new CSS3 capabilities can be used to tackle long-standing Web development issues with a lot less effort and code. Here's my notes from his presentation:
- CSS Box model causes problems with layouts. We use nested divs to manage this issue. With CSS3, we can now use box-sizing to avoid column drop issues. You can use this today because box-sizing is supported in major browsers including IE8.
- Resolution dependent layout uses Javascript to trigger different layouts depending on screen sizes. But we can now use media queries instead. With media queries you can test for device width using CSS. Define a basic layout set, then a set of media queries to cover a range of device widths.
- Rounded-corners used to required a complex set of mark-up and CSS. We can now simply set border-radius for DIVs. Even with vendor prefixes you are still better off with border-radius then with multiple DIVs in your mark-up. This is more intermediate future as it will not work in IE8. IE9 will support border-radius when it is released.
- Sliding doors was a technique used to create CSS-based tabs. Now it can be done without images by using border-radius. The simplest case of sliding doors is flat colors but what about beveled tabs? We can use multiple background images in CSS to create the same effect in all browsers but not Internet Explorer. You can set fallbacks for IE so people see only a single background image.
- RGBA effects won’t replace everything you can do in Photoshop. But they do allow you to composite images together.
- With CCS3, you can use first-child and last-child to remove the need for first and last classes in lists with visual/content in between elements.
- Using CCS3, you can combine media-queries with nth-child declarations to do sophisticated multiple device/resolution layouts.