Propriété CSS link-parameters
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété CSS link-parameters permet de définir les valeurs des ressources externes, telles que les SVG, dont les attributs ont été définis avec la fonction CSS env().
Syntaxe
css
/* Une seule valeur */
link-parameters: param(--color, red);
/* Plusieurs valeurs */
link-parameters:
param(--color1, red),
param(--color2, blue),
param(--color3, green);
Valeurs
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments, ainsi que les pseudo-éléments ::before et ::after |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Exemples
Mettre à jour les couleurs d'un fichier SVG externe
Dans cet exemple, le SVG original, à gauche, est un carré avec l'attribut stroke défini avec env(--couleur1, chartreuse) et l'attribut fill défini avec env(--couleur2, darkgreen). La propriété link-parameters est utilisée pour mettre à jour ces deux attributs sur le carré mis à jour, à droite, avec plusieurs fonctions CSS param().
html
<div class="carres">
<img
class="original"
src="square.svg"
alt="Un carré avec une bordure chartreuse et un remplissage vert foncé." />
<img
class="mis-a-jour"
src="square.svg"
alt="Un carré avec une bordure rouge et un remplissage tomate." />
</div>
css
.mis-a-jour {
link-parameters:
param(--couleur1, red),
param(--couleur2, tomato);
}
Spécifications
| Spécification |
|---|
| CSS Linked Parameters Module Level 1 # propdef-link-parameters |