Description
In twitter discussion of the CSS Toggle proposal, a few people brought up the frustrating limitation of <details>/<summary>, that they cannot be made collapsible only under certain media conditions. That is, website authors would like the option of forcing the details into an expanded state when certain media queries apply, such as large screens or print media.
This has previously been discussed in w3c/csswg-drafts#2084 (starting 5 years ago). However, with the shadow-DOM rendering model for details/summary now more formalized, I don't think it's possible anymore "to get to the point where all of details/summary layout & rendering can be defined with a CSS model & customized by media queries," as I hoped for in that thread.
@annevk, in his reply to that twitter thread, suggested that HTML could define a media-attribute based <details> to address this use case.
To be consistent with other uses of media, I think the attribute would have to define the "enabled" conditions for the details/summary collapse function. E.g., a <details media="screen"> would be collapsible in screen media, but would be a non-interactive grouping container in print (when the media attribute doesn't match).
However, maybe it makes more sense to other people for media to define the always-open conditions? That is, a <details media="print"> would be automatically expanded for printing; in non-matching media, expanding the details would be user triggered, with the default state still based on the open attribute. (Comment / like someone's comment if you have opinions about which interpretation of media makes sense to you!)
Additional pseudoclasses would need to apply to indicate whether the collapsing function was currently enabled or disabled, with corresponding changes in the user agent styles. Most importantly, the default disclosure-triangle marker on <summary> should not be displayed if the element is not currently collapsible.