Tags: details

14

sparkline

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.

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

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.

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

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>
</details>

Wednesday, January 4th, 2023

Tree views in CSS

Styling a list of nested details elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.

Tuesday, August 23rd, 2022

Nutshell: make expandable explanations

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

Thursday, February 10th, 2022

Add Responsive-Friendly Enhancements to `details` with `details-utils`—zachleat.com

This is how a web component should be designed! Zach has made a custom element that wraps around an existing HTML element, turbocharging its powers. That’s the way to think about web components—as a progressive enhancement.

Friday, September 3rd, 2021

Why William Gibson Is a Literary Genius | The Walrus

On the detail and world-building in 40 years of William Gibson’s work.

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?)

Thursday, June 25th, 2020

Cassie Evans’s Blog

Cassie’s redesign is gorgeous—so much attention to detail! (And performant too)

Friday, December 13th, 2019

Why `details` is Not an Accordion - daverupert.com

At the risk of being a broken record; HTML really needs <accordion> , <tabs>, <dialog>, <dropdown>, and <tooltip> elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements.

Hear, hear!

I wish browsers would prioritize accessibility improvements over things like main thread scheduling optimization to unblock tracking pixels and the Sisyphean task of competing with native.

If we really want to win, let’s make it easy for everyone to access the Web.

Saturday, February 23rd, 2019

github/details-menu-element

Now this is how you design a web component! A great example of progressive enhancement by Mu-An Chiou that’s used all over Github: a details element that gets turbo-charged into a details-menu.

There’s also a slidedeck explaining the whole thing.

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.

Wednesday, January 10th, 2018

Tiny Wins

Making low effort/high impact changes to interfaces.

This reminds me of something we talk about at Clearleft a lot called “tiny lessons”—it’s the idea that insights and learnings don’t always have to be big and groundbreaking; there’s a disproportionate value in sharing the small little things you learn along the way.

Little UI details from @steveschoger, in HTML and CSS

Suggestions for small interface tweaks.

Monday, April 26th, 2010

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

A good example of the correct way to approach new interactive elements in HTML5 (the details element in this case): test for native support and then emulate with JavaScript if required.

Saturday, May 14th, 2005

Niggle

I really like the layout of this blog about design details. Nary a dropped shadow and barely a gradient in sight.