<dashed-function>: CSS Custom-Funktionen

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Der <dashed-function> CSS Datentyp repräsentiert die Syntax zur Verwendung von CSS Custom-Funktionen, die mit der @function At-Regel definiert werden.

Syntax

Ein <dashed-function>-Wert besteht aus dem --function-name, gefolgt von Klammern mit den Argumenten der Funktion (zum Beispiel --my-function(30px, 3)).

Sie können <dashed-function>-Werte anstelle von regulären CSS-Property-Werten oder Property-Wert-Komponenten verwenden, in Fällen, in denen Sie die Werte dynamisch basierend auf der Logik der Funktion berechnen möchten, anstatt statische Werte bereitzustellen.

In Fällen, in denen Sie Komma-enthaltende Werte als Argumente übergeben möchten, können Sie dies tun, indem Sie sie in geschweifte Klammern ({ }) setzen.

Beispiele

Für weitere Beispiele, siehe unseren Leitfaden zur Verwendung von CSS-Custom-Funktionen.

Grundlegende `<dashed-function>`-Verwendung

Dieses Beispiel zeigt eine grundlegende Funktion, die eine halbtransparente Version der übergebenen Farbe zurückgibt.

HTML

Der Markup beinhaltet ein <p>, das Textinhalt enthält:

html

<p>Some content</p>

CSS

In unseren Styles definieren wir zuerst die CSS-Custom-Funktion. Die Funktion heißt --transparent und nimmt zwei Parameter entgegen: eine Farbe und einen numerischen Alpha-Kanal-Wert. Innerhalb des Funktionskörpers verwenden wir die relative Farbsyntax, um die übergebene Farbe in eine oklch() Farbe mit einem Alpha-Kanal umzuwandeln, der dem übergebenen Alpha-Wert entspricht; dies wird zum result der Funktion:

css

@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

Anschließend definieren wir eine --base-color Custom-Property mit dem Wert #faa6ff auf dem :root Element. Wir weisen dieser Property den Wert der border-Farbe des <p>-Elements zu und setzen dann ihren background-color-Wert auf eine transparente Version derselben Farbe. Dies geschieht, indem der Wert gleich der <dashed-function>-Syntax gesetzt wird, die die --transparent() Funktion spezifiziert und ihr die Argumente var(--base-color) und 0.8 übergibt.

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

css

:root {
  --base-color: #faa6ff;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 20px;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}