<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 stellt die Syntax dar, die verwendet wird, um CSS benutzerdefinierte Funktionen aufzurufen, die mit der @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 von regulären CSS-Property-Werten oder Komponenten von Property-Werten einfügen, in Fällen, in denen Sie die Werte dynamisch basierend auf 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 siehe unseren Leitfaden zur Verwendung von CSS benutzerdefinierten Funktionen.

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> mit etwas Textinhalt:

html

<p>Some content</p>

CSS

In unseren Stilen definieren wir zuerst die CSS benutzerdefinierte Funktion. Die Funktion heißt --transparent und akzeptiert zwei Parameter: eine Farbe und einen numerischen Alpha-Kanalwert. Innerhalb des Funktionskörpers verwenden wir relative Farbsyntax, um die übergebene Farbe in eine oklch() Farbe mit einem Alpha-Kanal gleich dem übergebenen Alpha-Wert zu transformieren; dies wird das result der Funktion:

css

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

Als nächstes definieren wir mit einer benutzerdefinierten Eigenschaft --base-color den Wert #faa6ff auf dem :root Element. Wir weisen diese Eigenschaft dem Wert der border Farbe des <p> Elements zu und setzen dann den Wert des background-color, damit er einer transparenten Version derselben Farbe entspricht. Dies wird durchgeführt, indem der Wert auf die <dashed-function>-Syntax festgelegt wird, die die --transparent() Funktion angibt und 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);
}