<dashed-function>: CSS benutzerdefinierte 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, die verwendet wird, um benutzerdefinierte CSS-Funktionen aufzurufen, welche mit dem @function At-Regel definiert werden.

Syntax

Ein <dashed-function>-Wert besteht aus dem --function-name, gefolgt von Klammern, die die Argumente der Funktion enthalten (zum Beispiel: --my-function(30px, 3)).

Sie können <dashed-function>-Werte anstelle regulärer CSS-Eigenschaftswerte oder Eigenschaftswert-Komponenten verwenden, wenn Sie die Werte dynamisch basierend auf der Logik der Funktion berechnen möchten, anstatt statische Werte anzugeben.

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 ({ }) einschließen.

Beispiele

Für weitere Beispiele, sehen Sie sich unseren Leitfaden zur Verwendung von benutzerdefinierten CSS-Funktionen an.

Grundlegende Verwendung von `<dashed-function>`

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

HTML

Das Markup enthält ein <p>, das einige Textinhalte enthält:

html

<p>Some content</p>

CSS

In unseren Styles definieren wir zuerst die benutzerdefinierte CSS-Funktion. Die Funktion heißt --transparent und nimmt zwei Parameter an: eine Farbe und einen numerischen Alpha-Kanalwert. Im Körper der Funktion verwenden wir die relative Farbsyntax, um die übergebene Farbe in eine oklch()-Farbe mit einem Alpha-Kanal gleich dem übergebenen Alpha-Wert zu transformieren; dies wird das Ergebnis der Funktion:

css

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

Als nächstes definieren wir eine --base-color-benutzerdefinierte Eigenschaft mit einem Wert von #faa6ff auf dem :root-Element. Wir weisen diese Eigenschaft dem Wert der border-Farbe des <p>-Elements zu und setzen dann dessen background-color-Wert auf eine transparente Version derselben Farbe. Dies geschieht, indem wir den Wert auf die <dashed-function>-Syntax setzen, die die --transparent()-Funktion spezifiziert und sie mit den Argumenten var(--base-color) und 0.8 aufruft.

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);
}