← Back to release summary

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

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

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. Before this change, developers did the following in order to hide the details marker: summary::-webkit-details-marker { display: none; margin-inline-end: 0; } Now developers can do: summary { display: block; } or summary { list-style-type: none; }

Motivation

This is a step of standardizing a way to customize the appearance of the disclosure triangle of <details> and <summary>. Web developers can customize <summary> appearance with not vendor-prefixed '::-webkit-details-marker' but the standard '::marker'.

Standards & signals

Explainers: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

View on chromestatus.com