`<details>`/`<summary>` rendering
Opened this issue · 2 comments
Description
The WebKit implementation of those elements is completely out of date, and causes a lot of pain for web developers:
- ::marker can't be used, WebKit implements ::-webkit-details-marker instead(bug 157323)
- list-style and display does not affect the details marker (bug 264381)
- element.checkVisibility() does not work properly on elements in the default slot (bug 264733)
- summary::before does not appear in the correct order (bug 61426)
- details::before/after does not appear in the correct order (bug 61766)
Also add support for ::details-content
Specification
https://html.spec.whatwg.org/#the-details-and-summary-elements
Additional Signals
Standards Positions
WebKit: WebKit/standards-positions#351
Gecko: mozilla/standards-positions#1027
Site breakage and workaround
Browser Bugs
Likely Compatibility Impact
See: https://bugs.webkit.org/showdependencytree.cgi?id=252223&hide_resolved=1
Developer surveys
Other Developer Sentiment
There were some mentions in State of HTML/CSS
::details-content has shipped in Chrome 131 and introduces a new concept: part-like pseudo-elements.
This means that selectors such as the following are valid:
- ::details-content::before
- ::details-content::after
- ::details-content::first-line
- ::details-content::first-letter
- ::details-content::selection
- ::details-content:hover
- and more…
Safari Technology Preview has added support for the ::details-content pseudo-element and also implemented <details> and <summary> disclosure triangle as a list item.
You can now use summary::marker in Safari Technology Preview but because of this bug the only thing you can change about the disclosure triangle is its color :(