An Event Apart: Everything Old Is New Again

by November 3, 2010

In his Everything Old Is New Again talk at An Event Apart in San Diego, MN 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. Padding, margins, and borders get added to the width of objects. This breaks relative widths of objects. One way to solve this is to put DIVs inside another DIV and apply padding, borders, etc. to them. With CSS3 you can use the box-sizing property to apply width to an entire box element including borders, margins, and padding. There will be less need for nested DIVs with this approach.
  • To create resolution independent layouts, we used to rely on Javascript adjustments. Instead CSS can deal with this using media queries. With a few simple rules, you can set a number of different layout styles based on the width of the user’s screen. One set of media query blocks can manage several different devices/resolutions and target by dpi, color settings, orientation, etc.
  • You can’t just apply media queries to magically optimize sites for mobile. Setting DIVs to display equals none using media queries still downloads the content. But media queries can be used to adjust layouts if you plan to send the same content to all devices (content sites, for example).
  • 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. Most major browsers are now supporting border-radius.
  • Vendor-specific prefixes are a pain to write out but are important for helping standards move forward. When the CSS working group standardizes an implement for new properties, the browser vendors can adopt it without breaking the Websites currently using their vendor-specific implementations. These vendor-specific prefixes implement layout a bit differently in each browser. They let browser makers experiment and get the output right before standardizing.
  • 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. Not all browsers support the right composite structure for background colors & images. So for now, it’s best to use separate properties.
  • RGBA can be used to set transparency on images and elements in Web layouts. These effects won’t replace everything you can do in Photoshop. But they do allow you to composite images together. You can also use HSLA to achieve the same effect.
  • With CSS3, you can use first-child and last-child pseudo-classes to remove the need for first and last classes in lists with visuals/content in between elements.
  • Selectors can also be used to apply styles to only odd numbered rows using the nth-child selector. You can set nth-child using different formulas to capture 2nd, 3rd, 4th, rows etc.
  • Using CSS3, you can combine media-queries with nth-child declarations to do sophisticated multiple device/resolution layouts.