Re: [csswg-drafts] Ability to style <details>/<summary> to be open (e.g. for print styles) (#2084)

> I'm down with that approach. The UA stylesheet is then extremely trivial:
> 
> ```
> details::details-content { display: none; }
> details[open]::details-content { display: contents; }
> ```
> 
> And overriding it is super easy. 👍 from me.

Just wanna add that, at least currently, this does not seem to be the style used by chrome (and Firefox, as of version 130).

Simple example:

```html
<style>
.grid {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: 1fr 1fr;
}
details {
    display: contents;
}
</style>
<div class="grid">
<details>
    <summary>summary 1</summary>
    <div>contents 1</div>
</details>
<details>
    <summary>summary 2</summary>
    <div>contents 2</div>
</details>
```

Here, we see that regardless of whether the details are open or not, the contents are included as a separate grid cell. If you add in additional `<div>` elements inside the contents, however, these will appear as multiple grid cells after opening, indicating that it *is* `display: contents` after being opened.

Personally, I would *like* this to be the default styles per the spec, but I think it's worth saying that it's not, at least implicitly per the behaviour we get when the details are closed.

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


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

Received on Saturday, 7 September 2024 16:36:23 UTC