Les dernières ressources publiées sur Alsacreations.com
currentColor est un mot-clé spécial en CSS très utile pour des styles plus dynamiques et maintenables : il représente la valeur calculée de la propriété color (c'est-à-dire la couleur du texte) de l'élément dans lequel il est appliqué. Il n'est pas tout récent (depuis ~2010 !) mais reste souvent méconnu ou sous-utilisé.
Il s'agit donc d'une variable dynamique qui prend la valeur de la propriété color actuelle de l'élément. Si vous utilisez currentColor pour définir la couleur d'une bordure, d'un arrière-plan ou d'une ombre, cette propriété adoptera automatiquement la même couleur que le texte de cet élément.
L'avantage principal est que si vous changez la couleur de texte via la propriété color de l'élément, toutes les propriétés utilisant currentColor seront mises à jour automatiquement, sans avoir besoin de les modifier individuellement. Don't Repeat Yourself !
ð¡ Le mot currentcolor n'est en réalité PAS sensible à la casse mais on a l'habitude de l'écrire en camelCase (currentColor avec un C majuscule simplement parce que le mot-clé provient du langage SVG.
currentColorLa syntaxe est très simple : vous utilisez le mot-clé currentColor là où vous attendriez normalement une valeur de couleur (comme tomato, #FC0, rgb(0,0,0)...).
.mon-element {
color: indigo; /* La couleur du texte est indigo */
border: 2px solid currentColor; /* La bordure sera aussi "indigo" */
box-shadow: 3px 3px 5px currentColor; /* L'ombre portée sera aussi "indigo" */
}
Résultat :
Si plus tard vous changez color: indigo; en color: orangered;, la bordure et l'ombre suivront automatiquement cette nouvelle couleur.
Alors, vous allez dire Ce n'est pas une révolution
. Oui, certes, mais attendez la suite. currentColor est particulièrement utile dans plusieurs scénarios :
border-color)C'est l'un des cas d'usage les plus évidents. Assurer qu'une bordure a toujours la même couleur que le texte adjacent.
button {
color: indigo;
border: 2px solid currentColor;
padding: 1rem 2rem;
border-radius: 1rem;
}
button:hover {
color: red; /* Change la couleur du texte au survol */
/* La bordure changera aussi automatiquement en "indigo" grâce à currentColor */
}
Résultat :
background-color)C'est une piste pour créer des effets de survol ou des états actifs où l'arrière-plan doit correspondre à une couleur, mais attention il n'est pas possible (de manière simple et native) d'inverser totalement les couleurs de fond et de texte avec une seule propriété. Donc votre lien ou bouton risque de devenir illisible car son fond prendra la même couleur que son texte.
fill et stroke)C'est l'un des usages les plus puissants. Les icônes SVG intégrées (inline SVG) peuvent hériter de la couleur du texte de leur parent. En utilisant les attributs fill="currentColor" ou stroke="currentColor" dans le code SVG, l'icône adoptera la couleur définie par la propriété color de son conteneur HTML, donc suivra la feuille de styles globale, plutôt que de rester mono-couleur.
Code HTML
<button class="btn-icon">
<svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
Intitulé du bouton
</button>
â ï¸ Cela suppose d'avoir bien intégré votre code SVG "inline" à l'intérieur du reste du code HTML, cela ne fonctionnera pas avec une image insérée par une balise <img> car le navigateur traite ce fichier comme une ressource externe et autonome, un peu comme une image classique PNG, JPEG, WebP, etc. Le contenu interne du SVG (ses formes, ses styles, y compris un éventuel fill="currentColor" ou stroke="currentColor") n'est pas directement accessible ou influencé par le code CSS de la page HTML qui contient la balise <img>.
Code CSS associé
.btn-icon {
color: indigo; /* Couleur initiale du texte ET de l'icône */
border: 2px dashed currentColor; /* Y compris la bordure */
border-radius: 1rem;
background: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: 2rem;
padding: 1rem;
}
.btn-icon svg {
/* Pas besoin de définir fill ou stroke ici car c'est déjà dans le SVG */
width: 2rem;
height: 2rem;
}
.btn-icon:hover {
color: orangered; /* Au survol, le texte ET l'icône deviennent "orangered" */
}
Résultat :
Pour revenir sur la limitation : si le fichier SVG lui-même contient fill="currentColor", cette valeur fera référence à la propriété color calculée à l'intérieur du contexte du SVG. Comme l'élément <img> ne transmet pas sa propre propriété color à l'intérieur du fichier SVG qu'il affiche, la variable dynamique currentColor dans le SVG ne pourra pas hériter de la couleur du texte de la page HTML. Il prendra généralement la couleur par défaut du SVG (soit du noir par défaut) ou une couleur définie à un niveau supérieur à l'intérieur du fichier SVG.
Pour créer des ombres (propriétés box-shadow, text-shadow) qui s'adaptent à la couleur du texte.
.txt-error {
color: darkred;
text-shadow: 1px 1px 2px currentColor; /* Ombre rouge foncé */
}
Mais aussi pour définir une des couleurs dans un dégradé avec linear-gradient ou radial-gradient :
.bg-gradient {
color: orangered;
background-image: linear-gradient(to right, currentColor, transparent);
}
Ici, le dégradé ira de orangered (= la valeur de color) à transparent.
Tl;DR Oui.
--main-color: indigo;) on peut ensuite se baser sur currentColor pour propager cette information aux bordures, icônes SVG, etc.currentColor est très bien supporté par tous les navigateurs (y compris depuis Internet Explorer 9 ð´). Vous pouvez l'utiliser sans crainte pour la compatibilité.