Search code examples
csscolorswebkitfill

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?

Solution

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