Last month, the World Wide Web Consortium (W3C) declared HTML5 is officially "feature complete." I decided it was finally time to make the switch from HTML4.01. While reading about all the new tags, I was excited about some tags and confused about the usefulness of others (like repurposing the previously deprecated <u> for "misspelt words"). I quickly dove in to compatibility charts and performed some of my own testing. One of my greater disappointments was the lack of browser support for the <details> tag.
I set out to find a work around that would enable proper functioning of details and summary, that is, to enable it's open/close interactivity. What I found was an effective solution in jquery-details by Mathias Bynens. Unfortunately, this solution depends on another library: jQuery. jQuery is an excellent library which I use in some of my projects, but not all. Since some of my projects do not use jQuery, it seemed unnecessary to include a library as comprehensive as jQuery for the benefit of one simple work-around. So I wrote my own.
At the time of this writing, only Chrome and Safari support details and summary tags. In order to get them working in Firefox and Internet Explorer I wrote a pure javascript (no dependencies) work-around: details-shim. This shim can be dropped in anywhere in a page to enable details interactivity in unsupportive browsers (currently Firefox and Internet Explorer), but does not interfere with supportive browsers (Chrome and Safari).
Below are two details/summary pairs, one should start in the open position, the other closed.
To ensure your details work the same across all browsers, specify open details as <details open="open"> and closed details as <details> only. Using <details open> or <details open=""> will not behave consistently between all browsers.
This work-around has been tested to work in the current version of Firefox on Windows, Mac OS, and Linux, as well as Internet Explorer 9. To enable support for Internet Explorer 8, the addition of a HTML5 shim, like html5shiv, is required.
The CSS rules that add the open/closed wedge indicators use unicode characters that don't render in Internet Explorer. This could be worked around with use of replacement characters or images applied with conditional comments.
To use details-shim, add details-shim.min.js and details-shim.min.css to your website and reference them as such:
<script type="text/javascript" src="/details-shim/details-shim.min.js"></script>
<link rel="stylesheet" type="text/css" href="/details-shim/details-shim.min.css">
details-shim() will run on window load, so it doesn't matter where you include it, but within the document head is where I do. Once it runs, it will enumerate all the details/summary pairs in your document, detect whether the browser supports their interactivity, and apply the work-around if it does not.