CSS-Funktion `param()`

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

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

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 benutzerdefinierte Variable, die als Bezeichner in der CSS-Funktion env() verwendet wird, um den Wert zu aktualisieren.
<declaration_value> Optional: Ein <declaration_value> ist der Wert des zu aktualisierenden Attributs. Wenn <declaration-value> weggelassen wird, stellt es einen leeren Wert dar.

Formale Definition

Wert in der Datenbank nicht gefunden!

Beispiele

Alle folgenden Beispiele verwenden dieselbe SVG-Datei, deren Attribute mit der CSS-Funktion env() festgelegt sind.

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 Eigenschaft `link-parameters`

In diesem Beispiel werden die SVG-Attribute mit der CSS-Eigenschaft link-parameters und der Funktion param() 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()` an den URL-Modifikator

In diesem Beispiel werden die SVG-Attribute aktualisiert, indem die Funktion param() an das URL-Fragment des Attributs src des HTML-Elements <img> übergeben wird.

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 Eigenschaft `background-image`

In diesem Beispiel werden die SVG-Attribute aktualisiert, indem die Funktion param() an den Datentyp url() der CSS-Eigenschaft background-image übergeben wird.

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

CSS-Funktion param()

Help improve MDN

CSS-Funktion `param()`