-webkit-text-stroke-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-stroke-color permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de color qui sera utilisée.

/* Valeurs de couleur */
/* Type <color>       */
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

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

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

Syntaxe

Valeurs

<color>: La couleur du contour pour les lettres.

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

HTML

<p>Texte avec un contour</p>
<input type="color" value="#ff0000">

CSS

p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; 
  /* Cette valeur peut être modifiée */
}

JavaScript

var colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", function(evt) {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});

Résultat

Spécifications

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

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-stroke-color` Non-standard	Chrome Support complet 1	Edge Support complet 15	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é.