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

Question

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?

Lipoma

Answer 1

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).

Gutbucket

To add upon your answer: -webkit-text-fill-color allows the targeting of only Webkit-based browsers, while color can be used to target the rest. – Elliottellipse

True, -webkit-text-fill-color is specific to Webkit. Furthermore, the color property extends to borders. If you assign a border to an element with a color property and not specify the border color, the border will default to the color property. – Compute

Of course it's specific to webkit, that wasn't really what was being asked - since eventually text-fill-color might be added by all other browsers. I was more so trying to get the rationale of what you would use it for, or how it would benefit someone when it does the same thing as another property. Andrew's rationale seems to make sense. – Lipoma

difference is visible between these two on iOS. Safari tend to set disabled input color to its own predefined color and it will override color you define in your CSS. The only way to change it appearance till now is to use -webkit-text-fill-color – Fike

An additional difference (at least as of now, I don't know about the situation in 2012) is that color sets the keyword currentcolor. This can then be used elsewhere (see developer.mozilla.org/en-US/docs/Web/CSS/color). Also just to note that text-fill-color is apparently not on a standards track though all major browsers do seem to support it, albeit with the -webkit- prefix. – Scissile

Answer 2

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

Diminished

This still works when you change '-webkit-text-fill-color' to 'color'. – Latton

@NickRetallack It does, but this is a case where you can use it to target Webkit specifically. As only Webkit supports [-webkit-]background-clip: text, If you set the color to transparent and opened it in a non-Webkit browser, the text would be entirely invisible! This lets you use a fallback color for other browsers that will show on top of the gradient, while letting Webkit continue to be pretty. – Marinara

is it possible to apply transition for this property? – Factotum