This content originally appeared on Bram.us and was authored by Bramus!
Chrome is currently prototyping CSS Functions, which is very exciting!
~
⚠️ This post is about an upcoming CSS feature. You can’t use it … yet.
This feature is currently being prototyped in Chrome Canary and can be tested in Chrome Canary with the Experimental Web Platform Features flag enabled.
~
Chrome is currently prototyping CSS Functions from the css-mixins-1 specification.
Custom functions allow authors the same power as custom properties, but parameterized: they have the same flexibility and conditionality as a custom property definition, but take values from other custom properties (or explicitly as arguments) at the point of use.
Here’s a very simple example (taken from the spec) that should give you an idea of what the syntax looks like:
@function --negate(--value) {
result: calc(-1 * var(--value));
}The implementation in Chrome Canary is currently incomplete and there is no shipping date set, but you can already try out the WIP-implementation by enabling the Experimental Web Platform Features flag.
~
I’m very excited about this upcoming feature, as it will open up a lot of possibilities, way more impactful than that --negate example from the spec.
For example: a limitation of the CSS light-dark() function is that it only works with <color> values. Thanks to Custom Functions you can write your own --light-dark() that works with any value.
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}If you are visiting the site in the dark mode, the --dark value will be returned. Otherwise the --light value gets returned.
For example, you can use this to have different font-weight – something Robin suggests on doing:
:root {
color-scheme: light dark;
font-family: "Literata", serif;
color: light-dark(#333, #e4e4e4);
background-color: light-dark(aliceblue, #333);
font-weight: --light-dark(300, 500);
}Note that for <color> values I am still relying on the built-in light-dark().
Here’s the live demo that uses that code (and which also changes the font-size and some border-related properties along with it):
See the Pen Custom CSS Custom Functions: –light-dark() by Bramus (@bramus) on CodePen.
Returning different values based on the used color-scheme of an element – instead of responding to the global light/dark preference – is not covered by @function. For that you’d also need the CSS if() function, which currently only exists in spec text.
~
To follow along with Chrome’s progress on prototyping this, subscribe to crbug/325504770 by hitting the star next to its title.
~
Spread the word
Feel free to reshare one of the following posts on social media to help spread the word:
~
🔥 Like what you see? Want to stay in the loop? Here's how:
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2025-02-09T01:16:35+00:00) CSS Custom Functions are coming … and they are going to be a game changer!. Retrieved from https://www.scien.cx/2025/02/09/css-custom-functions-are-coming-and-they-are-going-to-be-a-game-changer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.