L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Un guide pratique des variables CSS (propriétés personnalisées) –
Ce message a été mis à jour en août 2018.
Les préprocesseurs comme Sass et Less aident certainement à garder votre base de code CSS organisée et maintenable. Des fonctionnalités telles que les variables, mixins, boucles, etc. – en ajoutant des capacités dynamiques au codage CSS – contribuent à minimiser les répétitions et à accélérer le temps de développement.
Ces dernières années, quelques caractéristiques dynamiques ont commencé à apparaître le langage CSS lui-même. Les variables CSS – ou "propriétés personnalisées", comme elles sont officiellement appelées – sont déjà là et bénéficient d'un excellent support par navigateur, alors que les mixins CSS sont actuellement en cours . cet article, vous découvrirez comment vous pouvez commencer à intégrer des variables CSS dans votre flux de développement CSS pour rendre vos feuilles de style plus maintenables et DRY (Ne vous répétez pas).
Plongeons-y!
Que sont les variables CSS?
Si vous avez utilisé un langage de programmation, vous connaissez déjà le concept d'une variable . Les variables vous permettent de stocker et de mettre à jour les valeurs dont votre programme a besoin pour fonctionner
Par exemple, considérons l'extrait JavaScript suivant:
let number1 = 2;
que nombre2 = 3;
let total = nombre1 + nombre2;
console.log (total); // 5
nombre1 = 4;
total = nombre1 + nombre2;
console.log (total); // 7 number1 et number2 sont deux variables qui stockent respectivement les nombres 2 et 3.
total est aussi une variable qui stocke la somme des number1 et number2 variables, dans ce cas ayant pour résultat la valeur 5. Vous pouvez modifier dynamiquement la valeur de ces variables et utiliser la valeur mise à jour n'importe où dans votre programme. Dans l'extrait ci-dessus, je mets à jour la valeur de number1 et lorsque j'effectue à nouveau l'addition en utilisant les mêmes variables, le résultat stocké dans total n'est plus 5 mais 7. [19659004] La beauté des variables est qu'elles vous permettent de stocker votre valeur dans un endroit et la mettre à jour à la volée pour un certain nombre de fins diverses. Vous n'avez pas besoin d'ajouter de nouvelles entités avec des valeurs différentes partout dans votre programme: toutes les mises à jour de valeur se font en utilisant le même lieu de stockage, ie, votre variable
CSS est principalement un langage déclaratif capacités. Vous diriez qu'avoir des variables dans CSS serait presque une contradiction dans les termes. Si le développement frontal était juste une question de sémantique, ce serait le cas. Heureusement, les langages du Web ressemblent beaucoup aux langues vivantes, qui évoluent et s'adaptent en fonction de l'environnement et des besoins de leurs praticiens. CSS n'est pas une exception.
En bref, les variables sont maintenant devenues une réalité passionnante dans le monde des CSS, et comme vous le verrez bientôt par vous-même, cette nouvelle technologie impressionnante est assez simple à apprendre et à utiliser. Avantages de l'utilisation de variables CSS
Les avantages de l'utilisation de variables dans CSS ne sont pas très différents de ceux de l'utilisation de variables dans les langages de programmation.
Voici ce que la spécification a à dire à ce sujet:
[Using CSS variables] pour lire des fichiers volumineux, car les valeurs apparemment arbitraires ont maintenant des noms informatifs, et rend l'édition de tels fichiers beaucoup plus facile et moins sujette aux erreurs, car il suffit de changer la valeur une fois, dans la propriété personnalisée, et le changement se propage à tous
En d'autres termes:
En nommant vos variables d'une manière qui a du sens pour vous par rapport à votre projet, ce sera plus facile pour vous de gérer et de maintenir votre code. Par exemple, la modification de la couleur principale dans votre projet sera beaucoup plus facile lorsque vous devez modifier une valeur pour la propriété personnalisée CSS - primary-color plutôt que de modifier cette valeur dans plusieurs propriétés CSS dans
Quelle est la différence entre les variables CSS et les variables du préprocesseur?
Une façon dont vous avez pu profiter de la flexibilité des variables lorsque vous stylisez des sites Web en utilisant des préprocesseurs comme Sass et ] Less .
Les préprocesseurs vous permettent de définir des variables et de les utiliser dans des fonctions, des boucles, des opérations mathématiques, etc … Cela ne signifie-t-il pas que les variables CSS sont différentes? variables
Les différences proviennent du fait que les variables CSS sont des propriétés CSS en cours d'exécution dans le navigateur, tandis que les variables du préprocesseur sont compilées en code CSS normal, donc le navigateur sait rien de cela.
Cela signifie que vous pouvez mettre à jour les variables CSS dans un document de style, dans les attributs de style inline et les attributs de présentation SVG, ou choisir de les manipuler à la volée en utilisant JavaScript. Vous ne pouvez pas faire tout cela avec des variables de préprocesseur. Cela ouvre tout un monde de possibilités!
Cela ne veut pas dire que vous devez choisir entre l'un ou l'autre: rien ne vous empêchera de tirer parti des super pouvoirs des variables CSS et préprocesseur travaillant ensemble. ] Variables CSS: la syntaxe
Bien que dans cet article j'utilise le terme CSS pour des raisons de simplicité, la spécification officielle fait référence aux propriétés CSS personnalisées pour les variables en cascade . La propriété personnalisée CSS propriété ressemble à ceci:
- my-cool-background: # 73a4f4; Vous préfixez la propriété personnalisée avec deux tirets et lui attribuez une valeur comme vous le feriez avec une propriété CSS normale. Dans l'extrait ci-dessus, j'ai affecté une valeur de couleur à la propriété personnalisée - my-cool-background
La partie de la variable en cascade consiste à appliquer votre propriété personnalisée à l'aide du La fonction var () qui ressemble à ceci:
var (- my-cool-background) La propriété personnalisée est définie dans un sélecteur CSS et le var () part est utilisée comme valeur d'une vraie propriété CSS:
: root {
--my-cool-background: # 73a4f4;
}
/ * Le reste du fichier CSS * /
#foo {
couleur de fond: var (- my-cool-background);
} L'extrait ci-dessus étend la propriété personnalisée - my-cool-background à la pseudo-classe : root qui rend sa valeur disponible globalement (elle correspond à tout élément). Ensuite, il utilise la fonction var () pour appliquer cette valeur à la propriété background-color du conteneur avec l'ID foo qui en conséquence va maintenant avoir un joli fond bleu clair.
Ce n'est pas tout. Vous pouvez utiliser la même valeur de couleur bleu clair pour définir les autres propriétés de couleur de plusieurs éléments HTML, par exemple, couleur border-color etc., simplement en récupérant la valeur de la propriété personnalisée en utilisant var (-mon-cool-background) et en l'appliquant à la propriété CSS appropriée (bien sûr, je recommande de réfléchir à votre convention de nommage pour les variables CSS avant que les choses deviennent confuses):
p {
couleur: var (- my-cool-background);
} Voir le stylo Fonctionnement de base des variables CSS par SitePoint ( @SitePoint ) le CodePen .
Vous pouvez également définir la valeur d'un Variable CSS avec une autre variable CSS. Par exemple:
- top-color: orange;
- couleur de fond: jaune;
--my-gradient: gradient linéaire (var (- top-color), var (- bottom-color)); L'extrait ci-dessus crée la variable - my-gradient et la définit à la valeur des deux variables - couleur de fond et - couleur de fond pour créer un dégradé. Maintenant, vous pouvez modifier votre dégradé à tout moment où vous avez décidé de l'utiliser en changeant simplement les valeurs de vos variables. Pas besoin de chasser toutes les instances de dégradés sur toutes vos feuilles de style.
Voici une démo CodePen en direct
Voir le Pen Paramètre Valeur de CSS Variable avec une autre variable CSS par SitePoint ( @ SitePoint ) le CodePen .
Enfin, vous pouvez inclure une ou plusieurs valeur (s) de secours avec votre variable CSS. Par exemple:
var (- main-color, # 333); Dans l'extrait ci-dessus, # 333 est une valeur de repli. Si les sauvegardes ne sont pas incluses, en cas de propriétés personnalisées non valides ou non définies, la valeur héritée sera appliquée
Les variables CSS sont sensibles à la casse
Contrairement aux propriétés CSS normales, les variables CSS sont sensibles à la casse
, var (- foo) et var (- FOO) font référence à deux propriétés personnalisées différentes, - foo et - FOO
Les variables CSS sont soumises à la cascade
Comme les propriétés CSS normales, les variables CSS sont héritées. Par exemple, définissons une propriété personnalisée avec la valeur blue :
: root {
--main-couleur: bleu;
} Tous les éléments de l'élément racine où vous choisissez d'appliquer la variable - couleur principale hériteront de la valeur bleu .
Si vous réaffectez une valeur différente de votre propriété personnalisée dans un autre élément, tous les enfants de cet élément hériteront de la nouvelle valeur. Par exemple:
: root {
--main-couleur: bleu;
}
.alert {
--main-couleur: rouge;
}
p {
couleur: var (- couleur principale);
}
paragraphe bleu.
paragraphe rouge.
Le premier paragraphe du balisage ci-dessus hérite de sa valeur de la variable globale - couleur principale ce qui le rend bleu.
Le paragraphe à l'intérieur de l'élément div avec la classe de .alert sera rouge car sa valeur de couleur est héritée de la variable de portée locale - couleur principale qui a la valeur rouge . Assez avec les règles pour le moment, passons au codage!
Comment utiliser les variables CSS avec les SVG
Les variables CSS et les SVG fonctionnent bien ensemble! Vous pouvez utiliser des variables CSS pour modifier les attributs de style et de présentation dans les SVG en ligne.
Supposons que vous souhaitiez avoir une couleur différente pour vos icônes SVG en fonction du conteneur parent dans lequel elles sont placées. Vous pouvez étendre vos variables localement dans chaque conteneur parent, les définir à la couleur désirée et l'icône dans chaque conteneur héritera de la couleur appropriée de son parent.
Voici les extraits pertinents:
/ * symbole SVG intégré pour l'icône * /
/ * première instance de l'icône * /
Le balisage ci-dessus utilise la balise . Cette méthode vous permet de créer n'importe quel nombre d'icônes et de les personnaliser individuellement en faisant simplement référence à l'élément # close-icon ). Ceci est plus pratique que de répéter le même code de code encore et encore pour recréer l'image. Massimo Cassandro propose un petit tutoriel dans sa Build Your Own SVG Icons
Notez la valeur de la propriété stroke dans l'élément circle et de la propriété fill à l'intérieur de l'élément de texte du symbole SVG: ils appliquent tous deux une variable CSS, à savoir - icon-color qui est définie dans : root sélecteur dans le document CSS, comme ceci:
: root {
--icon-couleur: noir;
} Voici à quoi ressemble l'icône:
Si vous placez maintenant une icône SVG dans différents éléments du conteneur et localisez votre variable dans chaque Le sélecteur de l'élément parent avec une valeur de couleur différente, vous aurez des icônes de couleurs différentes sans avoir à ajouter d'autres règles de style. Cool!
Pour montrer ceci, plaçons une instance de la même icône dans la div avec une classe de .success .
Le code HTML:
Maintenant, localisez la variable - icon-color en lui attribuant la valeur green dans le sélecteur .success et vérifiez le résultat .
CSS:
.success {
--icon-couleur: vert;
} La couleur de l'icône est maintenant verte:
Regardez la démo complète ci-dessous:
Comment utiliser les variables CSS avec @keyframes Animation
Les variables CSS peuvent fonctionner avec l'animation CSS, à la fois sur les éléments HTML normaux et les SVG en ligne. N'oubliez pas de définir les propriétés personnalisées dans le sélecteur qui cible l'élément que vous souhaitez animer, et faites-y référence avec la fonction var () dans le bloc @keyframes . Par exemple, pour animer un élément .bubble dans un graphique SVG, votre CSS pourrait ressembler à ceci:
.bubble {
--direction-y: 30px;
- transparence: 0;
animation: bouillonnement 3s avant infini;
}
@keyframes bouillonnant {
0% {
transform: translatey (var (- direction-y));
opacité: var (- transparence);
}
40% {
opacité: calc (var (- transparence) + 0.2);
}
70% {
opacité: calc (var (- transparence) + 0.1);
}
100% {
opacité: var (- transparence);
}
} Remarquez comment vous pouvez effectuer des calculs avec la fonction var () en utilisant CSS calc () ce qui ajoute encore plus de flexibilité à votre code.
La seule chose intéressante à propos de l'utilisation de variables CSS dans ce cas est que vous pouvez modifier vos animations simplement en modifiant les valeurs des variables dans les sélecteurs appropriés. Pas besoin de rechercher chacune des propriétés dans toutes les directives @keyframes .
Voici la démo complète de CodePen à expérimenter:
Comment manipuler des variables CSS avec JavaScript
Une chose encore plus cool que vous pouvez faire est d'accéder aux variables CSS directement depuis votre code JavaScript.
Disons que vous avez une variable CSS appelée - left-pos avec une valeur de 100px ] portée à la classe .sidebar dans votre document CSS:
.sidebar {
--left-pos: 100px;
} Obtenir la valeur de - left-pos à partir de votre code JavaScript ressemblerait à ceci:
// mettre en cache l'élément que vous voulez cibler
const sidebarElement = document.querySelector ('. sidebar');
// Cache les styles de sidebarElement dans cssStyles
const cssStyles = getComputedStyle (sidebarElement);
// récupère la valeur de la variable CSS --left-pos
const cssVal = Chaîne (cssStyles.getPropertyValue ('- left-pos')). trim ();
// consigner cssVal pour imprimer le CSS
// valeur de la variable à la console: 100px
console.log (cssVal); Pour définir une variable CSS avec JavaScript, vous pouvez faire quelque chose comme ceci:
sidebarElement.style.setProperty ('- left-pos', '200px'); L'extrait ci-dessus définit la valeur de la variable - left-pos pour l'élément sidebar à 200px .
Je trouve l'interactivité sur une page Web en utilisant des variables CSS beaucoup plus simple et maintenable que de basculer un tas de classes ou réécrire des règles CSS entières à la volée.
Jetez un oeil à la démo CodePen ci-dessous, où vous pouvez basculer interactivement une barre latérale et changer la propriété mode de fusion et la Couleur de fond utilisant uniquement des variables CSS et JavaScript:
Support de navigateur pour les variables CSS
Excepté pour IE11 (qui ne supporte pas les variables CSS), tous les navigateurs principaux supportent les variables CSS . 19659004] Une façon dont votre code peut prendre en charge les navigateurs non pris en charge est d'utiliser [@19659112] @supports block avec une requête conditionnelle fictive:
section {
couleur: gris;
}
@supports (- css: variables) {
section {
--mon-couleur: bleu;
couleur: var (- my-color, 'blue');
}
} Étant donné que @supports fonctionne dans IE / Edge, cela fera l'affaire. Si vous utilisez également les valeurs de remplacement dans la fonction var () votre code sera encore plus infaillible et se dégradera normalement dans les navigateurs moins performants.
Par conséquent, dans Chrome et d'autres navigateurs secondaires, le texte à l'intérieur de l'élément
IE11, qui n'a aucun support pour les variables CSS, rend la page avec du texte de couleur grise:
Découvrez la démo en direct:
Un inconvénient de cette approche est que si vous utilisez beaucoup de variables CSS et que les navigateurs non supportés sont une priorité dans votre projet actuel, alors le code pourrait devenir un peu compliqué et un peu cauchemardé à maintenir.
Dans ce cas, vous pouvez opter pour PostCSS avec cssnext qui vous permet d'écrire c le code CSS et le rendre compatible avec les navigateurs non compatibles (un peu comme les transpileurs pour JavaScript). Si vous êtes curieux de connaître PostCSS, SitePoint Premium met à la disposition de tous ses membres un excellent cours vidéo sur ce sujet.
Ressources
Pour en savoir plus sur les tenants et les aboutissants des variables CSS, solutions de contournement de support de navigateur et cas d'utilisation intéressants, consultez les ressources ci-dessous:
Fun Demos
Qu'attendez-vous? Essayez les variables CSS et faites-moi savoir ce que vous pensez dans les commentaires!
Maria Antonietta Perna est co-éditrice du canal HTML / CSS de SitePoint et développeur web frontal. Elle aime bricoler avec les standards CSS et est curieuse d'enseigner des approches pour le code frontal. Lorsqu'elle ne code pas pour le Web ou qu'elle n'écrit pas pour le Web, elle aime les livres de philosophie, les longues marches et la bonne nourriture.
Source link