Have you ever had an idea for something that you think would make the Web better? A new feature in CSS Perhaps? Lots of people do. The W3C has an open process and for the average Jane (or Joe) the first step is posting it to the official W3C list – in the case of CSS that is www-style. A lot of ideas are shot down pretty quickly and that’s that. Things that do eventually get picked up quite often take a long time to get through any kind of process and become something usable. This past week, we got something new added to the official W3C candidates for consideration in Selectors Level 5 – and the whole process took only a couple of weeks. What’s more – we have an implementation too : I’ve posted a silly, but followable demo/example..
A Case Study…
A few weeks ago, a first time poster to the www-style list named Julien Dorra sent in an idea for how we might use CSS to sync the appearance of HTML based subtitles using a new microformat he is developing called MetaFragments (note, that is the original inspiration, not the final proposal) that came out of his participation in the Mozilla No-JS Dev Derby. The immediate response wasn’t overwhelmingly positive – there are already technologies and proposals for how we do subtitles, but there was a little constructive criticism and conversation.
I began an offline discussion with Julien proposing that perhaps Hitch could help him out. If he would be willing to write the draft, I would develop a Hitch for him. I explained the concept – writing a draft forces you to really think about it. Having an implementation lets people play with it and see what they might really do with it. With a little iteration, the idea tends to either get much better or prove to be problematic. Another upshot is that not everyone needs to find it as useful as you do with Hitch – if it solves your problems well – good for you.
Julien was immediately responsive and started up a Google Doc explainer and draft and very quickly (within an evening or two) we solidified an API and had an implementation. Suddenly lots of interesting ideas and use-cases came out of it… Think of all of the rich things you could do with the ability to sync media with simple DOM/CSS that other (more complicated) solutions do not easily provide:
- Multi-media slide shows
- Provide optional commentary on media – in sync
- Show reference/related links based on the content – in sync
- Apply superimposed images or filter effects on video itself – in sync
- Show related images, charts, graphs – in sync
- Provide UI to allow users to skip a video after N seconds of play
- Show or change the UI at the end of a video
Really, when you get down to it – there are a lot of possibilities! With some renewed confidence and new examples he posted additional use cases, was able to respond to “we already do this” kinds of objections, etc. pointing to a document and having a working implementation in his pocket that he could use now and share with others. Very quickly it turned around and actually expanded and further improved by Tab Atkins (W3C member and author of several important drafts): Instead of just “media” elements – why not make it for anything with the concept of a timeline? Shouldn’t be a problem – and we can just call it :time(). Additional interesting discussion ensued…
A week later, W3C added a wiki page for things being considered for inclusion and the first new thing added (there are carry overs from Level 4) was :time()
Now – how cool is that?
This is a win for both Hitch and CSS at large…
I discussed this later with Julien and he said that without Hitch, this idea would likely have just died off like so many others. That same week, Adobe put forward their own pseudo-element proposal and, in manner similar to Hitch, they created a scripted implementation/shim and provided a working draft so that people can try it out. Since then, we’ve discussed with some of the guys responsible for that the possibility of growing tools (like Hitch) and common code to help this kind of approach be used more – it has the possibility to streamline the processes, give people something that works now, upgrades easily and is truly future proof.