CSS Custom Function

Summary: Custom Functions are similar to custom properties, but instead of returning a single fixed value, it returns a value based on other custom properties, parameters, and conditionals.

Intent: https://groups.google.com/a/chromium.org/g/blink-dev/c/bvi4D7eD7wI

Spec: CSS Functions and Mixins Module

Explainer:

Proposal: Proposal: Custom CSS Functions & Mixins · Issue #9350 · w3c/csswg-drafts

TAG Design Review: https://github.com/w3ctag/design-reviews/issues/1031

Debuggability: The Devtools team is working on “basic support”: “basic support” primarily means that callsites can be clicked, you’ll be taken to the relevant function, and you’ll be able to edit the contents of the function. see, What's new in DevTools, Chrome 138  |  Blog  |  Chrome for Developers

Standard Positions:

Other Resources:

Bug Reports: https://issues.chromium.org/issues/428484826

=== @function is a sort of Custom Property ===

I'm Success Button:
I'm Disabled Button:
I'm Info Button:
I'm Danger Button:
I'm else case Button:

=== Fluid Typography with if() ===

This is Fluid H1 size.

This is Fluid H2 size.

This is Fluid H3 size.

This is Fluid H4 size.

This is Fluid H5 size.
This is Fluid H6 size.

This is Fluid P size.

❌ Your browser doesn't support this feature.

✅ Your browser supports this feature!

This is a demo for https://drafts.csswg.org/css-mixins-1/

Try it in Chrome with
--enable-experimental-web-platform-features.