An Event Apart Notes: Eric Meyer, The Future of CSS

Cormorant trained to fish for the fishermen. The fishermen tie bands around the birds necks that are. Fishermen fish at night, using lamps they attract bugs, which attract fish, and the cormorant get to fish but cant swallow them and the fishermen take the fish.

Browser vendors are promising us new CSS tools, but don’t actually let us use them. It’s a big tease! Cormorinths are either fish in the hand, diving for fish or still sitting on the shore. A lot of really cool stuff we’ve just been teased with and told we can’t quite use yet.

(SASS and LESS will any and all prefixes.)

  • Transforms: Go for them right now! Widely supported and mainly just for decorations.
  • Transitions: Go for them now! Basically event driven, if the browser doesn’t support them they don’t work and no one needs to know. No reason not to use this stuff, it’s decoration.
  • Animations: These have some issues still. Animations are constant, and the problem is only webkit supported them until recently but then the working group took it went back to the drawing board. Still in production.
  • Multicolumn: Not fully supported yet. Some browsers support the main idea, but none of the details like gutters.
  • Grid Layout: Hang elements off of specified grid lines for layout. Only supported by IE10, but not bug free…
  • Exclusions: define an area that content will flow around. Not locked to rectangular objects (can use alpha channels or svg shapes to define areas).
  • Regions: Define text-flow from one area to another. Requires document structures we are not used to, using empty structure for the browser to implement.
  • Combinations: Using all or any of these elements together.
  • Flexible Boxes: If you have a use case, then go for it. But they are going to be changing the spec for it. It will be a different spec though, so it shouldn’t break.
  • Scoped CSS: using a style but limiting it’s scope to the parent element that imports it.
  • Calc: Really nice, but for now rely on preprocessors. Drawback is that it’s only on first render, if element is updated via scripting
  • Masks, text-stroke, box-reflection: webkit only! And not looking like they will spread.
  • Paged Media:
  • Hyphenation: use now with a good polyfill. (Polyfill – spackeling paste to fill in cracks and crevices – nothing to do with polygons and fills)
  • Gradients: Borderline shore and dive… Really cool, webkit and gecko have totally different syntaxes (to the degree of english and chinese), fun to look at, but a torture to declare. Calling it now, gradients will be web 3.0, rounded-corders was 2.0
  • Border Image: border is defined by slicing an image into sprites and applying it to the border (and even background image). It is supported in a number of browsers though, so use it but don’t depend absolutely on it.
  • Border-radius: fish! Use now and go crazy with it.
  • Web fonts: use it now, but use it wisely (refer to Jake’s talk).

But what can we do about it? Can we prod the working group to move things along.

First thing to do is experiment with the properties! You spread the cool effects, second you find crazy unexpected bugs. Use html5please.us as a guide (even though he disarees with some of their points and they talk about css3, js and stuff as if it is html5). Browsersupport.net documents which browsers and versions of those browsers support css3 properties. CSS3.info (subscribe to the rss to be kept in the loop, as well as the css3 working group). Even subscribe to the [email protected] emails list (and f you’re like me, I know I am, set up a filter and archive it and then poke into it when you have some time. Take it even further and join the w3c with a reduced membership fee for startups (advantage is that you can send a representative to the working group). Also, blog about it! Document what you discover, write it up and publish it, tell others what you’ve written maybe even in the mailing list. CSS samurai documented top 10 failings in each browser and each one got fixed eventually.

We didn’t get here all at once, it’s been here a little there a little. But we are progressing and eventually will get somewhere good. Every day, week and month more support is coming.