Savez-vous dans CSS, vous pouvez sélectionner la fonction de couleur une fois et utiliser cette valeur sans le spécifier à nouveau en utilisant le mot clé CurrentColor?
Commençons par la définition
le
currentColorLe mot-clé indique la valeur actuelle decolorUne fonction de composante (après avoir calculé toutes les propriétés) et nous permet de l’utiliser directement sans identifier explicitement le code couleur.
exemple
Au lieu de déterminer le code couleur plusieurs fois comme ceci:
.my-class {
color: red;
background-color: red;
box-shadow: 2px 2px 4px 0 red;
}Nous pouvons le définir une fois et le réutiliser. Il réduit également un mal de tête pour modifier les valeurs de couleur partout.
.my-class {
color: red;
background-color: currentColor;
box-shadow: 2px 2px 4px 0 currentColor;
}Explorons cela plus
Et si nous ne spécifions pas la fonction de couleur?
Dans ce cas, si vous reconsidérez la définition en haut, il faudra la valeur actuelle de la fonction de couleur Après avoir calculé toutes les propriétés CSS De cet élément. Cela signifie qu’il faudra cette valeur de l’élément mère. Par conséquent, s’il n’y a pas de fonctionnalité de couleur spécifique dans les éléments des parents, vous prendrez la couleur par défaut qui a été nommée par le navigateur.
Pour vos connaissances: Étant donné que vous pouvez configurer le thème de votre système d’exploitation, les navigateurs essaient également de l’adopter. Ainsi, il n’y a pas de couleur pour la ligne virtuelle globale.
Mais … pouvons-nous tromper les couleurs de CurrentColor en déterminant les valeurs de plusieurs couleurs?
Pouvez-vous deviner quelle est la valeur de CurrentColor si vous faites quelque chose comme ça?
.my-class {
color: red;
background-color: currentColor;
color: blue;
}Maintenant, si vous comprenez correctement la définition, vous saurez que la valeur de CurrentColor devrait être blue Pas rouge. Car il nécessite la valeur actuelle de la fonction de couleur Après avoir calculé toutes les propriétés CSS.
Pourquoi CurrentColor à CamelCase?
Certains d’entre vous devraient remarquer que nous utilisons Camelcase ici. Mais CSS est case-insensitive! Alors oui, vous pouvez écrire ce que vous voulez.
currentColoretcurrentcoloretCurrentColoretCURRENTCOLORetcUrReNtCoLoREtc. Tout est bon!
Jetons un coup d’œil à certains cas d’utilisation
Utilisez la même couleur de police dans votre code SVG
Changez l’ombre du carré en fonction de la couleur de la police
Ou nous pouvons montrer une animation et changer les couleurs de police et carrée sans utiliser JavaScript!
Bien que je n’ai montré que 3 exemples, c’est à votre imagination. Dites-nous comment vous pouvez l’utiliser.
Si vous aimez ce sujet et l’article, dites-moi que gazouillement Et l’échange de connaissances avec tout le monde. Je vais peut-être créer un article séparé sur les cas d’utilisation. Si vous n’aimez pas cet article, vous me dites toujours ce que vous n’avez pas aimé. J’essaierai certainement d’améliorer cela. Suis-moi gazouillement Si possible. Cela signifie beaucoup pour moi!