<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 CSS benutzerdefinierte Funktionen aufzurufen, welche mit der @function 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-Werte oder Komponenten von Eigenschaftswerten einfügen, in Fällen, in denen Sie die Werte dynamisch basierend auf der Funktionslogik berechnen möchten, anstatt statische Werte anzugeben.

In Fällen, in denen Sie Kommata-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 benutzerdefinierten Funktionen.

Grundlegende `<dashed-function>` Verwendung

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

HTML

Die Markup-Struktur enthält ein <p> mit etwas Textinhalt:

html

<p>Some content</p>

CSS

In unseren Styles definieren wir zuerst die CSS benutzerdefinierte Funktion. Die Funktion heißt --transparent und akzeptiert zwei Parameter: 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, der dem übergebenen Alpha-Wert entspricht, 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 eine --base-color benutzerdefinierte Eigenschaft mit einem Wert von #faa6ff auf dem :root Element. Wir weisen dieser Eigenschaft zu, der Wert der border-Farbe des <p> Elements zu sein, und setzen dann den background-color Wert, um einer transparenten Version derselben Farbe zu entsprechen. Dies wird durch Setzen des Wertes auf die <dashed-function> Syntax erreicht, indem die --transparent() Funktion spezifiziert wird und ihr die Argumente var(--base-color) und 0.8 übergeben werden.

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