Thursday, May 12, 2011

HTML5 Dialog Element Styling For Pleasure and Profit

Recently I had a great opportunity to work on a small part of a Lync Powered Expert Question Answer Service.  My portion of the code was a simple one page HTML popup that allowed a person to chat with an expert.
One of the cool things I found out about during the project was the HTML5 Dialog Element
The dialog element represents a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.
Nifty, eh?  I use jquery to insert the root dialog element, then whenever a message is sent or received I inject the dt and dd elements.  Here is an example of what the conversation looks like in HTML

By default, the browser will display this like this:
Now that's kinda lame, I want it to look like a real chat screen (with some slick Metro UI Styling), so I added some CSS (take a look at the JSSFiddle CSS Tab for my styles) to hide the dt element and give it a nice blue bubble look.  I even added some nice CSS triangles into the mix for some minor speaker perspective.
I've put up a fully coded example with a boring chat bot over at jsFiddle for you to enjoy and mess around with.