Looking at summary details in HTML5

On the dev-platform mailing-list, Ting-Yu Lin has sent an Intent to Ship: HTML5 <details> and <summary> tags. So what about it?

HTML 5.1 specification describes details as:

The details element represents a disclosure widget from which the user can obtain additional information or controls.

which is not that clear, luckily enough the specification has some examples. I put one on codepen (you need Firefox Nightly at this time or Chrome/Opera or Safari dev edition to see it). At least the rendering seems to be pretty much the same.

But as usual evil is in the details (pun not intended at first). In case, the developer would want to hide the triangle, the possibilities are for now not interoperable. Think here possible Web compatibility issues. I created another codepen for testing the different scenarios.

In Blink/WebKit world:

summary::-webkit-details-marker { display: none; }

In Gecko world:

summary::-moz-list-bullet { list-style-type: none;  }

summary { display: block; }

These work, though the summary {display: block;} is a call for catastrophes.

Then on the thread there was the proposal of

summary { list-style-type: none; }

which is indeed working for hiding the arrow, but doesn't do anything whatsoever in Blink and WebKit. So it's not really a reliable solution from a Web compatibility point of view.

Then usually I like to look at what people do on GitHub for their projects. So these are a collection of things on the usage of -webkit-details-marker:

details summary::-webkit-details-marker { display:none; }

/* to change the pointer on hover */
details summary { cursor: pointer; }

/* to style the arrow widget on opening and closing */
details[open] summary::-webkit-details-marker {
  color: #00F;
  background: #0FF;}

/* to replace the marker with an image */
details summary::-webkit-details-marker:after {
  content: icon('file.png');

/* using content this time for a unicode character */
summary::-webkit-details-marker {display: none; }
details summary::before { content:"►"; }
details[open] summary::before { content:"▼" }

JavaScript

On JavaScript side, it seems there is a popular shim used by a lot of people: details.js

JavaScript

More reading