text-strokeis een experimentele eigenschap die opties voor tekstdecoratie biedt die vergelijkbaar zijn met die in Adobe Illustrator of andere tekentoepassingen voor vectoren. Het is momenteel niet opgenomen in een W3C- of WHATWG-specificatie. Vanaf juni 2013 wordt het alleen geïmplementeerd achter een -webkitleveranciersvoorvoegsel, hoewel toekomstige versies van Firefox en Internet Explorer de eigenschap kunnen ondersteunen (waarschijnlijk onder hun eigen voorvoegsels).
mark ( -webkit-text-stroke: 2px red; )De text-strokeeigenschap is eigenlijk een afkorting voor twee andere eigenschappen:
text-stroke-width, die de eenheidswaarde neemt (1px, 0.125em, 4in, enzovoort) en de dikte van het slageffect beschrijft.text-stroke-color, die een kleurwaarde heeft (hex, rgb / rgba, hsl / hsla, etcetera).
text-strokeheeft ook een begeleidende eigenschap, text-fill-colordie de coloreigenschap overschrijft , waardoor een gracieus terugval naar een andere tekstkleur mogelijk wordt gemaakt in browsers die dit niet ondersteunen text-stroke.
Nuttige Plaatsen
- De
text-strokelijn die wordt getekend door is uitgelijnd met het midden van de tekstvorm (zoals standaard is in Adobe Illustrator), en er is momenteel geen optie om de uitlijning aan de binnen- of buitenkant van de vorm in te stellen. Helaas maakt dit het veel minder bruikbaar, want ongeacht wat nu de lijn de vorm van de letter verstoort, vernietigt het de oorspronkelijke bedoeling van de letterontwerpers. Een instelling zou ideaal zijn, maar als we er een hadden moeten kiezen, zou een externe slag veel nuttiger zijn geweest. - in Webkit,
text-strokeis animeerbaar met CSS-overgangen en animaties - maar alleen de lijnkleur, niet de lijndikte. - Een meer browser-compatibele (en aantoonbaar robuuste) stand-in voor het
text-strokeeffect wordt gebruikttext-shadow, die wordt beschreven in dit CSS-Tricks-artikel.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Ingewikkeld | -webkit- |
Een opmerking over browserondersteuning: de bovenstaande tabel is een samenvatting van de algehele browserondersteuning voor text-stroke- de waarheid is veel gecompliceerder (Android ondersteunde bijvoorbeeld de eigenschap in versies 2.1-2.3 en verwijderde vervolgens de ondersteuning in 3.0, voordat de ondersteuning in 4.0 werd hersteld) . Ga naar caniuse.com/text-stroke voor de volledige tabel met browserondersteuning.