Jacob Gable: HTML5 Dialog Element Styling For Pleasure and Profit

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

	<dialog>
	<dt class="chatTitle">Me</dt>
	<dd class="chatMsg">
	<p>yo</p>
	<span>1:39 PM</span>
	<div class="arrow"></div>
	<div class="arrow arrowOver"></div>
	</dd>
	<dt class="chatTitle reply">Expert</dt>
	<dd class="chatMsg reply">
	<p>What's up dude?</p>
	<span>1:40 PM</span>
	<div class="arrow"></div>
	<div class="arrow arrowOver"></div>
	</dd>
	<dt class="chatTitle">Me</dt>
	<dd class="chatMsg">
	<p>chillin chillin...</p>
	<span>1:40 PM</span>
	<div class="arrow"></div>
	<div class="arrow arrowOver"></div>
	</dd>
	<dt class="chatTitle reply">Expert</dt>
	<dd class="chatMsg reply">
	<p>For realz?</p>
	<span>1:40 PM</span>
	<div class="arrow"></div>
	<div class="arrow arrowOver"></div>
	</dd>
	<dt class="chatTitle">Me</dt>
	<dd class="chatMsg">
	<p>nah, for fakez</p>
	<span>1:40 PM</span>
	<div class="arrow"></div>
	<div class="arrow arrowOver"></div>
	</dd>
	</dialog>

view raw dialogSnip.htm hosted with ❤ by GitHub

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.