Dans cette conférence, nous découvrirons les Variables CSS (également appelées propriétés personnalisées) et comment elles aident à simplifier votre code en vous permettant de réutiliser les valeurs dans votre feuille de style.
Les variables CSS vous permettent de stocker des valeurs telles que les couleurs, la taille des polices ou l'espacement dans un emplacement central et de les réutiliser dans votre feuille de style. Cela rend votre code plus maintenable, car vous pouvez facilement mettre à jour les valeurs en un seul endroit au lieu de rechercher dans toute la feuille de style.
Les variables CSS sont définies avec un préfixe -- et vous pouvez y accéder avec la fonction var().
Les variables CSS sont généralement définies dans le sélecteur :root, qui représente le niveau supérieur du document.
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; } body { font-size: var(--font-size); color: var(--primary-color); } h1 { color: var(--secondary-color); }
Dans cet exemple :
Vous pouvez remplacer les variables CSS dans des sélecteurs spécifiques pour fournir des valeurs spécifiques au contexte.
:root { --primary-color: #3498db; } .dark-mode { --primary-color: #34495e; } body { color: var(--primary-color); }
Dans cet exemple, le --primary-color est remplacé lorsque la classe .dark-mode est appliquée. Cela vous permet de basculer entre différentes combinaisons de couleurs (par exemple, le mode clair et le mode sombre) sans effort.
Les variables CSS fonctionnent bien avec les requêtes multimédias, vous permettant d'ajuster les valeurs en fonction de la taille de l'écran.
:root { --font-size: 16px; } @media (max-width: 600px) { :root { --font-size: 14px; } } body { font-size: var(--font-size); }
Dans cet exemple, la variable --font-size est réduite sur les écrans plus petits, ce qui rend le texte plus lisible sur les appareils mobiles.
Vous pouvez fournir des valeurs de secours pour les variables CSS au cas où la variable ne serait pas définie ou prise en charge par le navigateur.
body { font-size: var(--font-size, 18px); }
Ici, si --font-size n'est pas défini, le navigateur utilisera par défaut 18px.
L'un des aspects les plus puissants des variables CSS est qu'elles peuvent être manipulées à l'aide de JavaScript, vous permettant ainsi de créer des styles dynamiques et interactifs.
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
Dans cet exemple, la variable --primary-color est mise à jour vers une nouvelle couleur (#e74c3c) à l'aide de JavaScript, ce qui modifie dynamiquement le style de la page.
Les variables CSS offrent un moyen flexible de gérer vos styles, d'améliorer la maintenabilité du code et de permettre des mises à jour dynamiques. En incorporant des variables CSS dans votre flux de travail, vous pouvez rationaliser votre processus de développement et créer des feuilles de style plus maintenables et évolutives.
Ridoy Hasan
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!