HTML5 details element: equally great and disappointing

I love making websites that work without JS. That's why I also love all web standards that make it easier.

HTML5 <details> element promises to make collapsible blocks and tree views first class entities in web pages. All in all it feels like a great success—with a few frustrating shortcomings when it comes to styling.

Compatibility and graceful degradation

It works in every browser released in 2017 and later.

Since web browsers simply ignore unknown elements, it also degrades gracefully: the content of <details> is just shown by default.

Styling

One issue is that people who aren't well-familiar with this element often don't realize that the element is clickable and that the triangle is a part of the "button".

It's not surprising, since that element breaks the desktop convention. You can alleviate it with a bit of CSS though.

summary { cursor: pointer; }

However, I'm still surprised why it's not the default.

Styling the button itself

What's more surprising is that there's no easy, or even standard way to style the "expand" button itself.

This feels especially weird. If HTML form elements can be styled in arbitrary ways, why should <summary> be an exception?

In any case, the standard doesn't define that, and different browsers do it differently.

In Firefox, you can easily style the button with list-style-type or list-style-image properties. Sadly, this only works in Firefox.

In Chrome and Edge you can only disable that button with this pseudo-element rule:

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

Then you can insert a symbol or an image with a ::before selector.

So, the only somewhat cross-browser way is to disable its display with list-style-type: none (for Firefox) and with above rule for Chrome, then insert your own "button" one way or another.

Still even that won't work in Opera and Safari.

Accessibility

That's the frequently overlooked part! There are some impressive hacks that emulate collapsible elements with heavily-styled radio buttons and CSS, but it's a nightmare for screen reader users because the semantics of it all are opaque.

With <details> and <summary>, user agents know what it is and can present it in an appropriate way in each medium.