An Event Apart: The (CSS) Future is Now

by Luke Wroblewski November 12, 2012

In his The Future is Now talk at An Event Apart in San Francisco, CA 2012 Eric Meyer talked about some of the effects we can achieve with CSS today and what might be coming in the CSS specification tomorrow. Here's my notes from his talk:

  • CSS specifications are changing so fast today, it's impossible to know exactly where we'll end up in the future. There are many CSS modules in working draft specifications and some are now recommendations (not changing).
  • Browser support keeps changing quickly. You used to be able to check every 18 months, now it is like 18 days.
  • All media query referenced stylesheets get downloaded by modern browsers regardless of browser capabilities (window size, etc.). Browsers need to get better at client side rendering.
  • Images are another area that needs improvement. Standards work on picture and srcset is ongoing to provide more dynamic image solutions. Browser vendors are also exploring server-side solutions.
  • Until then, you can use font-family specifications and icon fonts to get vector art for line art in the browser. Make sure you use icon fonts that don't map to a-z characters so if the font doesn't download, you don't get odd text on your page. Iconic and symbolset are two icon fonts that are developed well. They are semantic symbol fonts that use the right visual symbols for the right unicode symbols.
  • Box-shadows can be inset inside a border to create a beveled look. With comma separated values you can create a bevel and drop shadow together. Shadow effects can create highlights and glows, too. Interior white shadows can be used as a highlight. No-offset shadows creates a glow.
  • If you are using ems with a default font size of 16pt, you can set shadows to 0.0625em to map to about 1px/pt.

Gradients

  • Gradients are currently vendor-prefixed but browsers are now converging on a common way of styling them.
  • Percentages can be used to create a set of color stops within a linear gradient. These are not relative to each other they are relative to the whole.
  • You can create hard stops between two colors in a gradient in addition to fades.
  • Adding background-position when you declare gradients in background means you can place a gradient stripe or multiple stripes anywhere you like in the background.
  • When you have multiple background images (or gradients), the first ones are closest to front. The furthest ones are behind. This is the opposite of how CSS specifications work, where last specification overrides all previous ones.
  • Linear gradients move from one color to another at a degree. For example, 90 degrees is vertical.
  • Gradients are moving from the way current way angles work (math angles) to compass angles. This is the same way animations work in CSS. Likely this will happen when pre-fixes are removed. There is an easy way to convert between these two system: 90-x.
  • During the transition period, you can use pre-fixed gradients with math angles and un-prefixed gradients in compass angles.
  • English keywords in the new standard tell browsers where you are going. "To top" instead of where coming from in the previous standard: "bottom".
  • Radial gradients are more complex and can crash browsers. Use carefully.
  • When using repeating-linear-gradients browsers are really bad at rounding. Be careful using repeating-linear gradients until bugs get fixed. Instead consider using an image, which still works really well.
  • Gradients are actually creating images behind the scenes. You’re just specifying them with text. As a result, you can mix images with gradient effects.
  • You can animate between animations to create visual effects.

Additional Tips

  • WebKit and Firefox are un-prefixing animations, transitions, transforms, and animations. At this time next year, you might no longer need pre-fixes for these elements. People with older browsers might not see these effects but since most of them are enhancements, that's ok.
  • Text-shadow is an un-prefixed property in all browsers now.
  • Border-radius no longer requires vendor-prefixes.
  • Corner rounding with border radius increases until it hits a point where the element is rounded. So you can set this to a large value.
  • Flexible boxes allow you to use table layout without tables and to move elements around on pages. The flex-box specification has been re-written and uses a new system of syntax, values, etc. It is now a candidate recommendation in CSS.
  • Grid layout allows you to define grid lines in CSS that you can hang flexible or fixed elements off. Internet Explorer 10 has implemented the Grid layout specification. Support is starting to come to other browsers.
  • Grid layout is the Web layout system we've always wanted. While there's an implementation in IE10 but the specification could still change.
  • CSS Exclusions allows you to define shapes along which text will flow in a layout. Webkit nightlies now support this.
  • You can change the z order of exclusions to drastically adjust layout.
  • Supports is a CSS specification that applies styles only if a CSS property is supported by a browser. This is a replacement for CSS prefixes which are likely to go away. But can we trust browsers to be honest about what they support?

Helping CSS Move Forward

  • 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.
  • Ask questions on services like StackOverflow and get discussions going. 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.
  • 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.
  • These standards get built with the help of the community.