HTML5 Quick Feature: Summary and Details
Last week, the WebKit team added support for the HTML5
summary elements. This might leave some of you wondering: “ok, but what are the
Fair enough. Unlike the sexy
section, or the utilitarian new input types, there are quite a few new features in HTML5 that most developers are unaware of. So let’s take a look at the latest of these to attain some—very modest—level of browser support:
Take this example, from the WordPress post editing page:
WordPress uses a series of divs to pull this off:
<div id="commentstatusdiv"> <div title="Click to toggle"><br></div><h3><span>Discussion</span></h3> <div> <input type="hidden" value="1" name="advanced_view"> <p> <label for="comment_status"><input type="checkbox" checked="checked" value="open" id="comment_status" name="comment_status"> Allow comments.</label><br> <label for="ping_status"><input type="checkbox" value="open" id="ping_status" name="ping_status"> Allow trackbacks and pingbacks on this page.</label> </p> </div> </div> <div id="authordiv"> <div title="Click to toggle"><br></div><h3><span>Author</span></h3> <div> <label for="post_author_override">Author</label> <select id="post_author_override" name="post_author_override"> <option>Aaron Boodman</option> ... <option>Zak Ruvalcaba</option> </select></div> </div>
Of course, there’s nothing really wrong with this markup. It may not be super-semantic, but each section is clearly delineated with a heading, so it’s plenty usable and accessible.
What HTML5 Brings to the Table
The HTML5 specification has added a set of elements for exactly this purpose:
From the spec:
The details element represents a disclosure widget from which the user can obtain additional information or controls.
The first summary element child of the element, if any, represents the summary or legend of the details. If there is no child summary element, the user agent should provide its own legend (e.g. “Details”).
So, in HTML5, the above example could be rewritten as follows:
<details> <summary>Discussion</summary> <p> <label for="comment_status"><input type="checkbox" checked="checked" value="open" id="comment_status" name="comment_status"> Allow comments.</label><br> <label for="ping_status"><input type="checkbox" value="open" id="ping_status" name="ping_status"> Allow trackbacks and pingbacks on this page.</label> </p> </details> <details> <summary>Author</summary> <p> <label for="post_author_override">Author</label> <select id="post_author_override" name="post_author_override"> <option>Aaron Boodman</option> … <option>Zak Ruvalcaba</option> </select> </p> </details>
Given this markup, the browser should display only the words “Discussion” and “Author.” When either of those terms is clicked on, the relevant summary should open up and reveal itself.
The summary element has an
open attribute used to indicate that the summary is “open,” or expanded. It’s a Boolean attribute, so you can use it like
<summary open> or, if you’re wedded to XHTML-style syntax,
<summary open="open">. For the above example, if you wanted both boxes to be open by default (as they are in the WordPress interface), you’d just need to add this attribute to both
As I mentioned at the top, currently only the SVN trunk of WebKit has support for this element. Other browsers will display all the content, irrespective of the
open attribute, and don’t allow you to toggle visibility of the details by clicking on the summary.
If only the bleeding-edge SVN version of one rendering engine supports this element, why would anyone want to use it?
For one, support for HTML5 and CSS3 features is being added extremely quickly to most browsers. Once this moves from WebKit into Chrome, Mozilla and Opera won’t be far behind. So benefits will begin to appear soon enough.
Mathias Bynens has a quick jQuery script to detect support for details, and add support to older browsers. Check out the blog post describing his solution, as well as the accompanying demo. It’s win-win: you provide the functionality to everyone, make things a little better for ultra-modern browsers by relying on faster and more standard native functionality, and avoid cluttering your markup with stuff like
Were you already familiar with details and summary, or is this the first you’ve heard of them? Will you be testing them on your sites with Mathias’s polyfilly? Or will you stick to divs for the moment? Let me know in the comments.