Intent to Ship: 'display: list-item' by default for <summary>

84 views
Skip to first unread message

TAMURA, Kent

unread,
Nov 30, 2020, 11:39:57 PM11/30/20
to blink-dev

Contact emails

tk...@chromium.org

Explainer

Currently developers need to use the vendor-prefixed '::-webkit-details-marker' pseudo element to customize the disclosure triangle for <details>/<summary>, like:

<style>
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: "→";
  color: red;
}
</style>

After this change, developers can use the standard 'list-style-type' property and '::marker' pseudo element.

<style>
summary {
  list-style-type: "→";
}
summary::marker {
  color: red;
}
</style>


Specification

https://html.spec.whatwg.org/C/#the-details-and-summary-elements

API spec

Yes

Summary

The default value of CSS 'display' property for <summary> is changed to 'list-item' from 'block'. We also support '::marker' pseudo element selector for <summary>, and remove '::-webkit-details-marker' pseudo element selector.



Blink component

Blink>CSS

TAG review

None; The feature is in a WHATWG specification, and another browser already shipped it.

TAG review status

Not applicable

Risks



Interoperability and Compatibility

* Firefox already shipped this. Interoperability risk is low. * We'll remove '::-webkit-details-marker'. It's a breaking change, but the usage of the '::-webkit-details-marker' is very low [1], so the compatibility risk is low. We have no plan to show a deprecation warning about '::-webkit-details-marker' removal before the removal because it's difficult to support both of '::-webkit-details-marker' and '::marker'. Instead, we're going to show a warning after the removal. [1] https://www.chromestatus.com/metrics/feature/timeline/popularity/3337



Gecko: Shipped/Shipping (https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Browser_compatibility)

WebKit: No signal (https://lists.webkit.org/pipermail/webkit-dev/2020-September/031397.html) No response to the position query

Web developers: Strongly positive (https://bugs.chromium.org/p/chromium/issues/detail?id=590014) The issue has 36 stars.


Is this feature fully tested by web-platform-tests?

Yes

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=590014

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6730096436051968

This intent message was generated by Chrome Platform Status.

--
TAMURA Kent
Software Engineer, Google


Chris Harrelson

unread,
Dec 1, 2020, 12:05:18 AM12/1/20
to TAMURA, Kent, blink-dev
What about the interoperability risk for this part? Is there a use counter or other data indicating it won't break content?
 

We also support '::marker' pseudo element selector for <summary>, and remove '::-webkit-details-marker' pseudo element selector.



Blink component

Blink>CSS

TAG review

None; The feature is in a WHATWG specification, and another browser already shipped it.

TAG review status

Not applicable

Risks



Interoperability and Compatibility

* Firefox already shipped this. Interoperability risk is low. * We'll remove '::-webkit-details-marker'. It's a breaking change, but the usage of the '::-webkit-details-marker' is very low [1], so the compatibility risk is low. We have no plan to show a deprecation warning about '::-webkit-details-marker' removal before the removal because it's difficult to support both of '::-webkit-details-marker' and '::marker'. Instead, we're going to show a warning after the removal. [1] https://www.chromestatus.com/metrics/feature/timeline/popularity/3337



Gecko: Shipped/Shipping (https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Browser_compatibility)

WebKit: No signal (https://lists.webkit.org/pipermail/webkit-dev/2020-September/031397.html) No response to the position query

Web developers: Strongly positive (https://bugs.chromium.org/p/chromium/issues/detail?id=590014) The issue has 36 stars.


Is this feature fully tested by web-platform-tests?

Yes

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=590014

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6730096436051968

This intent message was generated by Chrome Platform Status.

--
TAMURA Kent
Software Engineer, Google


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqGNnDydnfeX31aEgKyx68UhouichotTrRzvqUVLEhzi3Q%40mail.gmail.com.

TAMURA, Kent

unread,
Dec 1, 2020, 12:16:45 AM12/1/20
to Chris Harrelson, blink-dev
It's a good point.  Changing the 'display' value to a value other than 'list-item' will hide the marker. According to [2], 0.23% of the page views might be affected.  However, Firefox already has this behavior for years.

Chris Harrelson

unread,
Dec 1, 2020, 12:22:26 AM12/1/20
to TAMURA, Kent, blink-dev
Ok. That's somewhat high; could you spot-check 10-20 of the pages linked above and verify none are broken?
 

TAMURA, Kent

unread,
Dec 1, 2020, 12:51:35 AM12/1/20
to Chris Harrelson, blink-dev
On Tue, Dec 1, 2020 at 2:22 PM Chris Harrelson <chri...@chromium.org> wrote:

Summary

The default value of CSS 'display' property for <summary> is changed to 'list-item' from 'block'.


What about the interoperability risk for this part? Is there a use counter or other data indicating it won't break content?

It's a good point.  Changing the 'display' value to a value other than 'list-item' will hide the marker. According to [2], 0.23% of the page views might be affected.  However, Firefox already has this behavior for years.


Ok. That's somewhat high; could you spot-check 10-20 of the pages linked above and verify none are broken?

Sure.

I checked 10 sites:
 - 8 sites: normalize.css, which includes |summary { display: block}|, is used, however they have no <summary>.
 - 2 sites: They have |summary { display: block }|, and <summary> are used without <details>.
So, I find no sites affected by the change.

Chris Harrelson

unread,
Dec 1, 2020, 1:41:58 AM12/1/20
to TAMURA, Kent, blink-dev

Mike West

unread,
Dec 1, 2020, 2:16:13 AM12/1/20
to blink-dev, Chris Harrelson, blink-dev, Kent Tamura
LGTM2. Thanks for gathering additional data on usage; I agree that the numbers look small, and aligning with other browsers on behavior is valuable for the ecosystem generally.

-mike

Jochen Eisinger

unread,
Dec 1, 2020, 2:22:10 AM12/1/20
to Mike West, blink-dev, Chris Harrelson, Kent Tamura
Reply all
Reply to author
Forward
0 new messages