- 2025-10-05 — Useful CSS custom functions
- 2025-09-30 — A custom --light-dark() function in CSS that works with any type of value (not just colors!) in just 3 LOC
- 2025-08-13 — 5 Useful CSS functions using the new @function rule
- 2025-03-26 — CSS Mixins are ready for experimentation
- Official spec
- Intent to Ship: CSS Custom Functions (@function)
- CSS Mixins & Functions Explainer
- Proposal: Custom CSS Functions & Mixins
- Custom CSS Custom Functions + Nested Style Queries: --light-dark()
@mixin --box {
aspect-ratio: 1;
inline-size: 100px;
block-size: 100px;
}
.box {
@apply --box;
}@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
div {
background-image: --light-dark(black-logo.png, white-logo.png);
}