Re: [csswg-drafts] improve styling of <details>/<summary> elements (#9879)

Based on the investigations we've done so far into styling of the `<details>` and `<summary>` elements, I can think of 6 separate technical pieces that are relevant to this issue (items 4 through 6 are relevant to animations of opening/closing the elements), in somewhat different states:

1. Allowing general use of `display` on both `<details>` and `<summary>`
   * covered by whatwg/html#9830; technically an HTML issue rather than a CSS one
   * [prototyped in Chromium](https://chromestatus.com/feature/5112013093339136) behind "Experimental Web platform features"
   * **Proposed resolution**: express support for changing HTML to allow `details` and `summary` to be more styleable
2. Specifying the styles that create the disclosure triangle.
   * as discussed in https://github.com/dbaron/details-styling these differ between Chromium & Gecko on one side, and WebKit on the other side
   * having the underlying styles be consistent between implementations would allow authors to style more easily, and may also help with the previous point since WebKit's restrictions on `summary { display: list-item }` may be motivated by people writing styles to the Gecko/Chromium model
   * **Proposed resolution**: Adopt the Gecko/Chromium styling model in which the `summary` is `display: list-item` and the disclosure triangle is its marker.
3. Add a pseudo-element for styling the anonymous container for all of the non-`summary` contents of a `details` element
   * I have currently prototyped this as `::details-content`, but I'm open to a different name.
   * [prototyped in Chromium](https://chromestatus.com/feature/5112013093339136) behind "Experimental Web platform features"
   * **Discussion topic**: One thing that is awkward about using it is that it defaults to `display: contents`, which means that using it for anything requires changing it to `display: block`
   * **Proposed resolution**: Adopt the `::details-content` pseudo-element.
4. The `transition-behavior` property
   * [part of css-transitions-2](https://drafts.csswg.org/css-transitions-2/#transition-behavior-property) (per [resolution](https://github.com/w3c/csswg-drafts/issues/8857#issuecomment-1581650809) and [resolution](https://github.com/w3c/csswg-drafts/issues/8857#issuecomment-1646035541))
   * [shipped in Chromium](https://chromestatus.com/feature/5071230636392448)
   * part of the `@starting-style` and `transition-behavior` focus area in [Interop 2024](https://wpt.fyi/interop-2024)
5. The `@starting-style` rule
   * [part of css-transitions-2](https://drafts.csswg.org/css-transitions-2/#defining-before-change-style) (per [resolution](https://github.com/w3c/csswg-drafts/issues/8174#issuecomment-1515026543) and [resolution](https://github.com/w3c/csswg-drafts/issues/8174#issuecomment-1561484749))
   * [shipped in Chromium](https://chromestatus.com/feature/4515377717968896)
   * part of the `@starting-style` and `transition-behavior` focus area in [Interop 2024](https://wpt.fyi/interop-2024)
6. The ability to transition to/from auto heights.
   * This is covered in a separate issue, see current proposal in https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1800254442
   * We have a [resolution](https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1864906213) to add this to [css-values-5](https://drafts.csswg.org/css-values-5/), but the spec edits have not happened yet.
   * I'm [working on prototyping this in Chromium](https://chromestatus.com/feature/5196713071738880)

There was another piece that I had prototyped (closely related to item 3 above), but removed from the prototype because it turned out to not be useful.  This was the `::details-summary` pseudo-element which styled the container for the `<summary>` element.  Similar to `::details-content` it was a little tricky to use because it defaulted to `display: contents`, and it didn't seem to add any value, only confusion about when to use it and when not to.  (It's just a wrapper for a single element, the first summary child.  It's potentially useful in the case where there is no summary child, but I think that's mostly an error case anyway.)

-- 
GitHub Notification of comment by dbaron
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9879#issuecomment-1936179742 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 9 February 2024 15:58:19 UTC