An Event Apart: The (CSS) Future is Now

by Luke Wroblewski August 27, 2012

In his The Future is Now talk at An Event Apart in Chicago, IL 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) like Media Queries version 3.
  • 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.
  • 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, 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 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.

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.
  • 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.
  • The spec says you can flex anything but in practice you need to use display attributes.
  • 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.
  • Supports is a CSS specification that applies styles only if a CSS property is supported by a browser. But can we trust browsers to be honest about what they support?

Helping CSS Move Forward

  • 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.
  • 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.