An Event Apart: The Future of CSS

by Luke Wroblewski February 7, 2012

In his The Future of CSS talk at An Event Apart in Atlanta, GA 2012 Eric Meyer shared the what new CSS specifications are under development, partially available, and can be used today. Here are my notes from his talk:

Browser makers implement lots of CSS specs out but when you try to use them, you often can’t. Between 2000 and 2010 not a lot happened with the CSS spec. Today there are lots of new modules in active development.

Under Development

  • Animations are not ready for use just yet. Only Webkit supported animations until recently. The syntax in use now may be invalidated in the next few months or years
  • Multicolumn allows you to set gutter width, border rules, and much more. This is the layout system we’ve been wanting for years. But it’s only supported in Internet Explorer 10. So it can’t really be used now.
  • The first implementation of any spec in a browser is not going to be bug-free. It’s up to us to find and report this bugs.
  • Exclusions allow you to define elements that can be wrapped around. You can even set which alpha color the exclusion uses to wrap text around a transparent image border. You can also set specific shapes for the exclusion that are not the shape of the image you are wrapping around. This is not just limited to images. You can exclude any element.
  • Regions allow you to set text to flow between blocks across a layout. With regions you need to separate structure and layout as regions are marked-up separately from content. Adobe showed this working along with their spec.
  • Masks, text-stroke, and box-reflection are in Webkit only. It’s unlikely these are going to move beyond Webkit as the CSS working group has other specs for handling this like CSS filters.

Try Using

  • Flexible boxes allow you to use table layout without tables. This has been implemented in several browsers but the syntax in the spec is changing to the new version now under development. It can still be used but only if you really need it.
  • Paged Media gives you the ability to manage content in page-level elements like page numbers or other “boundary” elements traditionally on a printed page.
  • Hyphenation can be used in code now, it just hasn’t been implemented anywhere yet. There are some Javascript polyfills that can make it work as specced.
  • A Javascript poyfill adds support. It fills in the cracks.
  • Gradients are usable but there are very different ways of marking them up in Gecko and Webkit. Neither of these was great so the CSS working group came up with yet another syntax. They currently recommend not using gradients until things settle down.
  • Border-image lets you set an image to define sprites used across the various parts of a border. Supported in a number of browsers, use it if you really need it.

Use Now

  • There are some things we can do now (supported in modern browsers). Transforms are an example: they are widely supported and often used for enhancement.
  • Transitions can also be used now. They are event driven (by user or Javascript) and also can be thought of as enhancements.
  • Border-radius and Web-fonts can also be used now.

Helping CSS Move Forward

  • You can help push forward new CSS specs.
  • Do science. Experiment to see what you can do using early versions of a spec. This is how we find really cool new effects and locate new bugs.
  • The working group has some public channels where they ask for feedback on specs: mailing list and css3info site.
  • You can also join the W3C as an organization or start-up. Start-ups have a reduced membership fee.
  • Blog: write about what you find, what you can’t do yet, what you want to do. Having conversations about this helps push the specs forward. Often times just documenting problems helps get things fixed. A use case and a specific example is usually most helpful.
  • These standards get built with the help of the community.