The CSS Working Group has just published the first public draft of the CSS Values and Units Level 5 Module. Although still in its early stages, this release introduces many new features and exciting improvements.

Here's a summary of some of the changes.

# Randomization

Two new functions that return random values from a list or between a range. No more hacky tricks or dependencies on other languages to achieve this. And the syntax is straightforward and powerful!

# New toggle() function

A convenient new way to define values in nested elements. The toggle() function sets values that the element and its descendants will cycle through, simplifying the code considerably. Forget about complex rules or redefinitions.

# Updates to the attr() function

Right now, the attr() function works only with strings and only with the content property. This module extends its functionality so it can operate with more data types without limiting the properties.

# Sibling functions

Two new functions, sibling-count() and sibling-index(), that return numbers and allow operations with the amount of siblings and their order (index). As it is common in CSS, these functions will be 1-index.

# New functional notation

As you may have noticed, some of the functions from this thread may take a comma-separated list as arguments. To accommodate these values unambiguously, parameters may be separated by semi-colons (;) instead of commas (,).

# New first-valid() function

A problem with CSS variables is they may be valid even if they contain an incorrect value. The first-valid() function deals with this easily and effectively, returning the first valid value from a list of parameters.

# Flow-relative positions

CSS has logical properties for things like margin, padding, or border. Now, they will also be available in the position type (e.g. the value for background-position, not to be confused with the position property).

# New calc-size() function

A new function able to safely operate with intrinsic values (auto, max-content, fit-content, etc.) And new keywords (size) to add more flexibility to the calculations.

There are more new features and extensions to existing ones (new *-progress() and *-mix() family of functions, new URL modifiers).

You can check out the CSS Values and Units Module Level 5 at https://w3.org/TR/css-values-5/

(Thanks for editing and publishing the document @tabatkins, @fantasai, and @mia)

CSS Values and Units Module Level 5

I wrote an article with the images in this thread and some extra data: https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS

Also available on:

- DEV (open): https://dev.to/alvaromontoro/new-values-and-functions-in-css-1b9o
- Medium: https://alvaromontoro.medium.com/new-values-and-functions-in-css-228852ab9eaf

I hate to admit my blog's format doesn't look that great for this. I need to redesign it.

@alvaromontoro @tabatkins @fantasai @mia these are all both amazing and terrifying somehow! Like I'm excited and confused at the same time 😅🤯

@alvaromontoro I love how the preview on my feed cuts the first picture of to read "Bling functions".

I got real excited.

@hamatti yeap. The cropping is not good. I'm just glad it is "sibling functions" and not "class functions" 😅😳