ちゃふちゃふログ

日記や雑記、勉強したことの備忘録。

-webkit-text-fill-colorとcolorの違い

テキストの塗りつぶしの色(the fill color)を指定できる-webkit-text-fill-colorというプロパティがある。

developer.mozilla.org

これがcolorプロパティとどう違うのかと言うと、機能的な違いはたぶんないっぽい。
じゃあ使いどころがないのかというとそんなことはなく、(-webkit-)background-clipと組み合わせるとよい場合がある。

(-webkit-)background-clip: textで背景画像をテキストの形に切り抜くことができるが、テキストを透過させなければ切り抜いた背景が見えない。その場合、colorでtransparentを指定してしまうと(-webkit-)background-clip: textに対応していないブラウザでもテキストが透明になってしまうが、-webkit-text-fill-colorでtransparentにしておけば対応していないブラウザでは透明にならないのでフォールバックになるという寸法。というような回答がStack Overflowにあった。

stackoverflow.com

ちなみにデモはこちらIEで見るとcolorでの指定はテキストが透明になってしまっているが、-webkit-text-fill-colorでの指定はブラウザが対応していないためテキストが透明になっておらず、読めることがわかると思う

逆に言うと現状ではこの使い方くらいしかないと思うのだけど、今後別の新しい使い方が出てきたりするのかもしれない。