Comment styling with CSS3 and -webkit-transform

Here’s a quick little tip that might come in handy for someone. I’m working on the mobile version of a magazine’s site which will be targeting WebKit browsers. The design I’m implementing calls for a list of comments that alternates the display of the commenter’s name (and timestamp info) left and right. This can be done with a single image, use of the nth-child(even) CSS selector, and -webkit-transform: scaleX(-1). The fiddle here uses jQuery, but I’m using Zepto.js(mostly jQuery-compatible syntax in just a couple of kb) for the actual implementation.

Miscellaneous thoughts:
  • For bonus points, the comment arrow could be implemented with a small canvas to remove the need for an image at all.
  • AFAIK, there doesn’t seem to be an agreed upon microformat for comments.
The embedded widget is pretty small here, so please check out the full screen version here.

Clicky