Fonction CSS `param()`

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 fonction CSS param() est utilisée pour définir des paramètres de lien. Cela peut être fait en utilisant la propriété CSS link-parameters, dans le fragment URL d'une ressource externe, ou dans un <url-modifier> de la fonction CSS url().

Syntaxe

css

/* Une seule valeur */
param(--color, red);

/* Plusieurs valeurs */
param(--color1, red),
param(--color2, blue),
param(--color3, green);

Valeurs

<dashed-ident>: Un identifiant avec tiret (<dashed-ident>) est une variable définie par l'utilisateur·ice qui est utilisée comme identifiant dans la fonction CSS env() pour mettre à jour la valeur.
<declaration_value> Facultatif: Une valeur <declaration_value> est la valeur de l'attribut mis à jour. Si la <declaration_value> est omise, elle représente une valeur vide.

Définition formelle

Valeur introuvable dans la base de données

Exemples

Tous les exemples suivants utilisent le même fichier SVG, qui a des attributs définis avec la fonction CSS env().

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>

Utiliser la propriété `link-parameters`

Dans cet exemple, les attributs SVG sont mis à jour avec la propriété CSS link-parameters et la fonction param().

html

<div class="carres">
  <img
    class="origine"
    src="square.svg"
    alt="Un carré avec une bordure chartreuse et un remplissage vert foncé." />
  <img
    class="greyscale"
    src="square.svg"
    alt="Un carré avec une bordure gris ardoise et un remplissage gris clair." />
  <img
    class="high-contrast"
    src="square.svg"
    alt="Un carré avec une bordure fuchsia et un remplissage jaune." />
</div>

.carres {
  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);
  }
}

Passer `param()` dans le modificateur d'URL

Dans cet exemple, les attributs SVG sont mis à jour en passant la fonction param() dans le fragment d'URL de l'attribut src de l'élément HTML <img>.

html

<img
  src="square.svg#param(--color1, slategrey)&param(--color2, lightgrey)"
  alt="Un carré avec une bordure gris ardoise et un remplissage gris clair."
/>

Utiliser `param()` avec la propriété `background-image`

Dans cet exemple, les attributs SVG sont mis à jour en passant la fonction param() dans le type de données url() de la propriété CSS background-image.

css

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

Spécifications

Spécification
CSS Linked Parameters Module Level 1 # funcdef-param

Compatibilité des navigateurs

Voir aussi

La propriété link-parameters
La fonction env()

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 18 août 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Fonction CSS param()

Aider à améliorer MDN

Fonction CSS `param()`