Apprenez les variables CSS en 5 minutes - Un tutoriel pour les débutants

Les propriétés personnalisées CSS (également appelées variables) sont une grande victoire pour les développeurs frontaux. Il apporte la puissance des variables au CSS, ce qui se traduit par moins de répétition, une meilleure lisibilité et plus de flexibilité.

De plus, contrairement aux variables des préprocesseurs CSS, les variables CSS font en fait partie du DOM, ce qui présente de nombreux avantages. Ils ressemblent donc essentiellement aux variables SASS et LESS sur les stéroïdes. Dans cet article, je vais vous donner un cours intensif sur le fonctionnement de cette nouvelle technologie.

J'ai également créé un cours gratuit et interactif en 8 parties sur les variables CSS, alors jetez-y un œil si vous souhaitez devenir un expert sur ce sujet.

Vous voulez apprendre les variables CSS? Voici mon cours gratuit en 8 parties!

Pourquoi apprendre les variables CSS?

Il existe de nombreuses raisons d'utiliser des variables en CSS. L'un des plus convaincants est qu'il réduit la répétition dans votre feuille de style.

Dans l'exemple ci-dessus, il est beaucoup mieux de créer une variable pour la #ffeeadcouleur que de la répéter comme nous le faisons ici:

Non seulement cela rendra votre code plus facile à lire, mais cela vous donnera également plus de flexibilité, au cas où vous voudriez changer cette couleur.

Cela est en effet possible avec les variables SASS et LESS depuis des années. Cependant, les variables CSS présentent quelques avantages importants.

  1. Ils ne nécessitent aucun transpilage pour fonctionner, car ils sont natifs du navigateur. Vous n'avez donc besoin d'aucune configuration pour commencer, comme vous le faites avec SASS et LESS.
  2. Ils vivent dans le DOM, ce qui ouvre une tonne d'avantages, que je vais parcourir dans cet article et dans mon prochain cours.

Commençons maintenant à apprendre les variables CSS!

Déclaration de votre première variable CSS

Pour déclarer une variable, vous devez d'abord décider dans quelle portée la variable doit vivre. Si vous voulez qu'elle soit disponible globalement, définissez-la simplement sur la :rootpseudo-classe. Il correspond à l'élément racine de votre arborescence de documents (généralement la balise).

Comme les variables sont héritées, cela rendra votre variable disponible dans toute votre application, car tous vos éléments DOM sont des descendants de la balise.

:root { --main-color: #ff6f69; } 

Comme vous pouvez le voir, vous déclarez une variable de la même manière que vous définissez n'importe quelle propriété CSS. Cependant, la variable doit commencer par deux tirets.

Pour accéder à une variable, vous devez utiliser la var()fonction, et passer le nom de la variable comme paramètre.

#title { color: var(--main-color); } 

Et cela donnera à votre titre la #f6f69couleur:

Déclaration d'une variable locale

Vous pouvez également créer des variables locales, qui ne sont accessibles qu'à l'élément dans lequel il est déclaré et à ses enfants. Cela a du sens à faire si vous savez qu'une variable ne sera utilisée que dans une partie (ou des parties) spécifique de votre application.

Par exemple, vous pouvez avoir une boîte d'alerte qui utilise un type de couleur spécial qui n'est pas utilisé ailleurs dans l'application. Dans ce cas, il peut être judicieux d'éviter de le placer dans la portée globale:

.alert { --alert-color: #ff6f69; } 

Cette variable peut désormais être utilisée par ses enfants:

.alert p { color: var(--alert-color); border: 1px solid var(--alert-color); } 

Si vous avez essayé d'utiliser la alert-colorvariable ailleurs dans votre application, par exemple dans la barre de navigation, cela ne fonctionnerait tout simplement pas. Le navigateur ignorerait simplement cette ligne de CSS.

Meilleure réactivité grâce aux variables

Un gros avantage des variables CSS est qu'elles ont accès au DOM. Ce n'est pas le cas avec LESS ou SASS car leurs variables sont compilées en CSS standard.

En pratique, cela signifie que vous pouvez, par exemple, modifier les variables en fonction de la largeur de l'écran:

:root { --main-font-size: 16px; } media all and (max-width: 600px) { :root { --main-font-size: 12px; } } 

Et avec ces quatre lignes de code simples, vous avez mis à jour la taille de la police principale dans toute votre application lorsqu'elle est affichée sur de petits écrans. Assez élégant, hein?

Comment accéder aux variables avec JavaScript

Un autre avantage de la vie dans le DOM est que vous pouvez accéder aux variables avec JavaScript, et même les mettre à jour, par exemple, en fonction des interactions des utilisateurs. C'est parfait si vous souhaitez donner à vos utilisateurs la possibilité de modifier votre site Web (comme l'ajustement de la taille de la police).

Continuons sur l'exemple du début de cet article. La saisie d'une variable CSS en JavaScript prend trois lignes de code.

var root = document.querySelector(':root'); var rootStyles = getComputedStyle(root); var mainColor = rootStyles.getPropertyValue('--main-color'); console.log(mainColor); \--> '#ffeead' 

Pour mettre à jour la variable CSS, appelez simplement la setPropertyméthode sur l'élément dans lequel les variables ont été déclarées et passez le nom de la variable comme premier paramètre et la nouvelle valeur comme deuxième.

root.style.setProperty('--main-color', '#88d8b0') 

Cette couleur principale peut changer l'apparence entière de votre application, elle est donc parfaite pour permettre aux utilisateurs de définir le thème de votre site.

En mettant à jour une seule variable, vous pouvez changer la couleur de la barre de navigation, du texte et des éléments.

En mettant à jour une seule variable, vous pouvez changer la couleur de la barre de navigation, du texte et des éléments.

Prise en charge du navigateur

Actuellement, 77% du trafic mondial du site Web prend en charge les variables CSS, dont près de 90% aux États-Unis. Nous utilisons déjà des variables CSS sur Scrimba.com depuis un certain temps maintenant, car notre public est assez averti en technologie et utilise principalement des navigateurs modernes.

Ok, c'était ça. J'espère que vous avez appris quelque chose!

Si vous voulez l'apprendre correctement, assurez-vous de consulter mon cours gratuit sur les variables CSS chez Scrimba.

Merci d'avoir lu! Je m'appelle Per Borgen, je suis le co-fondateur de Scrimba - le moyen le plus simple d'apprendre à coder. Vous devriez consulter notre bootcamp de conception de sites Web réactifs si vous souhaitez apprendre à créer un site Web moderne à un niveau professionnel.