CSS custom properties (propriétés CSS personnalisées)

🏠 Accueil blog » Articles CSS
  1. Introduction
  2. Les propriétés personnalisées : comment ça marche ?
    1. Fonction var()
    2. Pseudo-classe :root
    3. currentcolor
  3. Exemples d'utilisation
  4. Aller plus loin

NB: Il existe un bug sur Edge 15 avec les pseudo-élements (::before,::after, ::selection...). Il peut y avoir des comportements inattendus. Par exemple, si vous appliquez un fond avec une propriété personnalisée sur un pseudo-élément, ne vous étonnez pas si le fond s'étale sur l'ensemble de la boîte.

👉 Introduction :

Les variables CSS ou CSS custom properties ou encore propriétés CSS personnalisées (pour ne fâcher personne), permettent la déclaration et l'utilisation de variables en cascade dans une feuille de style. Concrètement, que cela signifie t-il ?

Grâce aux propriétés CSS personnalisées (on les nommera ainsi tout au long de l'article) il vous sera possible de mieux gérer votre code, de l'alléger mais surtout celui-ci gagnera en lisibilité et en maintenabilité. Cela va s'avérer d'autant plus vrai pour un site web de grande envergure.

Le principe est plutôt simple, mais risque de déboussoler les amateurs de Sass , Less ou autres pré-processeurs.


👉 Les propriétés personnalisées : comment ça marche ?

Dans un premier temps, sachez que les propriétés personnalisées reposent sur le même fonctionnement que les propriétés CSS classiques. Les notions de cascade et d'héritage (modèle parent-enfant) sont toujours prises en compte. Jusque là, rien de nouveau.

Concrètement, une propriété personnalisée va nous permettre de donner une valeur et de lire la valeur déclarée à l'intérieur de la propriété. Vous pouvez donner le nom que vous souhaitez à votre propriété, mais cela ne peut pas être le nom d'une propriété. Attention toutefois, les propriétés personnalisées sont sensibles à la casse.

La syntaxe, à première vue, peut s'avérer déroutante pour certains :


p {
  --primary-color: red;
}
p a {
  color: var(--primary-color);
}

Dans ce code, nous avons utilisé dans l'élément <p> un double tiret (pour éviter la confusion avec les préfixes comme -webkit-transition par exemple), puis déclaré notre propriété personnalisée primary-color.

Fonction var()

Par la suite, entre en action la fonction var() définie dans le premier module des propriétés personnalisées. On déclare enfin notre propriété via cette fonction. L'élément <a> prendra la valeur de la propriété personnalisée (rouge dans l'exemple).

Il est possible de déclarer dans la fonction var() une valeur de recours (un fallback) qui est utilisée au cas où la valeur de substitution par la propriété ne serait pas définie.


p {
  color: var(--primary-color, red);
}


Pseudo-classe :root

Il s'agit de l'élément racine. Cette pseudo-classe a pour fonction, dans un document HTML, de cibler l'élément <html>. C'est en quelque sorte l'équivalent du sélecteur html mais d'un niveau supérieur. En utilisant les propriétés personnalisées, vous aurez sans doute l'occasion de la déclarer.

Elle se présente sous cette forme :


:root {
  --main-color: red;
}
h1 {
  color: var(--main-color);
}

/*un autre exemple plus construit*/
:root {
--main-color:black;
--fontsize: 1rem;
--p-color:red;
--margin-paragraphe:10px;
--grid-width:25%;
}
header,footer{background:linear-gradient(to bottom,var(--main-color),white)}

.block{display:flex;width:var(--grid-width)}

.block p {
margin: var(--margin-paragraphe, 10px);
font-size: calc(var(--fontsize)*1.5);
}

 
p a{color:var(--p-color)}

p a:hover{--p-color:blue}

A tout moment, il vous est possible de réinitialiser vos valeurs avec le mot-clé initial :


.class {
--main-color: initial
}


currentcolor (ou currentColor) : première variable CSS

Ce mot-clé, représentant la valeur calculée de la propriété color , est très pratique dans certaines situations. Il s'agit de l'équivalent de la valeur inherit qui permet l'héritage d'un élément parent. Mais contrairement à celle dernière, la valeur currentcolor peut être utilisée sur n'importe quelle propriété CSS.

Exemple concret de la valeur currentcolor :


body{color:#333}
a{
color:currentcolor;
border-bottom:1px solid
}     
/*le lien prendra la couleur renseignee dans le body (pour info, la couleur de la bordure aussi)*/

👉 Exemples d'utilisation :

Les propriétés personnalisées vont être particulièrement utiles dans certains cas :

  1. Mettre en place différents thèmes de couleur
  2. Regrouper les animations CSS . Voir une démonstration sur ce blog.
  3. SVG
  4. Grid Layouts
  5. Facilité d'emploi avec JavaScript
  6. Calculs des valeurs avec la fonction calc()
  7. ...

👉 Source, inspiration, ressources :

Compatibilité des propriétés personnalisées.

Article sur currentcolor (FR)

Article sur les propriétés personnalisées sur MDN (FR)

Autre article (FR)

Article en anglais sur le sujet

Autre article intéressant en anglais

Expériences/réflexions avec les propriétés personnalisées (EN)

Propriétés personnalisées sur SVG.

Utilisation intéressante des propriétés personnalisées (EN)