`param()` CSS-Funktion

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

Die param() CSS Funktion wird verwendet, um Link-Parameter festzulegen. Dies kann mit der link-parameters CSS-Funktion, im Fragment-URL einer externen Ressource oder im <url-modifier> der url() CSS-Funktion geschehen.

Syntax

css

/* a single value */
param(--color, red);

/* multiple values */
param(--color1, red),
param(--color2, blue),
param(--color3, green);

Werte

<dashed-ident>
- Ein <dashed-ident> ist eine vom Benutzer definierte Variable, die als Bezeichner in der env() CSS-Funktion verwendet wird, um den Wert zu aktualisieren.
<declaration_value> Optional
- : Ein <declaration_value> ist der Wert des Attributs, das aktualisiert wird. Wenn der <declaration-value> weggelassen wird, stellt er einen leeren Wert dar.

Formale Definition

Wert in der Datenbank nicht gefunden!

Beispiele

Alle folgenden Beispiele verwenden dieselbe SVG-Datei, die Attribute mit der env() CSS-Funktion gesetzt hat.

svg

<!-- example of the code in the external SVG file -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect
    width="100"
    height="100"
    stroke="env(--color1, chartreuse)"
    stroke-width="10"
    fill="env(--color2, darkgreen)"
   />
</svg>

Verwendung der `link-parameters` Eigenschaft

In diesem Beispiel werden die SVG-Attribute mit der link-parameters CSS-Eigenschaft und der param() Funktion aktualisiert.

html

<div class="squares">
  <img
    class="original"
    src="square.svg"
    alt="A square with a chartreuse border and a dark green fill." />
  <img
    class="greyscale"
    src="square.svg"
    alt="A square with a slate grey border and a light grey fill." />
  <img
    class="high-contrast"
    src="square.svg"
    alt="A square with a fuchsia border and a yellow fill." />
</div>

.squares {
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
img {
  height: 100%;
}

css

.greyscale {
  link-parameters:
    param(--color1, slategrey),
    param(--color2, lightgrey);
  &:hover {
    link-parameters:
      param(--color1, lightgrey),
      param(--color2, slategrey);
  }
}
.high-contrast {
  link-parameters:
    param(--color1, fuchsia),
    param(--color2, yellow);
  &:hover {
    link-parameters:
      param(--color1, yellow),
      param(--color2, fuchsia);
  }
}

Übergabe von `param()` in den URL-Modifizierer

In diesem Beispiel werden die SVG-Attribute durch Übergabe der param() Funktion in das URL-Fragment des src Attributs des <img> HTML-Elements aktualisiert.

html

<img
  src="square.svg#param(--color1, slategrey)&param(--color2, lightgrey)"
  alt="A square with a slate grey border and a light grey fill."
/>

Verwendung von `param()` mit der `background-image` Eigenschaft

In diesem Beispiel werden die SVG-Attribute durch Übergabe der param() Funktion in den url() Datentyp der background-image CSS-Eigenschaft aktualisiert.

css

.foo {
  background-image: url(
    "square.svg"
    param(--color1, slategrey),
    param(--color2, lightgrey)
  );
}

Spezifikationen

Spezifikation
CSS Linked Parameters Module Level 1 # funcdef-param

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

param() CSS-Funktion

Help improve MDN

`param()` CSS-Funktion