← Back to release summary

list-style-type: <string>

Category
CSS
Type
New or changed feature
Status
Enabled by default (Chrome 79)
Intent stage
Evaluate readiness to ship

WPT details: There are parsing tests in css-lists and reftests in vendor-imports: https://wpt.fyi/results/css/css-lists/parsing?q=list-style-type https://wpt.fyi/results/css/vendor-imports/mozilla/mozilla-central-reftests/lists-3?q=list-style-type-string The latter can be moved into css-lists.

Summary

Allows a stylesheets to use an arbitrary character for the list style marker. Examples include "-", "+", "★" and "▸". Since CSS Level 2, list-style-type has supported keywords like "disc" or "decimal" to define the appearance of the list item marker.

Motivation

Without this, developers are often forced to hide the real marker and insert the arbitrary marker using a ::before pseudo-element via the content property. Unfortunately, the fake marker won't be nicely positioned by list-style-position. Alternatively, developers can use an image (such as an SVG) and reference it using the url() function. This sometimes produces less than desirable results.

Standards & signals

Ecosystem

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#%3Cstring%3E

Explainers: https://lists.w3.org/Archives/Public/www-style/2010Mar/0326.html https://groups.google.com/forum/#!topic/comp.infosystems.www.authoring.stylesheets/A_9t4NknUV4

View on chromestatus.com