La propriété text-emphasis est une propriété raccourcie qui permet de définir text-emphasis-style et text-emphasis-color avec une seule déclaration. Cette propriété appliquera les marques d'emphase définies sur chaque caractères du texte de l'élément sauf pour les séparateurs (comme les espaces) et les caractères de contrôle.

La propriété text-emphasis est différente de text-decoration. La propriété text-decoration n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, text-emphasis a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.

La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. text-emphasis peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.

Note : text-emphasis ne réinitialise pas la valeur de text-emphasis-position. En effet, bien que la couleur et le style des marques puisse varier, il est très peu probable qu'on change leurs positions au cours du même document.

Syntaxe

/* Valeur initiale */
text-emphasis: none; /* Pas de marque */

/* Chaîne de caractères */
/* Type <string>        */
text-emphasis: 'x';
text-emphasis: '点';
text-emphasis: '\25B2';
text-emphasis: '*' #555;
/* À ne pas utiliser, cela pourra être */
/* considéré comme 't' uniquement      */
text-emphasis: 'toto'; 

/* Valeurs avec mot(s)-clé(s) */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* Valeurs avec mots-clés, combinés à une couleur */
text-emphasis: filled sesame #555;

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

Valeurs

none
Il n'y aura pas de marques d'emphase appliquées.
filled
La forme de la marque est remplie avec une couleur unie. Si aucun des mots-clés parmi filled ou open n'est présent, ce sera la valeur par défaut.
open
La forme de la marque est évidée.
dot
La forme de la marque est un petit cercle. Le cercle plein est le caractère '•' (U+2022) et celui qui est évidé est '◦' (U+25E6).
circle
La forme de la marque est un grand cercle. Le cercle plein est le caractère '●' (U+25CF) et celui du cercle évidé est '○' (U+25CB). Lorsqu'aucune forme n'est spécifiée, c'est la forme par défaut utilisée pour les modes d'écriture horizontaux.
double-circle
La forme de la marque est un double-cercle. Le double-cercle plein est le caractère '◉' (U+25C9), celui du double-cercle évidé est '◎' (U+25CE).
triangle
La forme de la marque est un triangle. Le triangle plein correspond au caractère '▲' (U+25B2) et celui du triangle évidé correspond à '△' (U+25B3).
sesame
La forme de la marque est un sésame. Le sésame plein correspond au caractère '﹅' (U+FE45) et celui du sésame évidé correspond à '﹆' (U+FE46). Lorsqu'aucune forme n'a été définie, c'est la forme par défaut qui est utilisée pour les marques d'emphase pour les modes d'écriture verticaux.
<string>
La marque affichée sera la chaîne de caractères. Attention à n'utiliser que des chaînes d'un seul caractère. L'agent utilisateur peut tronquer ou ignorer les chaînes qui comportent plusieurs graphèmes.
<color>
Définit la couleur utilisée pour la marque. Si aucune couleur n'est définie, la valeur utilisée par défaut sera currentColor.

Syntaxe formelle

<'text-emphasis-style'> || <'text-emphasis-color'>

Exemples

HTML

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

CSS

em {
  text-emphasis: sesame blue;
}

Résultat

Spécifications

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

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 25
Préfixée
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge ? Firefox Support complet 46
Support complet 46
Aucun support 45 — 49
Désactivée
Désactivée From version 45 until version 49 (exclusive): this feature is behind the layout.css.text-emphasis.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet Oui
Support complet Oui
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Préfixée
Support complet 4.4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android ? Edge Mobile ? Firefox Android Support complet 46
Support complet 46
Aucun support 45 — 49
Désactivée
Désactivée From version 45 until version 49 (exclusive): this feature is behind the layout.css.text-emphasis.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 33
Préfixée
Support complet 33
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 7.1Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,