Variables

Utiliser des variables (aussi appelées propriétés personnalisées CSS custom properties en anglais) évite d’avoir à copier/coller des valeurs partout dans le CSS et simplifie le développement, ce qui les rend très populaires.

Définir

Pour définir une variable:

:root {
  --logo-color: blue;
}
header {
  --logo-color: red;
}

On peut également lire et modifier la valeur d’une variable CSS en JS:

function readCssVar(element, varName){
  const elementStyles = getComputedStyle(element);
  return elementStyles.getPropertyValue(`--${varName}`).trim();
}

function writeCssVar(element, varName, value){
  return element.style.setProperty(`--${varName}`, value);
}

Utiliser

Pour utiliser une variable:

header {
  color: val(--logo-color);

  /* 10px is used because --box-margin is not defined. */
  margin: var(--box-margin, 10px);

  /* The --content-padding variable is used if --box-padding is not defined. */
  padding: var(--box-padding, var(--content-padding));
}

Vérifier le support

En CSS:

@supports (--a: 0) {
  body {
    color: --nomVar;
  }
}

En JS:

const isSupported = window.CSS &&
    window.CSS.supports && window.CSS.supports('--a', 0);

Variables CSS vs préprocesseur

Quand on utilise une préprocesseur, on peut également définir des variables. Cependant
- on ne peut pas changer les valeurs des variables dynamiquement
- elles ne peuvent pas être lues ou modifiés à partir de JavaScript
- elles ne dépendent pas du DOM

This site is open source. Improve this page.