Catégories
Plugin et site web

Comment les variables CSS peuvent améliorer l'efficacité et la cohérence

La répétition de code est l'un des aspects les plus frustrants du CSS. Devoir taper les mêmes valeurs de propriété à plusieurs reprises dans une feuille de style prend du temps. Et lorsque vous apportez des modifications en cours de route, il est trop facile de manquer une valeur.

Le résultat est une conception incohérente. Des choses comme les couleurs, la vitesse d'animation et l'espacement des éléments peuvent varier – tout simplement parce qu'un concepteur n'a pas saisi chaque occurrence. Ainsi, l'expérience utilisateur est mise à mal.

Les variables CSS (a.k.a. Custom Properties) sont un excellent moyen de lutter contre ces problèmes. Pourtant, tous les concepteurs ne connaissent pas cette technique simple. Aujourd'hui, nous allons vous faire découvrir rapidement ce qu’ils sont et ce qu’ils font. Creusons!

La boîte à outils du concepteur Web

Téléchargements illimités: 1 000 000+ modèles Web, thèmes, plugins, éléments de conception et bien plus encore!

Définissez une valeur une fois, utilisez-la partout

Ceux qui connaissent les langages de programmation tels que PHP et JavaScript peuvent reconnaître le terme «variable». Une variable définit une valeur (statique ou dynamique) qui peut être récupérée ultérieurement dans un script. Par exemple, une variable PHP appelée $user_first_name peut être utilisé pour récupérer le prénom d'un utilisateur connecté à afficher sur une page.

De même, les variables CSS sont là pour répéter une valeur dans une feuille de style. Au strict minimum, cela nous évite de taper plusieurs fois une famille de polices ou un code de couleur hexadécimal.

Vous pouvez également reconnaître des variables de préprocesseurs CSS comme Sass. Là, les variables ont essentiellement le même objectif (bien que la syntaxe soit en effet différente). Cependant, ils ne sont pas natifs de CSS. Cela signifie que le préprocesseur doit convertir une variable en CSS valide.

Les variables CSS sont une solution native. Ils vous éviteront d'avoir à utiliser un préprocesseur, sauf si vous le souhaitez vraiment. Désormais, n'importe quelle feuille de style peut profiter de cette fonctionnalité pratique.

Et vous ne devriez pas avoir à vous soucier de la prise en charge du navigateur – avec une mise en garde. Chaque navigateur moderne prend en charge les variables CSS depuis un certain temps. Mais si vous ciblez toujours des utilisateurs d'Internet Explorer, une solution de rechange sera nécessaire. C'est une considération, mais tout le monde est prêt à partir.

Un exemple de base d'une variable CSS

La couleur est l'une des propriétés qui se répètent souvent dans une feuille de style. Par exemple, vous pouvez utiliser la même couleur pour des en-têtes spécifiques, des arrière-plans de conteneurs, des boutons et plus encore. L'utilisation d'une variable CSS ici rend la tâche d'attribution et de modification d'une valeur beaucoup plus efficace.

Prenons l'exemple de la couleur bleue emblématique de Speckyboy. Tout d'abord, nous allons configurer une variable dans notre feuille de style:

:root {
--speckyboy-blue: #4F78A4;
}

Le nom de la variable, --speckyboy-blue, est défini sur un code de couleur hexadécimal. À partir de là, il s'agit d'appeler la variable pour chaque instance où nous voulons utiliser cette jolie nuance de bleu.

Si nous voulions l'utiliser comme couleur de texte sur un élément de notre feuille de style, la syntaxe ressemblerait à ceci:

color: var(--speckyboy-blue);

L'exemple suivant montre comment la variable peut être utilisée à plusieurs endroits. Pour faire bonne mesure, nous avons également ajouté une autre variable pour notre valeur de marge supérieure et inférieure afin de maintenir un espacement constant tout au long de notre conception.

Voir le stylo
Variable CSS de base par Eric Karkovack

Les changements futurs seront désormais beaucoup plus faciles. En raison des variables CSS de l'extrait ci-dessus, il ne nous reste plus qu'à modifier la couleur hexadécimale de --speckyboy-blue ou la valeur en pixels de --vmargin. Ces valeurs se répercuteront en cascade sur chaque instance de notre feuille de style.

Ressources variables CSS

Notre exemple ne fait qu'effleurer la surface de ce qui est possible avec les variables CSS. Il vaut la peine de creuser un peu plus pour voir comment il peut être utilisé dans des scénarios plus avancés. Les ressources ci-dessous sont un excellent endroit pour en savoir plus:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *