[CSSWG][css-values-5] FPWD of CSS Values & Units Level 5

The CSS WG has published a First Public Working Draft of the CSS
Values & Units Module Level 5:

    http://www.w3.org/TR/css-values-5/

This module is currently drafted as a diff spec over Values 4, and
defines several new generic value functions that can be used nearly
anywhere in CSS. Additions since Level 4 are listed at:

  https://www.w3.org/TR/2024/WD-css-values-5-20240913/#changes

Notable new things in this draft:

* “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
*un*italicized; 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).

Please review the draft, and send any comments to this mailing list,
<www-style@w3.org>, prefixed with [css-values-5] (as I did on this
message) or (preferably) file them in the GitHub repository at
  https://github.com/w3c/csswg-drafts/issues

For the CSS WG,
Tab Atkins-Bittner & Elika Etemad

Received on Friday, 13 September 2024 19:56:35 UTC