text-strokeest une propriété expérimentale qui fournit des options de décoration de texte similaires à celles que l'on trouve dans Adobe Illustrator ou d'autres applications de dessin vectoriel. Il n'est actuellement inclus dans aucune spécification W3C ou WHATWG. Depuis juin 2013, il n'est implémenté que derrière un -webkitpréfixe de fournisseur, bien que les futures versions de Firefox et Internet Explorer puissent prendre en charge la propriété (probablement sous leurs propres préfixes).
mark ( -webkit-text-stroke: 2px red; )La text-strokepropriété est en fait un raccourci pour deux autres propriétés:
text-stroke-width, qui prend une valeur unitaire (1px, 0,125em, 4 pouces, etc.) et décrit l'épaisseur de l'effet de trait.text-stroke-color, qui prend une valeur de couleur (hex, rgb / rgba, hsl / hsla, etc.).
text-strokea également une propriété compagnon text-fill-color, qui remplacera la colorpropriété, permettant un retour en douceur vers une couleur de texte différente dans les navigateurs qui ne prennent pas en charge text-stroke.
Points d'interêts
- Le trait dessiné par
text-strokeest aligné sur le centre de la forme de texte (comme c'est le cas par défaut dans Adobe Illustrator), et il n'y a actuellement aucune option pour définir l'alignement à l'intérieur ou à l'extérieur de la forme. Malheureusement, cela le rend beaucoup moins utilisable, car quoi qu'il arrive, le trait interfère avec la forme de la lettre, détruisant l'intention des concepteurs de caractères d'origine. Un réglage serait idéal, mais si nous devions en choisir un, le trait extérieur aurait été beaucoup plus utile. - dans Webkit,
text-strokeest animable avec des transitions et des animations CSS - mais uniquement la couleur du trait, pas la largeur du trait. - Un substitut plus compatible avec le navigateur (et sans doute robuste) pour l'
text-strokeeffet utilisetext-shadow, ce qui est décrit dans cet article CSS-Tricks.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | dix | Compliqué | -webkit- |
Une note sur la prise en charge du navigateur: Le tableau ci-dessus est un résumé de la prise en charge globale du navigateur pour text-stroke- la vérité est beaucoup plus compliquée (par exemple, Android a pris en charge la propriété dans les versions 2.1-2.3, puis supprimé le support dans 3.0, avant de restaurer le support dans 4.0) . Pour le tableau complet de prise en charge du navigateur, visitez caniuse.com/text-stroke.