-webkit-text-fill-color

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété -webkit-text-fill-color définit la couleur utilisée pour dessiner le contenu des lettres qui forment un texte. Si cette propriété n'est pas définie, c'est la valeur de la propriété color qui sera utilisée.

/* Valeurs de couleurs */
/* Type <color>        */
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100, 200, 0);

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

Syntaxe

Valeurs

<color>: La couleur utilisée pour colorer les lettres du texte.

Syntaxe formelle

<color>où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
où 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

p {
  margin: 0;
  font-size: 3em;
  -webkit-text-fill-color: green;
}

HTML

<p>Ce texte est vert.</p>

Résultat

Spécifications

Spécification	État	Commentaires
Compatibility Standard La définition de '-webkit-text-fill-color' dans cette spécification.	Standard évolutif	Définition initiale dans un standard.
Référence CSS Safari '-webkit-text-fill-color' dans ce document.	Documentation non-officielle, non-standard.	Documentation initiale.

Valeur initiale	`currentcolor`
Applicabilité	tous les éléments
Héritée	oui
Média	visuel
Valeur calculée	couleur calculée
Type d'animation	une couleur
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`-webkit-text-fill-color` Non-standard	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 49 Support complet 49 Support complet 48 Désactivée Désactivée From version 48: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Aucun support Non	Opera Support complet 15	Safari Support complet 3	WebView Android Support complet 37	Chrome Android Support complet 18	Firefox Android Support complet 49 Support complet 49 Support complet 48 Désactivée Désactivée From version 48: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Support complet 15	Safari iOS Support complet 2	Samsung Internet Android Support complet 1.0

Légende

Support complet: Support complet
Aucun support: Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.: Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
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é.