Variables CSS – La capacité de produire des effets de conception dynamiques et personnalisables est essentielle dans le domaine du développement Web. Les propriétés personnalisées, ou variables CSS, fournissent un moyen d'accéder à ce domaine qui permet aux développeurs de spécifier des valeurs réutilisables dans les feuilles de style et de les modifier dynamiquement pendant l'exécution. Cet article de blog explorera les variables CSS avec un exemple pratique qui met en évidence leur capacité dynamique.

Comprendre les variables CSS
Les valeurs réutilisables d'une feuille de style peuvent être définies et utilisées partout à l'aide de variables CSS. Ils sont déclarés en utilisant le préfixe — suivi d'un nom, généralement dans la pseudo-classe :root pour une disponibilité globale. Ils peuvent être utilisés pour stocker des valeurs telles que les polices, les couleurs, la largeur, la hauteur, etc. Ces variables peuvent même être utilisées dans d'autres fichiers une fois définies dans le code CSS. (En savoir plus)

Voici comment est définie une variable CSS :

:root {
  --main-color: #3498db;
}

Dans cet exemple, nous avons défini une variable nommée –main-color et sa valeur est #3498db. Nous l'avons déclaré dans la pseudo-classe :root, ce qui garantit que la variable est accessible partout dans le code CSS.

Comment utiliser les variables CSS
Une fois définies, vous pouvez utiliser les variables CSS n'importe où dans votre code CSS en utilisant la fonction var() pour y accéder.

Var() :

La variable CSS var() permet de saisir la valeur d'une propriété personnalisée pour remplacer une partie de la valeur d'une autre propriété..

Syntaxe :

var(--custom-property);

Exemple :

.element {
  color: var(--main-color);
}

Dans cet exemple, nous utilisons la variable –main-color pour définir la couleur du texte d'un élément. Si vous décidez de changer la couleur principale ultérieurement, tout ce que vous pouvez faire est de mettre à jour la valeur de la variable, et elle se reflétera automatiquement sur tous les éléments où elle est utilisée.

1.Création de couleurs de thème dynamiques
Sortir

Imaginez une situation dans laquelle vous souhaitez concevoir une page Web dans laquelle la couleur du thème change de manière dynamique. Vous souhaitez pouvoir offrir aux utilisateurs la possibilité de cliquer sur un bouton, puis de voir l’intégralité de la palette de couleurs de la page changer. Voyons comment les variables CSS peuvent rendre cela possible. (En savoir plus sur les variables CSS)

HTML :

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

CSS :

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

Javascript :

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

Cet exemple montre une page Web avec un bouton et un en-tête. La couleur d'arrière-plan du bouton et de l'en-tête est personnalisée à l'aide de la variable CSS –primary-color, qui a une valeur par défaut de #3498db. Un script JavaScript crée un code de couleur hexadécimal aléatoire en cliquant sur le bouton, qui est ensuite attribué comme nouvelle valeur de la variable –primary-color. En conséquence, les utilisateurs bénéficient d'une expérience intéressante et interactive car la couleur du thème du bouton et de l'en-tête change de manière dynamique.

Conclusion
Dans le développement Web, les variables CSS offrent une méthode polyvalente et efficace de gestion des styles. En définissant des valeurs réutilisables et en les appliquant de manière dynamique, les développeurs peuvent créer des sites Web plus maintenables et personnalisables. Les variables CSS fournissent un ensemble d'outils complet pour améliorer les capacités de style de vos projets en ligne, que l'accent soit mis sur le thème, la réactivité ou l'animation. Pour les utiliser pleinement dans vos conceptions, commencez à les intégrer dans votre flux de travail CSS ! (En savoir plus sur la variable CSS)