← Back to release summary

'disclosure-open' and 'disclosure-closed' keywords for CSS list-style-type property

Category
CSS
Type
No developer-visible change
Status
Enabled by default (Chrome 89)
Intent stage
Prepare to ship

Summary

CSS property 'list-style-type' supports two new keywords 'disclosure-open' and 'disclosure-closed'. In an element with display:list-item, 'disclosure-open' shows a symbol indicating a widget like <details> is opened. 'disclosure-closed' shows a symbol indicating a widget like <details> is closed. They will be used for the default style of <summary> in the user-agent stylesheet.

Motivation

This is a step of standardizing a way to customize the appearance of the disclosure triangle of <details> and <summary>. 'disclosure-open' and 'disclosure-closed' will be used as the default style of <summary>. Web developers can use these keywords to reset the <summary> appearance, and to create a UI widget like <details>/<summary> with their own code.

Standards & signals

Explainers: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

View on chromestatus.com