Text-emphasis-color - Propriété CSS

Schéma de la syntaxe de text-emphasis-color.

Description des termes utilisés sur le schéma :

• #xxxxxx est le code hexadécimal d'une couleur, sur 3, 6 ou 8 digits.
• name est le nom d'une couleur prédéfinie. Voir Nuancier
• color est une couleur définie par l'une des fonctions de couleurs de CSS : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété text-emphasis-color.

text-emphasis-color définit la couleur des caractères ou des formes géométriques utilisés pour la mise en exergue d'un texte.

Exemple de mise en exergue avec des cercles de couleur rouge.

Pour davantage d'informations sur la mise en exergue reportez-vous à la propriété résumée text-emphasis.

Valeurs pour text-emphasis-color.

• text-emphasis-color: #807714; text-emphasis-color: lavender; text-emphasis-color: rgb(48,117,240); Etc.

  La couleur des caractère de mise en exergue peut être définie dans toutes les syntaxes reconnues par CSS : voir Les couleurs. La valeur par défaut est currentColor, c'est à dire la couleur choisie pour le texte.

• text-emphasis-color: initial; (currentcolor) text-emphasis-color: inherit; text-emphasis-color: revert; text-emphasis-color: revertLayer; text-emphasis-color: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de text-emphasis-color.

Comme toutes les propriétés relatives aux couleurs, text-emphasis-color peut être animée d'une couleur à une autre.

Accéder à la propriété text-emphasis-color par programme.

Modifier la valeur de text-emphasis-color en Javascript.

On voit que Javascript accepte une syntaxe avec la notation typique de css, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation plus courante en Javascript, en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['text-emphasis-color'] = 'lightBlue'; // ou let el = document.getElementById('id'); el.style.textEmphasisColor = 'lightBlue';

Lire en Javascript la valeur de text-emphasis-color.

L'exemple de code ci-après ne fonctionne que si la propriété a été affectée via l'attribut style de l'élément, dans le code HTML. Pour récupérer une valeur affectée via un sélecteur CSS, voyez l'exemple d'après.

let el = document.getElementById('id'); let value = el.style['text-emphasis-color']; // ou let el = document.getElementById('id'); let value = el.style.textEmphasisColor;

Lire la valeur calculée de text-emphasis-color en Javascript.

La valeur calculée résulte de l'évaluation de la cascade des héritages et des règles de priorité (voir Les priorités). Si aucune valeur n'a été affectée, et qu'il n'y a pas de valeur héritée, la valeur calculée est la valeur initiale de la propriété (currentcolor pour text-emphasis-color).

Quelque soit la syntaxe utilisée pour la définir, la valeur calculée de text-emphasis-color est renvoyée sous la forme rgb(), ou rgba() si la couleur n'est pas totalement opaque.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('text-emphasis-color');

Modifier la valeur de la propriété text-emphasis-color avec JQuery.

Comme Javascript, JQuery accepte le nom de la propriété écrit indifféremment en kebab-case ou en camel-case.


$('#id').css('text-emphasis-color', 'lightBlue');
// ou
$('#id').css('textEmphasisColor', 'lightBlue');


Lire la valeur calculée de la propriété text-emphasis-color avec JQuery.

let value = $('#id').css('text-emphasis-color');

Autres exemples de code.

Reportez-vous à la page Javascript et CSS pour d'autres exemples de code Javascript ou JQuery, manipulant le CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété text-emphasis-color et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de text-emphasis-color. On constate en particulier que les couleurs dans l'espace de couleurs srgb sont toujours mémorisées sous le forme rgb() ou rgba(), et que les couleurs dans un autre espace sont mémorisées avec la fonction color().

Exemple interactif avec la propriété text-emphasis-color.

Compatibilité des navigateurs avec text-emphasis-color.

Remarques :

(1) Avec le préfixe du navigateur -webkit-.

1

Mise en emphase
du texte

2

Propriété
text-emphasis-color

Estimation de la prise en charge globale.

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

1

Baidu Browser

1

Opéra

Samsung Internet

Chrome

Safari

Firefox

Safari sur IOS

Edge

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété text-emphasis-color.

• Module CSS - Décoration du texte - Niveau 3

  Première présentation de la propriété text-emphasis-color.
  

  27 Janvier 1999

  Document de travail.

  

  01 Août 2013

  Candidat à la recommandation.

  

  

• Module CSS - Décoration du texte - Niveau 4

  Pas de changement concernant la propriété text-emphasis-color.
  

  13 Mars 2018

  Document de travail.

  

  

  

Voir aussi, à propos de la décoration du texte.

Le module de spécification CSS Text Decoration Module regroupe les attributs de décoration de texte : mise en emphase, ombrage, soulignement, etc. La propriété text-emphasis-color est décrite dans ce module, ainsi que les propriétés suivantes :

Propriétés :