The CSS Working Group released the first Public Working Draft for the CSS Values and Units Module Level 5. It describes the common values and units th

New Values and Functions in CSS

submited by

Style Pass

2024-09-25 15:00:06

The CSS Working Group released the first Public Working Draft for the CSS Values and Units Module Level 5. It describes the common values and units that CSS properties accept and the syntax used for them, and it comes with some interesting new features.

September 19, 2024 css webdev

On September 13, 2024, the CSS Working Group released the first Public Working Draft for the CSS Values and Units Module Level 5. It is an extension of the previous level that includes some interesting additions.

Things that were unimaginable not so long ago are making their way into the specs: random values, using attributes as values in any property, being able to use the order in calculations... It looks promising.

Many of these features have a common denominator: they simplify the CSS code. Things that before would require multiple rules or hacky solutions will be possible with one or two lines of CSS. As I said, it looks promising. This is a list of the new changes (more details below): Changes to attr() function: so it can be used with any attribute and in any CSS property (not only on content). calc-size() function: use intrinsic values such as auto or min-content in calculations. New first-valid() function to avoid issues with custom properties with invalid values. New *-mix() family of functions with a new notation for ratios. New *-progress() family of functions to calculate the progress ratio between a range or within a media or container. Randomization with new random() and random-item() functions, to return random values from a range or list (finally!) New sibling-count() and sibling-index() functions that provide integer values to operate depending on the order and size. New toggle() function for styling nested elements easily cycling over a list of values. New functional notation for arguments with comma-separated lists of values, to avoid ambiguity with the comma separating the arguments. New URL modifiers to provide more control over url() requests. Extension of the position type to allow flow-relative values. New Features and Updates Changes to attr() function