An Event Apart: Everything Old Is New Again

by July 28, 2010

In his Everything Old Is New Again talk at An Event Apart in Minneapolis, 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. One way to solve this is to put DIVs inside another DIV and apply padding to them. With CSS3 you can use the box-sizing property to apply width to an entire box element. There will be less need for nested DIVs with this approach.
  • But not all browsers (such as IE7 or IE8) support this very well. With all CSS3 you need to be mindful of the browsers coming to your site. Small Javascript files can provide support to older browsers.
  • 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. This makes media queries well-suited to mobile design.
  • 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.
  • 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.
  • 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.