← Back to release summary

CSS min(), max() and clamp()

Category

CSS

Type

New or changed feature

Status

Enabled by default (Chrome 79)

Intent stage

Evaluate readiness to ship

• Breaking change: No
• Enterprise impact: None
• Spec maturity: Working draft
• Web Platform Tests: Yes

WPT details: https://crbug.com/978682

Summary

Adds the comparison functions min(), max(), and clamp() to math expressions for numeric CSS values.

Motivation

The feature has been requested for over a year with many stars, and has been shipped in Safari. We should also make it available in Chromium.

Standards & signals

• Specification: https://drafts.csswg.org/css-values-4/#comp-func
• Firefox: In development
• Safari: Shipped/Shipping — min() and max() are were shipped in Safari 11.1 and iOS 11.2. clamp() is not shipped yet but is enabled in Safari TP 97. https://webkit.org/blog/9672/release-notes-for-safari-technology-preview-97/
• Web developers: No signals
• Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=825895

Ecosystem

• Web Platform Tests: https://wpt.fyi/results/?q=css-min-max-and-clamp
• Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
• GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
• chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20min()%2C%20max()%20and%20clamp()
• MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20min()%2C%20max()%20and%20clamp()
• Baseline status: https://webstatus.dev/?q=CSS%20min()%2C%20max()%20and%20clamp()

Docs: http://bit.ly/31Yfkm6

Explainers: https://developer.mozilla.org/en-US/docs/Web/CSS/min#Examples https://developer.mozilla.org/en-US/docs/Web/CSS/max#Examples https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples

View on chromestatus.com