Variables CSS

Un petit point sur les variables CSS, qui sont « officiellement » devenues un brouillon de travail au W3C en avril dernier.

Quel est le but des variables CSS ? Permettre de déclarer en un unique endroit la valeur d'une propriété CSS comme une couleur afin de pouvoir ensuite l'utiliser dans différente règles. Cela facilite ainsi la maintenance des feuilles de styles, surtout lorsque celles-ci atteignent plusieurs centaines de lignes.

Comment utilise-t-on les variables ? Une variable est défini comme n'importe quelle propriété CSS, le nom devant être préfixé par var-. La déclaration se fait à l'intérieur d'un bloc qui précise dans quel contexte la variable doit être utilisée. Pour qu'une variable puisse être appliquée partout, on la déclare dans un bloc appliqué à la pseudo-classe :root qui cible la racine du document, soit l'élément html dans une page web. La valeur d'une variable peut être tout type de valeur CSS.

/* Déclaration d'une variable */
:root {
    var-header-color: #06c;
}

/* Utilisation de la variable */
h1 { 
    background-color: var(header-color); 
}
Exemple de décrlaration et d'utilisation de variables CSS.

Une solution simple et élégante, même si elle ne satisfait pas tout le monde.

MACPHERSON, Luke ; ATKINS, Tab ; GLAZMAN, Daniel. CSS Variables Module Level 1. W3C,