The Drill-Down Menu With Details and “@ scope”, by @preethisam.bsky.social (@frontendmasters.com):

https://frontendmasters.com/blog/the-drill-down-menu-with-details-and-scope/

#disclosurewidgets #css

The Drill-Down Menu with Details and @scope – Frontend Masters Blog

Even if you nest details elements, you can ensure only one level of them is open at a time, making a menu you can drill down (and up!) from.

Accessible inline collapsible

How to offer depth to a text without linking elsewhere.

Erik Kroes - Accessibility Consultant
For the Love of <details> - HTMHell

A collection of bad practices in HTML, copied from real websites.

For the Love of <details> - HTMHell

Should We Even Have “:closed”?, by @sunkanmifafowora.bsky.social (@csstricks):

https://css-tricks.com/should-we-even-have-closed/

#css #selectors #disclosurewidgets

Should We Even Have :closed? | CSS-Tricks

Is there really a difference between using :not(:open) and :closed? As always, it depends. Sunkanmi Fafowora explains why :closed is currently not a thing.

CSS-Tricks

“::details-content”: Style Expandable Content Without Wrapper Divs, by @trevorlasn.bsky.social:

https://www.trevorlasn.com/blog/details-content-pseudo-element

#disclosurewidgets #css #html

::details-content: style expandable content without wrapp...

The ::details-content pseudo-element lets you style the expandable content of details elements separately from the summary, no divs needed.

trevorlasn.com

Do you think, too, that disclosure widgets (`details` element) need stronger signaling they’re clickable?

Adding `summary { cursor: pointer; }` already makes for better affordance, but I wonder, would there be interest (and what’s the path) to include this in user agent styles?

#html #disclosurewidgets #affordance

Rethinking Cookie Dialogs

If you are anything like me, you don’t want your data sold to third parties. You probably run ad blockers. Maybe a VPN. Some governments are trying to help by requiring the site to declare wh…

Nat Tarnoff

Let’s Play Accordion With the HTML “details” Element, by @alex86:

https://www.oidaisdes.org/lets-play-accordion.en/

#html #disclosurewidgets #accordions

Let's Play Accordion with the HTML details element

An in-depth look at the new capabilities of the native disclosure element.