Intent to prototype and ship: improvements to <details> styling, including support for ::details-content pseudo element

[Daniel Holbert]

[sorry, sending a bit belatedly]

Last Monday 8/11, I turned on support for some improvements to the styling of <details> elements, including the ::details-content pseudo-element, in the next day's Firefox Nightly 143. These changes are configured to ride the trains to release, as part of the Firefox 143 release in mid-September.  Other browsers have previously shipped support for this set of improvements (as noted below).

Thanks to Luke Warlow of Igalia for taking on this feature, and to Keith Cirkel for his help with some final bits, and also to Emilio Cobos Álvarez for some supporting work!

Bug to turn on by default: https://bugzilla.mozilla.org/show_bug.cgi?id=1941406 

Standard: https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo

I didn't find an intent-to-prototype (in part because this was a small feature, following spec changes to evolve an existing feature); so I'm adding the info below that would've been in an intent-to-prototype.

Summary: The ::details-content pseudo-element targets the additional information in a <details> element that can be expanded or collapsed (as distinguished from the <summary> child element). Previously there was no such element, so any child/children would have to be styled individually.  Additionally: the <details> element itself used to be forced to `display:block`, but now we'll allow its `display` property to be set to any value, per the updated spec.

Bugs:

  Implemented in https://bugzilla.mozilla.org/show_bug.cgi?id=1901037 (and dependencies)

  Enabled by default in https://bugzilla.mozilla.org/show_bug.cgi?id=1941406

Specification:

  https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo

  https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements

Standards Body: CSSWG, WHATWG

Platform coverage: All

Preferences:

  'layout.css.details-content.enabled' (set to "true" for the new behavior)

  'layout.details.force-block-layout' (set to "false" for the new behavior)

DevTools bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1983720

Link to standards-positions discussion: https://github.com/mozilla/standards-positions/issues/1027

Other Browsers:

* Blink: Shipped since v131

* WebKit: Shipped since v18.4

(based on MDN compat data )

web-platform-tests: https://wpt.fyi/results/html/rendering/the-details-element?label=master&label=experimental&aligned&q=details-pseudo-elements

[Nicolas Chevobbe]

Thanks Daniel. Note that we have a META bug for DevTools support: https://bugzilla.mozilla.org/show_bug.cgi?id=1955190 

[Daniel Holbert]

Thanks, Nicolas!  I missed that we already had that metabug (and that we've already added some devtools support).