CSS WG Blog Introducing CSS Values and Units Level 5!

Introducing CSS Values and Units Level 5!

The CSS Working Group has published a First Public Working Draft of CSS Values and Units Level 5. This module defines a variety of value types for CSS. This module is currently drafted as a diff spec over CSS Values and Units Level 4, and defines several new generic value functions that can be used nearly anywhere in CSS. Additions since Level 4 are listed in the Changes section and include:

“Comma upgrading” for functional notations

To accommodate the increasing numbers of value-substitution functions that might take multiple arguments containing commas, all CSS functions can now “upgrade” their own syntactic commas to semicolons, allowing their arguments to unambiguously contain commas.

The *-progress() family of functions

These calculate a value’s “progress” through a given range. The value can be a normal numeric value, a Media Query value, or a Container Query value.

The *-mix() family of functions

These represent an interpolation between two values for which the intermediate values are either inconvenient or impossible to represent in CSS syntax. By accepting a *-progress() function, they allow interpolation along a given range.

The first-valid() function

Resolves to the first argument that’s valid for the property this is used in. (Normally, CSS’s generic fallback mechanisms for invalid syntax achieve this, but when a value is stored in a variable or similar, we can’t rely on that. first-valid() brings the ability back for these cases.)

The toggle() function

Allows a value to alternate between multiple possibilities as it’s inherited through the tree. For example, <em> inside of a context that’s already italics can automatically switch to being unitalicized; or nested lists can automatically cycle between several list-style-type values regardless of nesting depth.

The attr() function

Allows values to be pulled from attributes on the element. Previously this function was only defined to work for the content property, and only pulled the attribute value as a string; this spec allows it to parse to multiple types of values, and be used anywhere.

The random() and random-item() functions

Allow returning a random numeric value or random choice among multiple values, in a well-defined way.

The sibling-count() and sibling-index() functions

Allow values to respond to how many siblings the element has and where in the sibling list it is.

The calc-size() function

Allows intrinsic sizes (such as auto or max-content) to be adjusted similar to calc(). Most importantly, this allows such keywords to be interpolated with lengths, allowing things like interpolating height: auto to height: 0. The new interpolate-size property allows authors to opt into this interpolation behavior by default (as back-compat prevents us from doing it automatically).

URL modifiers

Several new url() modifiers allow control over cross-origin requests etc.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-values-5]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

« Previous article