Following https://github.com/whatwg/html/issues/722 , HTML now defines styling of the disclosure triangle of <summary> by making <summary> a list-item, and allowing it to be styled with list-style-* and (in the future, when it's supported) ::marker. WebKit currently supports ::-webkit-details-marker for styling the <summary>'s triangle, but does not make it a list-item or support the list-style-* properties. It should do so to match the update to the spec. Gecko is planning to ship support for <summary> doing it as described in the spec (see https://bugzilla.mozilla.org/show_bug.cgi?id=1226455). The Chromium bug on switching to the spec's behavior is https://bugs.chromium.org/p/chromium/issues/detail?id=590014 . See the test page at https://bug1226455.bmoattachments.org/attachment.cgi?id=8747989
At the moment the current rendering as block is correct per the HTML 5.1 recommendation (dated 1 November 2016). See https://www.w3.org/TR/html51/rendering.html#non-replaced-elements-flow-content
The more actively-maintained WHATWG spec has been updated: https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements to reflect the discussion cited in comment 0.
Is this something still being considered? I noticed https://chromestatus.com/feature/6730096436051968
Anecdotally, I'm seeing more and more websites with two disclosure symbols. Latest example: https://www.webpagetest.org/result/220614_BiDc20_CG9/
Created attachment 460241 [details] WebPageTest screenshot with two disclosure symbols
<rdar://problem/95148788>
Some details: https://searchfox.org/wubkat/search?q=webkit-details-marker&path=&case=false®exp=false https://caniuse.com/css-marker-pseudo https://www.w3.org/TR/css-pseudo-4/#marker-pseudo
> Some details: Pun intended? :) To be explicit, the webcompat issue I'm seeing is because websites use either variations of those rules that WebKit does not understand: .something summary { list-item: none; } /* or */ .something summary { display: block; /* anything but list-item */ } I'm removing "(potentially with ::marker in the future)" from the title to reflect that.
Created attachment 461722 [details] Job board with two disclosure symbols
Created attachment 461730 [details] current rendering in 3 browsers Safari 16.0 Firefox Nightly 105.0a1 Google Chrome Canary 106.0.5248.0 Only Safari shows the double arrows.
data:text/html,<!doctype html><html><details><summary style="display:inline-block">foo<summary></details> or data:text/html,<!doctype html><html><details><summary style="list-style:none">foo<summary></details> Basically anything which change the display in a way that will remove `display: list-item` * Arrow in Safari, * No arrow in Firefox and Chrome Chrome https://github.com/chromium/chromium/blob/f38d5c61ec138ba6ba45777007dbe69ab3c7326f/third_party/blink/renderer/core/html/resources/html.css#L1348-L1352 ``` details > summary:first-of-type { display: list-item; counter-increment: list-item 0; list-style: disclosure-closed inside; } ``` Firefox https://searchfox.org/mozilla-central/rev/4a10f85ebca1c22c803d0253a82fe39514ba0b53/layout/style/res/html.css#781-800 ``` /* details & summary */ details > summary:-moz-native-anonymous { /* TODO(krosylight): Remove this when fixing bug 1308080 */ user-select: none; } details > summary:is(:first-of-type, :-moz-native-anonymous) { display: list-item; counter-increment: list-item 0; list-style: disclosure-closed inside; } details[open] > summary:is(:first-of-type, :-moz-native-anonymous) { list-style-type: disclosure-open; } details > summary:first-of-type > *|* { /* Cancel "list-style-position: inside" inherited from summary. */ list-style-position: initial; } ``` Safari https://searchfox.org/wubkat/rev/340573c924b370891b7a0794ef39d4995d3670ee/Source/WebCore/css/html.css#1339-1352 ``` summary { display: block; } summary::-webkit-details-marker { display: inline-block; width: 0.66em; height: 0.66em; margin-right: 0.4em; } ```
SeeAlso https://searchfox.org/wubkat/search?q=DetailsMarker&path=&case=false®exp=false
https://searchfox.org/wubkat/rev/340573c924b370891b7a0794ef39d4995d3670ee/Source/WebCore/html/HTMLSummaryElement.cpp#67-71 :) ``` RenderPtr<RenderElement> HTMLSummaryElement::createElementRenderer(RenderStyle&& style, const RenderTreePosition&) { // <summary> elements with display:list-item should not be rendered as list items because they'd end up with two markers before the text (one from summary element and the other as a list item). return RenderElement::createFor(*this, WTFMove(style), { RenderElement::ConstructBlockLevelRendererFor::ListItem, RenderElement::ConstructBlockLevelRendererFor::Inline, RenderElement::ConstructBlockLevelRendererFor::TableOrTablePart }); } ```
*** Bug 227712 has been marked as a duplicate of this bug. ***
*** Bug 239691 has been marked as a duplicate of this bug. ***
*** Bug 267330 has been marked as a duplicate of this bug. ***
Being able to use ::marker instead of ::-webkit-details-marker would be a good first step. With this ticket, i.e. when implemented as a list item, things like list-style-position:outside become possible: https://codepen.io/cssence/pen/bGZQBox