text-emphasis-color

La propriété text-emphasis-color définit la couleur utilisée pour dessiner les marques d'emphase. Celle-ci peut être (re)définie grâce à la propriété raccourcie text-emphasis.

Valeur initiale	`currentColor`
Applicabilité	tous les éléments
Héritée	non
Média	visuel
Valeur calculée	si la valeur est translucide, la valeur calculée est la fonction `rgba()`correspondante. Sinon, la fonction `rgb()`correspondante. Le mot-clé `transparent` devient `rgb(0,0,0)`.
Type d'animation	une couleur
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeur initiale */
text-emphasis-color: currentColor;

/* Valeur de couleur */
/* Type <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;

/* Valeurs globales */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: unset;

Valeurs

<color>: Définit la couleur utilisée pour les marques. Si on ne définit pas de couleur, ce sera la couleur courante du texte qui sera utilisée.

Syntaxe formelle

<color>où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
où 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Exemples

HTML

<p><em>Coucou</em>, je suis <em>là</em></p>

CSS

em {
  text-emphasis-style: sesame;
  text-emphasis-color: blue;
}

Résultat

Spécifications

Spécification	Statut	Commentaires
CSS Text Decoration Level 3 La définition de 'text-emphasis' dans cette spécification.	Candidat au statut de recommandation	Définition initiale.

Fonctionnalité	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Support simple	46 (46)^[1]	25.0-webkit	Pas de support	15.0-webkit	6.1-webkit 7.1

Fonctionnalité	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Support simple	46.0 (46)^[1]	4.4-webkit	Pas de support	33-webkit	7.1

[1] Dans Firefox 45, la fonctionnalité n'était pas activée par défaut, dans about:config, l'utilisateur doit activer la préférence layout.css.text-emphasis.enabled avec la valeur true.