If you haven’t seen Facebook’s “chat head” interface, here is the quick lowdown. There are little circular icons that will float on the side of your mobile device’s screen to tell you that a message has arrived from a friend. It’s part of the Facebook Home thing, but even if you are on iOS, the Facebook App uses them. I think this will be one of those UI things you either love or hate.
However, from an HTML angle, I thought they were interesting. Could you do this interface in HTML/CSS? The answer is yes, and it is quite easy. Just some borders, border-padding and negative margin.
That was relatively simple, but it gets more complex when you have a multi-person conversation. Facebook takes the most recent person in the thread and makes them take up half of the “chat head.” Then come the next two, taking up a quarter each. Then the rest are hidden.
Okay, so I need to pull out of nth child magic to selectively style the first 3 items in a collection of images. Set overflow to hidden, play with some more border radii and BOOM, “chat heads” done.
Okay, so that’s all been pretty straightforward, so I’d like them to be interactive. If I click on a multi-member conversation “chat head” I’d like it to expand out the rest of the members. This is very easy. Just a little JavaScript and some class swapping.
So done, Facebook native interface done in CSS/HTML. But I think we can do better. One of my issues about this interface and one that would prevent me from using it in a web based application is that it obscures the content beneath it, it just hangs out covering up anything unfortunate enough to be below it. For me, if I was using it I would want it to float instead of absolutely position. So I can do a few tweaks to make that happen.
Now in my demonstration, I pulled the text to be right aligned instead of left aligned, to show the float edge better. But I’m still not happy with it. Why? Because each of those circles carve a giant square out of the text. And that’s kinda lame because they’re circles. A few weeks ago a colleague of mine at Adobe, Bem Jones-Bey wrote an article about using shaped exclusions from the CSS Shapes and Exclusion spec. It seemed like a perfect fit. So if you have Chrome Canary installed, and the experimental features turned on, you get a much different result:
Demo [View in Canary]
The secret sauce here being the -webkit-shape-outside property. It basically allows me to exclude a circle from the underlying text around each of the “chat heads”. To find out more about using shape-outside, be sure to check out Bem’s article. It’s just one of the ways that the browser is becoming more capable of rendering a greater number of visual layouts and effects.
