<dashed-function>: CSS eigene Funktionen

Limited availability

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

Der <dashed-function> CSS Datentyp repräsentiert die Syntax, die verwendet wird, um CSS eigene Funktionen aufzurufen, welche mithilfe 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 normalen CSS-Property-Werten oder Komponenten von Property-Werten verwenden, in Fällen, in denen Sie die Werte basierend auf Funktionslogik dynamisch 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 ({ }) einschließen.

Beispiele

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

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-eigene Funktion. Die Funktion heißt --transparent und akzeptiert zwei Parameter: eine Farbe und einen numerischen Alphakanalwert. Im Funktionskörper verwenden wir die relative Farbsyntax, um die übergebene Farbe in eine oklch() Farbe mit einem Alphakanal umzuwandeln, der dem übergebenen Alphawert entspricht; dies wird zum 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 eigene Property mit einem Wert von #faa6ff auf dem :root Element. Wir weisen diese Property dem Wert der border Farbe des <p> Elements zu und setzen dann den Wert der background-color, um eine transparente Version derselben Farbe zu entsprechen. Dies wird erreicht, indem der Wert der <dashed-function> Syntax entspricht, die die --transparent() Funktion spezifiziert und Argumente von 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);
}