Tracking request for the new CSS @function rule from the CSS Functions and Mixins Module — recently shipped in Chrome 139. Looking to gauge interest and gather support data across browsers.
Note: This request is scoped to the @function rule only. Other parts of the CSS Functions and Mixins Module (such as @mixin and @apply) should be tracked separately when implemented. See #7301 and #7110 for other parts of this draft.
Summary
@function is a new CSS at-rule that allows authors to define custom, named CSS functions which accept arguments and return computed values. Functions can be reused across a stylesheet, enabling logic such as value negation, dynamic opacity, fluid typography, responsive layouts, and theme-dependent values.
Specification
W3C CSS Functions and Mixins Module (First Public Working Draft, 15 May 2025)
Current status
- Shipped: Chrome 139+
- Not yet supported: Firefox, Safari, Edge (Chromium-based Edge will gain support alongside Chrome)
Example
:root {
--primary-color: red;
}
@function --negate(--value) {
result: calc(-1 * var(--value));
}
@function --opacity(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
margin-left: --negate(10px);
background-color: --opacity(var(--primary-color), 80%);
}Notes
- Part of ongoing CSSWG work toward higher-level author-defined logic in CSS.
Resources
Browser support data
| Browser |
Version |
Support status |
| Chrome |
139 |
✅ |
| Edge (Chromium) |
|
❌ |
| Firefox |
|
❌ |
| Safari (macOS) |
|
❌ |
| Chrome for Android |
139 |
✅ |
| Safari on iOS |
|
❌ |
| Samsung Internet |
|
❌ |
Tracking request for the new CSS
@functionrule from the CSS Functions and Mixins Module — recently shipped in Chrome 139. Looking to gauge interest and gather support data across browsers.Note: This request is scoped to the @function rule only. Other parts of the CSS Functions and Mixins Module (such as @mixin and @apply) should be tracked separately when implemented. See #7301 and #7110 for other parts of this draft.
Summary
@functionis a new CSS at-rule that allows authors to define custom, named CSS functions which accept arguments and return computed values. Functions can be reused across a stylesheet, enabling logic such as value negation, dynamic opacity, fluid typography, responsive layouts, and theme-dependent values.Specification
W3C CSS Functions and Mixins Module (First Public Working Draft, 15 May 2025)
Current status
Example
Notes
Resources
Browser support data