@function

The @function CSS at-rule defines a custom function that takes CSS values or custom properties as arguments, and returns a CSS value. It can be based on conditional logic such as by using the @media at-rule.

Baseline Status: This feature is currently Limited and is missing in at least one major browser engine.

Desktop Browser Engine Support

Google Chrome

139

Supported

Mozilla Firefox

—

Unsupported

Apple Safari

—

Unsupported

Microsoft Edge

139

Supported

Mobile Browser Engine Support

Chrome Android

139

Firefox Android

—

Safari iOS

—

Specifications and References

Specification ↗ Feature XML ↗

MDN Browser Compat Data Keys:

api.CSSFunctionDeclarations ↗ api.CSSFunctionDeclarations.style ↗ api.CSSFunctionDescriptors ↗ api.CSSFunctionDescriptors.result ↗ api.CSSFunctionRule ↗ api.CSSFunctionRule.getParameters ↗ api.CSSFunctionRule.name ↗ api.CSSFunctionRule.returnType ↗ css.at-rules.function ↗ css.at-rules.function.result ↗ css.types.dashed-function ↗ css.types.type ↗