Published: March 06, 2025
On February 25th Chrome published an Intent To Ship for @function and received feedback requesting a longer experimentation phase. While the overall experimentation phase wasn't short, there have been some recent impactful spec changes, and these deserved some more experimentation time.
We're also hopeful and excited that this extended experimentation phase may yield more community experimentation.
Call to experiment
Now is the time to grab a copy of Canary, enable experimental web platform features, start testing CSS @function, and report any bugs you find. We now have time to experiment longer, we should take advantage of this.
To help get you started, here's a few explorations:
- Pontus Horn - button variants
- Nils Riedemann - font scales
- Bramus - a light dark function for more than color
The following CSS demonstrates a terse yet useful example:
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
Want to know more about @function?
Bramus has a great set of demos and CSS Tricks also didn't delay to jump on the excitement.
Arguments?! Return values?! That's worth spitting my coffee out for! I had to learn more about them, and luckily, the spec is clearly written.