These features are experimental and not Baseline in September 2026:
@function (Chrome 1 and Edge 139+; Safari 10 Technology Preview) defines a custom function with typed parameters, defaults and a result.
if() (Chrome and Edge 137+) picks a value inline using style(), media() or supports() conditions.
@custom-media --narrow (width < 40rem); names a query for @media (--narrow). No stable browser ships it (Firefox 555 has a flag), but PostCSS 238,379 Preset Env and Lightning CSS compile it today.
@sheet would bundle named stylesheets in one file. The CSS Working Group accepted it; no browser implements it.
<style>
@function --tint(--color <color>, --alpha <number>: 0.25) returns <color> {
result: oklch(from var(--color) l c h / var(--alpha));
}
.chip { --brand: #6a1b9a; font: 18px system-ui; padding: 10px 16px; margin: 8px;
display: inline-block; border-radius: 20px; color: var(--brand);
background: --tint(var(--brand));
border: if(style(--level: high): 3px solid; else: 1px dashed) var(--brand); }
</style>
<span class="chip">Default level</span> <span class="chip" style="--level: high">Level high</span>
Because these declarations contain var(), other browsers accept them while parsing and drop them at computed-value time, which also cancels earlier fallbacks for that property. Use them only for non-essential decoration until support broadens.