Stas Melnikov, l'auteur du cours HTML HTML Layout, a parlé des nuances qui peuvent compliquer le travail avec des propriétés CSS personnalisées.Règles de syntaxe des noms de propriété personnalisés
Nous sommes habitués au fait que les propriétés CSS en ligne ne respectent pas la casse. Par conséquent, les méthodes suivantes de déclaration d'une propriété
border donneront le même résultat:
button { BORDER: 2px solid
Les propriétés personnalisées, en revanche, sont sensibles à la casse, donc l'exemple suivant crée deux propriétés personnalisées différentes:
button { --NETOLOGY-BRAND-COLOR:
Maintenant, le cadre est devenu # 800080 (violet) et le texte est devenu # 27ae60 (vert).
Valeurs valides pour les propriétés personnalisées
Pour une propriété CSS régulière, vous ne pouvez définir que les valeurs autorisées par la norme. Selon la norme de propriété personnalisée, toute valeur CSS valide existante peut être utilisée comme valeur. Par exemple, comme pour toutes les propriétés personnalisées suivantes:
.element::before { --color: rgba(0, 0, 0, 1); --hex:
Par exemple, définissons le cadre avec la couleur # 800080 pour le bouton:
button { --netologyBrandColor:
En plus des valeurs standard, vous pouvez définir une propriété personnalisée comme valeur pour une autre.
button { --netologyBrandColor:
Le résultat n'est pas différent du précédent, et le bouton a toujours un cadre de couleur # 800080.
Si la propriété personnalisée
--netologyBrandColor a une valeur incorrecte pour la propriété
border-color , par exemple 18px, le cadre devient noir.
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); }
Le fait est qu'avant que le navigateur applique la valeur de la propriété utilisateur pour la propriété intégrée, il vérifiera son exactitude. Si la valeur est disponible pour la propriété inline, le navigateur l'appliquera. Sinon, il définira la valeur par défaut de la propriété intégrée.
Dans notre cas, 18px est une valeur incorrecte pour la propriété intégrée
border-color , et donc le navigateur définira la valeur par défaut, c'est-à-dire
currentColor . Ceci est très facile à vérifier en définissant la propriété
color sur # 800080:
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); color:
Comme vous pouvez le voir, le navigateur a appliqué la valeur # 800080 pour le cadre. Dans cet exemple, j'ai utilisé la syntaxe complète pour définir le cadre. Mais nous pouvons en utiliser une courte, à savoir la propriété
border .
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border: 2px solid var(--buttonBorderColor); color:
Ici, nous attendons une autre nuance. Il existe une section distincte dans la norme qui décrit le comportement des propriétés personnalisées dans une telle situation. Selon lui, si une propriété utilisateur a une valeur incorrecte pour une propriété en ligne, cette propriété utilisateur n'est pas valide, donc le navigateur ignorera la propriété en ligne.
Dans notre exemple, la propriété de
border intégrée a l'une des valeurs définies sur la propriété personnalisée
--buttonBorderColor avec une valeur non valide de 18 pixels. Selon l'algorithme décrit, le navigateur a simplement ignoré la propriété
border , donc l'élément a perdu la bordure.
La valeur par défaut pour les propriétés personnalisées
Lorsque nous avons examiné l'exemple de la fonction
var , nous n'avons utilisé qu'un seul paramètre - le nom de la propriété personnalisée.
button { --netologyBrandColor:
Mais en plus, la fonction
var peut accepter la seconde - la valeur par défaut. Pour déclarer une valeur par défaut, vous devez mettre une virgule après le nom de la propriété personnalisée et écrire la valeur elle-même.
Lorsque le navigateur se rend compte que le développeur n'a pas déclaré de valeur pour la propriété personnalisée, il utilise la valeur par défaut. Par exemple, la valeur # 800080 (violet) pour une propriété personnalisée est
--netologyBrandColor .
button { border: 2px solid var(--netologyBrandColor,
Nous voyons le cadre et le texte devenir violets. Mais si vous déplacez le bouton, ils deviendront verts. Cela indique que le navigateur a appliqué la valeur # 27ae60 à la propriété utilisateur, remplaçant ainsi la valeur par défaut.
Mais ce ne sont pas toutes les possibilités de la fonction
var . Dans l'exemple précédent, la propriété personnalisée
--netologyBrandColor utilisée deux fois, respectivement, j'ai donc défini la valeur par défaut deux fois.
Mais cela peut être fait différemment. La fonction
var vous permet de passer une autre fonction
var , vous pouvez donc définir une autre propriété personnalisée comme valeur par défaut. Je vais réécrire l'exemple précédent en utilisant la propriété personnalisée
--defaultButtonColor :
button { --defaultButtonColor:
Extérieurement, le résultat ne changera pas. Mais maintenant, pour modifier la valeur par défaut, vous devez le faire uniquement à un endroit, et non à plusieurs, comme auparavant.
Héritage de propriétés personnalisées
CSS possède un mécanisme d'héritage qui permet aux éléments d'hériter des propriétés des éléments parents. À cet égard, les propriétés personnalisées ne sont pas différentes d'eux. Pour un exemple, j'écrirai le code dans lequel la propriété personnalisée
--netologyBrandColor héritée de l'élément de
body parent.
body { --netologyBrandColor:
En regardant l'inspecteur, vous pouvez remarquer l'inscription «Hérité du corps», qui nous montre que la propriété personnalisée a été prise de l'élément
body . Mais si nous ajoutons la propriété personnalisée
--netologyBrandColor pour l'élément
button , elle remplace déjà la propriété de l'élément
body .
body { --netologyBrandColor:
L'inspecteur montre que la propriété personnalisée
--netologyBrandColor l'élément
button remplace la propriété
--netologyBrandColor , que nous avons spécifiée pour l'élément
body .
Valeurs globales
Dans la norme CSS, les propriétés personnalisées ont introduit une pseudo-
root spéciale qui vous permet de spécifier des propriétés personnalisées qui s'appliquent à l'élément racine du document. Par exemple, dans un document HTML pour un élément
html .
:root { --netologyBrandColor:
Dans l'inspecteur, nous pouvons voir que la propriété personnalisée déclarée est appliquée à l'élément html. Mais, en plus du document HTML, la pseudo-
root fonctionne dans les documents SVG. Par exemple, je déclarerai des propriétés personnalisées dans la balise de
style .
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 28" width="50" height="50"> <style> :root{ --iconColor:
Et nous voyons ici que la pseudo-
root racine
root été ajoutée à l'élément racine SVG. En conséquence, cela prouve que la pseudo-classe racine s'applique non seulement à la balise
html , mais à tout élément racine.
Conclusion
Dans cet article, nous avons rencontré des écueils de propriétés personnalisées qui peuvent prêter à confusion. Et en conséquence, nous pouvons commencer à les utiliser. Par conséquent, dans le prochain article, je parlerai des astuces pratiques que j'utilise dans mes projets.
Des éditeurs
Cours de netologie sur le sujet: