Bonjour, Habr! Je vous présente la traduction de l'article
"Mes 5 principales raisons pour lesquelles j'aime les propriétés personnalisées CSS" par Stas Melnikov
La spécification de propriété personnalisée CSS a changé à jamais ma vision du développement Web. C'est pourquoi je veux écrire pourquoi j'aime les propriétés CSS personnalisées.
Que sont les propriétés CSS personnalisées?
En bref, les propriétés personnalisées CSS sont des propriétés qui ont été créées par le développeur. Le navigateur n'en sait rien jusqu'à ce que le développeur les détermine.
La déclaration de toute propriété personnalisée commence par deux tirets, après quoi vous devez ajouter le nom de la propriété. Ensuite, vous ajoutez de la couleur et définissez la valeur de la propriété.
Par exemple, j'ai créé la propriété melnik909BrandColor, avec une valeur
violette pour l'élément
bouton :
button { --melnik909BrandColor: purple; }
Fonction Var
La première fonctionnalité des propriétés CSS personnalisées est la fonction
var . Avec cette fonction, je peux dire au navigateur de prendre la valeur de la propriété personnalisée et de l'ajouter à n'importe quelle propriété CSS.
Pour ce faire, je dois définir la propriété CSS et ajouter la valeur de cette propriété, au même endroit définir la fonction
var avec une propriété personnalisée comme argument.
Par exemple, j'ai ajouté la propriété --melnik909BrandColor pour les propriétés de bordure et de couleur.
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); }
Les propriétés personnalisées peuvent être modifiées directement dans le navigateur
Un lecteur expérimenté qui connaît des outils comme Sass ou LESS pourrait dire:
«Stas, pourquoi devrais-je étudier les propriétés personnalisées CSS? Je connais les variables Sass et ça me suffit .
"Attention! Les variables Sass et LESS aident à organiser le CSS afin qu'il soit plus facile pour les développeurs de maintenir le code. Par exemple, j'ai créé une variable $ melnik909BrandColor dans laquelle j'ai enregistré la couleur:
$melnik909BrandColor: purple; button { color: $melnik909BrandColor; border: 2px solid $melnik909BrandColor; }
Après la compilation, je verrai le code suivant dans le navigateur:
button { color: purple; border: 2px solid purple; }
Cet exemple montre que les variables Sass et LESS ne sont pas dans le navigateur.
La deuxième caractéristique des propriétés CSS personnalisées est qu'elles se trouvent dans le navigateur. De cette façon, je peux changer les valeurs là-bas. Par exemple, je peux modifier la valeur de la propriété —melnik909BrandColor pour l'état de sélection de l'élément
bouton :
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); } button:hover { --melnik909BrandColor: #27ae60; }
Vous pouvez utiliser des propriétés CSS personnalisées et des requêtes multimédias ensemble
La troisième caractéristique des propriétés CSS personnalisées est que leurs valeurs peuvent être modifiées à l'aide de requêtes multimédias. Par exemple, je définis la propriété melnik909BrandColor pour changer la couleur du texte de l'élément de
corps sur différents appareils.
body { color: var(--melnik909BrandColor); } @media (max-width: 768px) { body { --melnik909BrandColor: purple; } } @media (min-width: 769px) { body { --melnik909BrandColor: tomato; } }
Fonction Calc et propriétés personnalisées CSS
Il y a des moments où nous devons utiliser la fonction
calc . Par exemple, j'aime utiliser cette fonction lorsque j'ai besoin de compter le nombre d'éléments dans une rangée:
.child { width: calc(100% / 4); } .child { width: calc(100% / 3); }
Cependant, ce code est difficile à réutiliser, et ici les propriétés CSS personnalisées nous aideront. Nous pouvons créer une variable qui lira le nombre d'éléments. Par exemple, j'ajouterai la propriété –-itemsNumber à l'exemple précédent:
.child { width: calc(100% / var(--itemsNumber)); }
Et je définirai les valeurs dans l'élément
parent :
.parent { --itemsNumber: 5; } .parent { --itemsNumber: 7; }
Personnalisation des graphiques vectoriels
Il existe 2 façons de personnaliser les graphiques vectoriels à l'aide de propriétés CSS personnalisées.
Dans la première méthode, nous définissons les attributs
fill, stroke et stroke-width et leur ajoutons des propriétés CSS personnalisées en tant que valeurs.
De plus, nous pouvons ajouter des valeurs d'attribut en définissant les valeurs des propriétés personnalisées:
<svg class="svg-with-attr" viewBox="0 0 55.867 55.867"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg>
Nous pouvons maintenant ajouter des valeurs d'attribut en définissant la valeur des propriétés personnalisées:
.svg-with-attr { --iconFill: #eeeeee; --iconStroke: #000000; --iconStrokeWidth: 1px; }
A gauche se trouve l'icône par défaut sans styles, et à droite se trouve l'icône avec des styles.
Dans la deuxième méthode, nous définissons des propriétés CSS personnalisées pour les propriétés de
trait, de largeur de trait et de remplissage à l' aide de règles CSS.
body { --iconFill: #ffcc00; --iconStroke: #000000; --iconStrokeWidth: 2px; } .svg-with-props { stroke: var(--iconStroke); stroke-width: var(--iconStrokeWidth); fill: var(--iconFill); }