I'm trying to understand the difference between -webkit-text-fill-color
and just simply color
? Is there any functional difference? So far as I can tell, they're exactly the same.. Is there something you could do with one but not the other?
From the WebKit blog:
text-fill-color
– This property allows you to specify a fill color for text. If it is not set, then thecolor
property will be used to do the fill.
So yes, they are the same, but -webkit-text-fill-color
will take precedence over color
if the two have different values.
I think the rationale for this is that you can choose a different color if you want when using -webkit-text-stroke
, but it will gracefully fall back to color
if -webkit-text-stroke
isn't available (and thus -webkit-text-fill-color
isn't either). There may be cases where you would otherwise end up with unreadable text.
Please note that, as of 2021, -webkit-text-fill-color
(and probably other -webkit
prefixed properties) are not necessarily exclusive to WebKit-based browsers (i.e. it works in Firefox).
-webkit-text-fill-color
can be set to transparent
which allows you to do some really interesting things on text, like setting a horizontal gradient. Check out this rainbow text example: http://jsfiddle.net/DoubleYo/qGfzm/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With