Rendez votre CSS dynamique avec les propriétés personnalisées CSS

Si vous écrivez du CSS depuis un certain temps, vous devez avoir ressenti à un moment donné le besoin de variables. Les propriétés personnalisées CSS ressemblent un peu à la propre implémentation des variables CSS. Cependant, lorsqu'ils sont utilisés correctement, ils peuvent être bien plus que de simples variables.

Les propriétés personnalisées CSS vous permettent de :

• Attribuez des valeurs arbitraires à une propriété avec un nom de votre choix
• Utilisez la fonction var() pour utiliser ces valeurs dans d'autres propriétés

Bien que la prise en charge des propriétés personnalisées CSS soit un peu difficile pour le moment, et que certains navigateurs les prennent en charge sous des drapeaux qui doivent être activés ou définis sur true au préalable, leur prise en charge devrait augmenter considérablement à l'avenir, il est donc important de comprendre comment les utiliser et les exploiter. ¹

Dans cet article, vous apprendrez comment vous pouvez utiliser les propriétés personnalisées CSS pour rendre vos feuilles de style un peu plus dynamiques, rendant peut-être obsolète cette étape Sass/LESS supplémentaire dans votre pipeline de ressources.

La variable CSS originale et moins puissante

Avant de commencer à discuter des propriétés personnalisées CSS, il convient de noter que depuis longtemps, CSS a une sorte de variable, et c'est le mot-clé currentColor . Cette variable rarement utilisée mais largement prise en charge fait référence à la valeur de couleur actuelle d'un élément. Il peut être utilisé sur n'importe quelle déclaration qui accepte une valeur de color , et il cascade parfaitement.

Prenons un exemple :

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

En plus de la cascade, cela peut également produire ce qui suit :

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

Le principal problème avec currentColor , mis à part le fait qu'il ne figurait pas dans la spécification en tant que variable en soi, est qu'il n'accepte que la valeur de la propriété color , ce qui peut rendre difficile le travail avec dans certains cas.

Variables CSS à part entière

L'un des principaux avantages de l'utilisation des pré/post-processeurs CSS est qu'ils permettent de stocker des valeurs dans un mot-clé et de les limiter à un certain sélecteur si nécessaire.

Après avoir été longuement sollicité par les développeurs, un projet d'interprétation des variables natives pour CSS a été rédigé. Celles-ci sont formellement appelées propriétés personnalisées CSS, mais sont également parfois appelées variables CSS.

La spécification actuelle des propriétés personnalisées CSS natives couvre tous les mêmes comportements que les variables pré/postprocesseur. Cela vous permet de stocker des codes de couleur, des tailles avec toutes les unités connues ou simplement des nombres entiers si nécessaire (par exemple, lorsque vous devez utiliser le même diviseur ou multiplicateur).

La syntaxe des propriétés personnalisées CSS est un peu étrange par rapport à d'autres langages, mais cela a beaucoup de sens si vous comparez leur syntaxe avec d'autres fonctionnalités du même écosystème CSS :

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

Maintenant, vous pensez peut-être : "Quel genre de syntaxe est-ce ! ?"

Eh bien, Léa Verou explique la raison de cette syntaxe "tiret-tiret" avec une simplicité absolue, comme elle le dit dans son incroyable conférence, CSS Variables: var(–subtitle):

Ils fonctionnent exactement de la même manière que n'importe quelle autre propriété CSS […]. Tant de gens me demandent pourquoi nous n'avons pas utilisé de dollar [signe] ou quelque chose comme ça et la raison pour laquelle nous n'avons pas utilisé de dollar [signe] est que nous voulons que les gens puissent utiliser à la fois SASS, ou des variables de préprocesseur et Variables CSS. Ce sont deux choses différentes, ils accomplissent des objectifs différents, il y a des choses que vous pouvez faire avec les variables CSS que vous ne pouvez absolument pas avec SASS, et il y a des choses que vous pouvez faire avec les variables SASS que vous ne pouvez pas faire avec les variables CSS, donc nous voulons les gens puissent utiliser les deux dans la même feuille de style, vous pouvez donc imaginer la syntaxe tiret-tiret comme une propriété de préfixe avec un préfixe vide.

Nous pouvons récupérer la valeur de la propriété personnalisée à l'aide de la fonction var() , que nous pouvons utiliser partout sauf pour les sélecteurs, les noms de propriété ou les déclarations de requête multimédia.

Il convient de noter que si les variables pré/postprocesseur ne sont utilisées qu'au moment de la compilation, les variables CSS peuvent être utilisées et mises à jour dynamiquement. Qu'est-ce que ça veut dire? Cela signifie qu'ils sont conservés dans la feuille de style CSS actuelle. Ainsi, la notion qu'il s'agit de variables restera même après la compilation des feuilles de style.

Pour que ce soit plus clair, permettez-moi d'illustrer la situation à l'aide de quelques exemples. Le bloc de code suivant fait partie d'une feuille de style SASS :

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

Cet extrait de déclarations et de règles SASS se compile en CSS comme suit :

 .corners { border-radius: 30px; }

Vous pouvez voir que les propriétés à l'intérieur :root et la requête media sont perdues après la compilation, car les variables SASS ne peuvent pas exister dans un fichier CSS (ou, pour être plus précis, elles peuvent être forcées à exister dans un fichier CSS, mais sont ignorées car certaines de leurs syntaxes sont des CSS invalides), de sorte que la valeur de la variable ne peut pas être mise à jour par la suite.

Considérons maintenant le même cas, mais appliqué en utilisant uniquement des variables CSS sans pré/post-processeur CSS appliqué (c'est-à-dire sans qu'aucune transpilation ou compilation ne soit effectuée) :

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

Évidemment, rien ne change puisque nous n'avons rien compilé/transpilé, et la valeur de la propriété personnalisée peut être mise à jour dynamiquement. Ainsi, par exemple, si nous modifions la valeur de --value en utilisant quelque chose comme JavaScript, la valeur sera mise à jour à chaque fois qu'elle est appelée à l'aide de la fonction var().

Les capacités des propriétés personnalisées rendent cette fonctionnalité si puissante que vous pouvez même faire des choses comme le préfixage automatique.

Léa Verou donne l'exemple en utilisant la propriété clip-path . Nous commençons par définir la valeur de la propriété que nous voulons préfixer sur initial mais utilisons une propriété personnalisée, puis nous procédons à la définition de la valeur de chaque propriété préfixée sur la valeur de la propriété personnalisée :

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

Après cela, il ne reste plus qu'à modifier la valeur de la propriété personnalisée dans un sélecteur :

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

Si vous souhaitez en savoir un peu plus à ce sujet, consultez l'article complet de Lea sur le préfixage automatique avec des variables CSS.

Propriétés personnalisées CSS à l'épreuve des balles

Comme cela a été mentionné, la prise en charge des navigateurs pour les propriétés personnalisées CSS est encore largement non standard. Alors, comment cela peut-il être surmonté?

C'est là que PostCSS et son plugin, postcss-css-variables, entrent en jeu.

Au cas où vous vous demanderiez ce qu'est PostCSS, consultez mon article PostCSS : la nouvelle date de lecture de SASS, et revenez-y une fois que vous avez terminé. Vous aurez alors une idée de base de ce que vous pouvez faire avec cet outil étonnant et ne vous sentirez pas désorienté en lisant le reste de l'article.

Avec le postcss-css-variables et son option preserve définie sur true, nous pouvons conserver toutes les déclarations de fonction var() dans la sortie et avoir la valeur calculée comme déclaration de secours. Il conserve également les déclarations --var calculées. Gardez à l'esprit qu'en utilisant ce plugin PostCSS, les propriétés personnalisées peuvent être mises à jour dynamiquement après le processus de transpilation, mais les valeurs de secours resteront les mêmes à moins qu'elles ne soient spécifiquement ciblées et explicitement modifiées individuellement.

Si vous recherchez un moyen d'utiliser les variables CSS sans pré/post-processeur, vous pouvez toujours vérifier manuellement la prise en charge actuelle avec la règle CSS @support et appliquer une solution de secours appropriée lorsque la prise en charge est inégale ou inexistante. Par exemple:

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

Modification de la valeur d'une propriété personnalisée à l'aide de JavaScript

J'ai mentionné tout au long de cet article que les variables peuvent être mises à jour à l'aide de JavaScript, alors allons-y.

Supposons que vous ayez un thème clair et que vous souhaitiez le basculer vers un thème sombre, en supposant que vous ayez un CSS comme celui-ci :

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

Vous pouvez mettre à jour les propriétés personnalisées --text-color et --background-color en procédant comme suit :

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

Cas d'utilisation intéressants

Au fil des années de développement et de discussion concernant les spécifications des propriétés personnalisées CSS, des cas d'utilisation intéressants ont émergé. Voici quelques exemples:

Thématisation : L'utilisation d'un ensemble de thèmes pour un site est plutôt facile lors de l'implémentation de variables CSS. Envie d'une variation claire ou foncée de votre style actuel ? Modifiez simplement la valeur de certaines propriétés personnalisées à l'aide de JavaScript et vous avez terminé.

Ajustement de l' espacement : besoin d'ajuster l'espacement d'un site, par exemple une gouttière entre les colonnes ? Modifiez la valeur d'une seule variable CSS et voyez ce changement se répercuter sur l'ensemble du site.

Fonctions calc() entièrement dynamiques : vous pouvez désormais disposer de fonctions calc() entièrement dynamiques en utilisant des propriétés personnalisées à l'intérieur de ces fonctions, ce qui élimine le besoin d'effectuer des calculs compliqués ou éphémères dans JavaScript, puis de mettre à jour ces valeurs manuellement sur chaque instance.

Donnez un nouveau souffle à vos fichiers CSS

Les propriétés personnalisées CSS sont un moyen puissant et innovant de donner plus de vie à vos feuilles de style, en introduisant des valeurs complètement dynamiques pour la première fois en CSS.

La spécification est actuellement sous le statut de recommandation candidate, ce qui signifie que la normalisation est imminente, une bonne raison de plonger profondément dans cette fonctionnalité et d'en tirer le meilleur parti.