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

[TAMURA, Kent]

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]

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]

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.

[2] https://chromestatus.com/metrics/feature/timeline/popularity/1434

[Chris Harrelson]

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

 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqEJ8Uo8Vw2YHtR9trDAvZ3ijQzb%3DmUFFTDuVNLPSpaLjg%40mail.gmail.com.

[TAMURA, Kent]

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.

[2] https://chromestatus.com/metrics/feature/timeline/popularity/1434

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]

LGTM1

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqEontKqPdqk0jDojrixaEJ7pRrFvHH8ewsFa0hMwAj7sw%40mail.gmail.com.

[Mike West]

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]

lgtm3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/2c61a901-2631-42b8-b9c0-368bf798e4a1n%40chromium.org.