Lab: CSS Infograph

When John Gruber linked to a New York Times Infograph about spending statistics around the world, I immediately thought “this could be done with just HTML and CSS.” Shortly thereafter I set out to undertake the experiment of recreating those fancy-looking infographs with nothing more than HTML and CSS (and a WebKit browser, admittedly). Not a single line of JavaScript is used.

Rather than painstakingly mimicking the entire infograph in detail, with all the listed countries and exact positions, I replicated the look, feel and functionality of the infograph in a simplified version—and using absolute bogus statistics. In fact, I’m purposefully not even using units.

Anyway, here it is: the CSS Infograph.

Details of the experiment

Before anything else is said, I should stress that it only works 100% as intended in Safari 3.1 (Windows or Mac). It also works in WebKit nightlies, but several of the nightlies of the past week have a fatal bug in them that causes Webkit to crash on this experiment, so be advised if you’re running a WebKit nightly from anytime between the 15th and the 22nd of September. Also worth noting: since Internet Explorer still doesn’t support the :target selector, the whole thing doesn’t do anything in that browser.

So what does the CSS Infograph do differently from the NYTimes’ Flash version? First off, it uses CSS Transitions for the animations, which is the key factor in not having to use any JavaScript as well as why it only works in Safari 3.1 & WebKit nightlies. Second, it uses the undervalued :target selector to put the selected list of “statistics” at the top of the view index. Lastly, it hooks into semantic markup underneath (this could have been done dynamically with JavaScript) that’s perfectly accessible to screen readers and search engines without a single shred of dedicated effort.

The biggest problem I had to overcome was the fact that, visually, there’s only four elements that animate around, but in reality, I’m showing 16 elements. In order to make them transition seamlessly from one into the other, I ended up positioning all 16 elements according to the four visible positions, for each of the four states. The 12 elements not shown are set to a very low opacity, and only the needed elements become opaque while the previously shown set transitions into transparency again. This solution works just fine, although it did highlight some tiny performance issues in WebKit’s animation engine. Minutiae, really, but noticeable to the keen observer.

An annoying but inevitable consequence of doing this without JavaScript is that the :target selector prevents me from changing the not-targeted elements around as desired. Since this is merely an experiment in CSS, I’m okay with it.

Here is a screencast of the CSS infograph in action in Safari 3.1, in all its glory:


I’ve also put up a set of screenshots of the CSS Infograph on my Flickr, showing its rendering in other browsers. Of particular interest is Google Chrome‘s rendering of it; Chrome supports CSS Transitions as the only non-Safari (but still Webkit) public release browser, but because their graphics engine is still in relatively early stages of developments, the final result in Chrome is, well, abysmal.

If you liked this, you should follow me on Twitter!