Tags: summary



Saturday, April 15th, 2023

Progressive disclosure with HTML

Robin penned a little love letter to the details element. I agree. It is a joyous piece of declarative power.

That said, don’t go overboard with it. It’s not a drop-in replacement for more complex widgets. But it is a handy encapsulation of straightforward progressive disclosure.

Just last week I added a couple of more details elements to The Session …kind of. There’s a bit of server-side conditional logic involved to determine whether details is the right element.

When you’re looking at a tune, one of the pieces of information you see is how many recordings there of that tune. Now if there are a lot of recordings, then there’s some additional information about which other tunes this one gets recorded with. That information is extra. Mere details, if you will.

You can see it in action on this tune listing. Thanks to the details element, the extra information is available to those who want it, but by default that information is tucked away—very handy for not clogging up that part of the page.

<summary>There are 181 recordings of this tune.</summary>
This tune has been recorded together with

Likewise, each tune page includes any aliases for the tune (in Irish music, the same tune can have many different titles—and the same title can be attached to many different tunes). If a tune has just a handful of aliases, they’re displayed in situ. But once you start listing out more than twenty names, it gets overwhelming.

The details element rides to the rescue once again.

Compare the tune I mentioned above, which only has a few aliases, to another tune that is known by many names.

Again, the main gist is immediately available to everyone—how many aliases are there? But if you want to go through them all, you can toggle that details element open.

You can effectively think of the summary element as the TL;DR of HTML.

<summary>There are 31 other names for this tune.</summary>
<p>Also known as…</p>

There’s another classic use of the details element: frequently asked questions. In the case of The Session, I’ve marked up the house rules and FAQs inside details elements, with the rule or question as the summary.

But there’s one house rule that’s most important (“Be civil”) so that details element gets an additional open attribute.

<details open>
<summary>Be civil</summary>
<p>Contributions should be constructive and polite, not mean-spirited or contributed with the intention of causing trouble.</p>

Tuesday, August 23rd, 2022

Nutshell: make expandable explanations

Nicky Case has made an implementation of Ted Nelson’s StretchText that works across different domains.

Friday, July 24th, 2020

Pausing a GIF with details/summary | CSS-Tricks

This is such a clever and useful technique! It’s HTML+CSS only, and it’s a far less annoying way to display animated GIFs.

(Does anybody even qualify the word GIF with the adjective “animated” anymore? Does anyone know that there used to be such a thing as non-animated GIFs and that they were everywhere?)

Friday, February 22nd, 2019

n-gate.com. we can’t both be right.

Hacker News is an echo chamber focusing on computer posturing and self-aggrandizement. It is run by Paul Graham’s investment fund and sociopath incubator, Y Combinator.

There’s never been any reason to visit Hacker News, but now you really don’t need to ever go there. This site posts a weekly roundup, complete with commentary that’s even more snarky than Hacker News.

Here’s a fairly typical summary of a fairly typical thread:

A programmer at a spamhouse is transported to a world where people are not judged by the color scheme of their Atom window, but by the character assessment and culture fit reports they write about potential new hires. Hackernews spends a lot of time discussing how to bullshit people like the author into hiring them. A few Hackernews struggle with the knowledge that there are people who contribute to business without involving Git. Furious debates about “title inflation” break out amongst people who type javascript into computers and straight-facedly refer to themselves as “engineers”.

Oh, and I love the “about” page.

Wednesday, March 28th, 2018

Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion | CSS-Tricks

Hells, yeah! Want to make an accordion widget? Use the details element as your starting point and progressively enhance from there.