param() CSS-Funktion
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 erfolgen.
Syntax
/* a single value */
param(--color, red);
/* multiple values */
param(--color1, red),
param(--color2, blue),
param(--color3, green);
Werte
-
- Ein
<dashed-ident>ist eine benutzerdefinierte Variable, die als Identifikator in derenv()CSS-Funktion verwendet wird, um den Wert zu aktualisieren.
- Ein
-
<declaration_value>Optional- : Ein
<declaration_value>ist der Wert des zu aktualisierenden Attributs. Wenn der<declaration-value>weggelassen wird, stellt er einen leeren Wert dar.
- : Ein
Formale Definition
Wert in der Datenbank nicht gefunden!Beispiele
Alle folgenden Beispiele verwenden die gleiche SVG-Datei, welche Attribute mit der env() CSS-Funktion festgelegt hat.
<!-- 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.
<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>
.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 der param() in den URL-Modifikator
In diesem Beispiel werden die SVG-Attribute aktualisiert, indem die param() Funktion in das URL-Fragment des src Attributs des <img> HTML-Elements übergeben wird.
<img
src="square.svg#param(--color1, slategrey)¶m(--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 aktualisiert, indem die param() Funktion in den url() Datentyp der background-image CSS-Eigenschaft übergeben wird.
.foo {
background-image: url(
"square.svg"
param(--color1, slategrey),
param(--color2, lightgrey)
);
}
