Variables CSS

(ou de leur vrai nom Custom Properties)

• Avantages
  • Dynamiques et modifiables après le chargement de la page
  • Modifiables dans un scope "enfant" (chose qu'on ne peut pas faire en LESS)
  • Récupérables et modifiables en JS
• Inconvénients
  • Pas possible d'attacher une unité (ex: px) à la variable lors de son utilisation, il faut soit mettre l'unité dans la variable, soit utiliser calc()
  • La cible d'une media query ne peut pas être variabilisée

Idées d'utilisation

Utilisation en tant que booléen

--xs-width: var(--media-xs) 100%;
--sm-width: var(--media-sm) 49%;
width: var(--xs-width, var(--sm-width, var(--md-width, var(--lg-width))));

Par défaut la valeur du booléen va être à initial, pour rendre la valeur invalide par défaut :

html {
  --media-xs: initial;
}

Et la media query va actionner le booléen en mettant un espace, ce qui rend la deuxième propriété valide

@media (max-width: 37.499em) {
  html {
    --media-xs: ;
  }
}

Attention à la minification du css qui peut enlever les espaces par défaut !

Réduire les animations

(Source : Implementing a reduced-motion mode)

Avec prefers-reduced-motion

:root {
  --duration: 1;
}

.myElt {
  transition: transform calc(var(--duration) * 250ms);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0;
  }
}

Autres utilisations

• Standardisation du style de focus, cf snippet