@function custom functions

Nur Chrome 139; Safari Technology Preview 249, Firefox in Entwicklung. Nicht Baseline.

Chrome 139Edge 139Safari TPFirefox no

Autordefinierte Funktionen mit typisierten Parametern und einem `result`-Deskriptor, überall nutzbar, wo ein Wert hingehört. Fluide Typoskalen, Abstandsmathe und Farbhelfer leben in CSS statt in Sass.

Fluid heading via @function

CSS

@function --fluid(--min <length>, --max <length>, --vw-min: 360px, --vw-max: 1200px){
  result:clamp(var(--min),calc(var(--min) + (var(--max) - var(--min)) * ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))),var(--max));
}
.fx-052{font-size:clamp(1.4rem,3vw,2.4rem);font-size:--fluid(1.4rem,2.4rem);font-family:system-ui}

HTML

<h2 class="fx-052">Fluid heading via @function</h2>

Fallback: Die vorangehende einfache `clamp()`-Zeile ist der Fallback; Browser ohne Unterstützung ignorieren den Funktionsaufruf.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@function

Prompt

Definiere wiederverwendbare Wertlogik mit `@function --name(--param <type>, --other: default) { result: ...; }` und rufe sie als `--name(args)` auf. Typische Einsätze: fluide Größen, Abstandsskalenstufen, Opacity-Varianten. Chromium-only Stand 2026-09: stelle jedem Aufruf immer eine statische Fallback-Deklaration voran.