Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between "-webkit-text-fill-color" and "color"?

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?

like image 923
android.nick Avatar asked Feb 15 '12 03:02

android.nick


2 Answers

From the WebKit blog:

text-fill-color – This property allows you to specify a fill color for text. If it is not set, then the color 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).

like image 168
Andrew Marshall Avatar answered Oct 04 '22 17:10

Andrew Marshall


-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/

like image 28
Micah Winkelspecht Avatar answered Oct 04 '22 17:10

Micah Winkelspecht