My interest in and disappointment about HTML5's new <details> element

October 1, 2019

Because I checked out from paying attention to HTML's evolution years ago, it took me until very recently to hear about the new <details> element from HTML5. Put simply and bluntly, it's the first new HTML element I've heard of that actually sounds interesting to me. The reason for this is straightforward; it solves a problem that previously might have taken Javascript or at least complex CSS, namely the general issue of having some optional information on a web page that you can reveal or hide.

(That's the surface reason. The deeper reason is that it's the only new HTML5 tag that I've heard of that has actual browser UI behavior associated with it, instead of just semantic meaning.)

Now that I've heard of it, I've started to notice people using it (and I've also started to assume that if I click on the browser UI associated with it, something will actually happen; unfortunately Firefox's current rendering doesn't make it obvious). And when I look around, there are all sorts of things that I might use <details> for, both here on Wandering Thoughts and elsewhere, because optional or additional information is everywhere if you look for it.

(Here on Wandering Thoughts, one form of 'optional' information is comments on blog entries. Currently these live behind a link that you have to click and that loads a separate page, but <details> would let them be inline in the page and revealed more readily. Of course there are various sorts of tradeoffs on that.)

I was all set to make this a very enthusiastic entry, but then I actually looked at the the browser compatibility matrix from MDN and discovered that there is a little problem; <details> is not currently supported in Microsoft Edge (or IE). Edge may not be as popular as it used to be, but I'm not interested in cutting off its users from any of my content (and we can't do that at work). This can be fixed with a Javascript polyfill, but that would require adding Javascript and I'm not that interested.

Given that Edge doesn't support it yet and that IE is out there, it will probably be years before I can assume that <details> just works. Since the 'just works' bit is what makes it attractive to me, I sadly don't think I'm going to be using it any time soon. Oh well.

(HTML5 has also added a number of important input types; I consider these separate from new elements, partly because I had already somewhat heard about them.)


Comments on this page:

Edge will be chrome-based very soon and the non-chrome edge will be aggressively upgraded away

By sam at 2019-10-03 03:25:50:

I object to describing <details> as 'new': it's been in the standard for literally years, since ~2010. (Also not new: browser vendors dragging their feet.)

Isn't the graceful degradation story pretty good here? Obviously that'll mean a worse experience for older browsers (both relative to browsers that are less than several years behind in web standards support and relative to the baseline alternative of not using <details>), but it's not like it'll be unusable.

Specifically Edge 76 will support it:

This is the Chromium-based browser, and it is set to be released to the public in Q3 2019; it was released in Beta in August.

Written on 01 October 2019.
« Using alerts as tests that guard against future errors
It's useful to record changes that you tried and failed to do »

Page tools: View Source, View Normal, Add Comment.
Search:
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Tue Oct 1 23:24:06 2019
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.