If you haven’t seen Facebook’s “chat head” interface, here is the quick lowdown. They 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’m not sure if the non-Home Android app has them yet. Anyway, I think this will be one of those UI things you either love or hate.
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. In fact if you look at the HTML, there is no extra code for style, it is done entirely in CSS.
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 n-th 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. Again, notice the minimal HTML.
That’s all been pretty straight forward, 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 rendered 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 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? Cause each of those circles carve a giant square out of the text. And that’s kinda lame because they’re circles. And it makes the choice to hover over the content below, instead of floating, more attractive.
However, 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 [Open 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”. Now that looks awesome, and I’d definitely prefer that to obscuring the content below. And CSS wise, it was one of the ligher hacks I had to do. 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.
This has been tested in the latest Chrome, Firefox, and Safari versions. Everything seems to work cross browser except the features that only work in Canary. I haven’t tested in IE yet.
