Stas Melnikov, l'auteur du cours HTML HTML Layout, a expliqué ce que sont les propriétés CSS personnalisées et pourquoi elles méritent d'être explorées.La norme CSS Custom Properties a changé CSS. Des opportunités folles sont apparues, dont nous ne pouvions que rêver auparavant. Nous vous disons exactement quoi et pourquoi les débutants devraient les étudier le plus rapidement possible.
Qu'est-ce qu'une propriété personnalisée
Une propriété personnalisée est une propriété CSS que le développeur lui-même a créée. Le navigateur ne sait rien de cette propriété jusqu'à ce qu'elle soit annoncée.
La déclaration d'une propriété personnalisée commence par un double trait d'union, suivi d'un nom, de deux points et d'une valeur.
Par exemple, déclarez une propriété personnalisée
--netologyBrandColor avec une valeur
purple pour l'élément
button :
button { --netologyBrandColor: purple; }
Maintenant, le navigateur connaît notre propriété, mais quelle est son utilisation?
Caractéristiques des propriétés personnalisées
La première astuce est la fonction
var . Avec cette fonction, nous pouvons dire au navigateur de prendre la valeur de la propriété personnalisée déclarée et de l'ajouter pour la propriété en ligne.
Pour que le navigateur le fasse, le développeur doit déclarer une propriété intégrée, par exemple,
color , et y ajouter la fonction
var en tant que valeur, dans l'argument duquel passer le nom de la propriété utilisateur.
Par exemple, ajoutez une propriété personnalisée pour les propriétés intégrées de
border et de
color :
button { --netologyBrandColor: purple; border: 2px solid var(--netologyBrandColor); color: var(--netologyBrandColor); }
Dans le navigateur, le bouton ressemblera à ceci:
Pourquoi étudier les propriétés personnalisées s'il existe des variables dans Sass et qu'elles sont parfaitement correctes?
Les variables des préprocesseurs tels que LESS et Sass aident à organiser le code afin qu'il soit plus facile pour nous de le maintenir. Par exemple, dans le code suivant, j'utilise la variable
$netologyBrandColor , qui stocke la couleur principale de la marque:
$netologyBrandColor: purple; button { border: 2px solid $netologyBrandColor; color: $netologyBrandColor; }
Après avoir converti le code dans le navigateur, nous verrons le code suivant:
button { border: 2px solid purple; color: purple; }
Sur la base de l'exemple, il est clair qu'après avoir converti le code de Sass en CSS au lieu de variables, le compilateur a inséré leurs valeurs, nous pouvons donc dire qu'il n'y a pas de variables Sass dans le navigateur.
La deuxième caractéristique des propriétés personnalisées est qu'elles vivent dans un navigateur, nous pouvons donc les modifier directement dans celui-ci. Par exemple, modifiez la valeur de la propriété utilisateur
--netologyBrandColor lorsque vous
--netologyBrandColor le bouton.
button { --netologyBrandColor: purple; border: 2px solid var(--netologyBrandColor); color: var(--netologyBrandColor); } button:hover { --netologyBrandColor:
Maintenant, si le bouton a un
hover , les valeurs des propriétés de
border et de
color changeront. C'est à cause de cette fonctionnalité que les propriétés personnalisées sont appelées «en direct»: elles peuvent être modifiées directement dans le navigateur et modifier en conséquence les valeurs des propriétés intégrées auxquelles elles sont appliquées.
Comme autre exemple, je vais modifier la valeur d'une propriété personnalisée avec l'état de
focus .
button { --netologyBrandColor:
La possibilité de modifier dynamiquement les propriétés de l'utilisateur peut être combinée avec des variables Sass ou des variables LESS.
Propriétés personnalisées et expressions multimédias
Une autre possibilité de propriétés personnalisées est que leurs valeurs peuvent être modifiées à l'aide de requêtes multimédias.
Par exemple, créez deux propriétés personnalisées:
—mq et
—textColor . En utilisant le premier, nous affichons le nom de la fonction multimédia sur la page, et le second est nécessaire pour changer la couleur. Sur les écrans d'une largeur pouvant atteindre 768 pixels, le texte sera magenta et à partir de 769 pixels, il sera rouge.
body::before { content: var(--mq); color: var(--textColor); } @media (max-width: 768px) { body::before { --mq: "max-width: 768px"; --textColor: purple; } } @media (min-width: 769px) { body::before { --mq: "min-width: 769px"; --textColor: red; } }
Propriétés personnalisées et fonction calc
CSS a une fonction de calcul avec laquelle vous pouvez effectuer des opérations arithmétiques. Il peut également fonctionner avec des propriétés personnalisées. Par exemple, nous pouvons contrôler le nombre d'enfants consécutifs:
.child { width: calc(100% / var(--childCount)); }
Si nous ajoutons une valeur de 5 pour la propriété personnalisée
--childCount dans le navigateur, nous verrons l'image suivante:
Pour un changement, je changerai 5 à 7 et les éléments seront reconstruits.
Propriétés personnalisées et SVG
Une autre possibilité de propriétés personnalisées est qu'elles peuvent être utilisées pour définir des valeurs pour des propriétés SVG telles que le
fill , le
stroke , la
stroke-width et autres. Il y a deux façons de procéder.
Dans la première méthode, nous utiliserons les attributs
fill ,
stroke et
stroke-width , auxquels nous définissons les propriétés définies par l'utilisateur comme valeur.
<svg class="svg-with-attr" viewBox="0 0 26 28"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg>
Et ajoutez des valeurs pour les propriétés personnalisées à CSS:
.svg-with-attr{ --iconFill:
L'icône à gauche est sans stylisation, et à droite avec nos paramètres. Si simple que nous pouvons personnaliser les graphiques.
La deuxième façon consiste à supprimer leurs attributs et à les remplacer par des propriétés CSS.
<svg class="svg-with-props" viewBox="0 0 26 28"> <path d="..."> </svg>
.svg-with-props { --iconFill:
J'ai spécifiquement ajouté d'autres valeurs pour les propriétés de
fill , de
stroke et
stroke-width afin que la différence entre les exemples soit visuellement perceptible.
Prise en charge du navigateur
Selon
caniuse.com , les propriétés personnalisées fonctionnent dans la plupart des navigateurs modernes, à l'exception d'IE11.
Si votre projet compte de nombreux utilisateurs avec IE11, n'utilisez pas de propriétés personnalisées. Je pourrais vous dire comment faire des replis, mais d'après mon expérience, je pense qu'il vaut mieux ne pas les utiliser.
Si vous n'avez pas besoin de prendre en charge IE11, n'hésitez pas à utiliser toutes les fonctionnalités des propriétés personnalisées.
Conclusion
J'espère avoir réussi à vous intéresser aux propriétés personnalisées. Dans cet article, je n'ai abordé que les possibilités et omis la partie technique et pratique, mais je vais le rattraper et écrire quelques autres articles sur les principes du travail et des cas.
Des éditeurs
Cours de netologie sur le sujet: