Text-emphasis-color - Propriété CSS
Résumé des caractéristiques de la propriété text-emphasis-color
currentcolor | transparentcurrentcolortext-emphasis-color passe progressivement d'une valeur à une autre.Schéma syntaxique de text-emphasis-color.
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
Description des termes utilisés sur le schéma :
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.
Syntaxes 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 CSS. La valeur par défaut est
currentColor, c'est à dire la couleur choisie pour le texte.
Valeurs globales
(communes à toutes les propriétés)
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.
Animation de la propriété text-emphasis-color.
Comme toutes les propriétés relatives aux couleurs, text-emphasis-color peut être animée d'une couleur à une autre.
Manipulation de la propriété text-emphasis-color par programme.
Les boutons "Test" exécutent les différents exemples de code. Pour ceux qui modifient la valeur de la propriété text-emphasis-color, l'effet
est immédiatement visible à l'écran.
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).
function setTextEmphasisColor(el) {
el.style['text-emphasis-color']='red';
// ou
el.style.textEmphasisColor='red';
}
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.
function getTextEmphasisColor(el) {
alert(el.style['text-emphasis-color']);
// ou
alert(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 règles de priorité). 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.
function getCalcTextEmphasisColor(el) {
alert(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.
function setTextEmphasisColor(el) {
$(el).css('text-emphasis-color','blue');
// ou
$(el).css('textEmphasisColor','blue');
}
Lire la valeur calculée de la propriété text-emphasis-color avec JQuery.
function getCalcTextEmphasisColor(el) {
alert($(el).css('text-emphasis-color'));
// ou
alert($(el).css('textEmphasisColor'));
}
Simulateur.
Prise en charge par les navigateurs (compatibilité).
text-emphasis-color.
du texte
text-emphasis-colorNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que text-emphasis-color.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-emphasis-color fait partie du module CSS - Décoration du texte (CSS Text Decoration Module). Les définitions suivantes sont également décrites dans ce même module.