Edited at

Firefox 49 と -webkit-text-stroke??

More than 1 year has passed since last update.


Firefox 49 と -webkit-text-stroke ??

https://jsfiddle.net/e60Lwsw8/6/


Firefox 49 で表示 :arrow_down:

2016-09-23-023902_1227x598_scrot.png


Firefox 49 (厳密には 48) から、上記のように縁取りCSSが使えるようになったのですが、


  • Firefox なのに -moz ベンダープレフィックスが効かない!!

  • Firefox なのに -webkit ベンダープレフィックスが効いてる!???

という、コトの流れを知らないと理解しがたい現象が起きます。


Firefox 49 の -webkit ベンダープレフィックスサポート

つい先日アップデートされた Firefox 49 から、Web ページの互換性向上のため-webkit ベンダープレフィックスのつく CSS プロパティをサポートするように なりました。

これらのサポートは、Firefox 48 の時点で about:config から layout.css.prefixes.webkit で切り替えられる (default = false) 機能でしたが、49から true がデフォルトになった形です。


サポートするプロパティ

https://developer.mozilla.org/ja/Firefox/Releases/49#Compatibility

詳細は上記サイトに譲りますが、たいがいのプロパティは Firefox で実装済み(もしくは -moz ベンダープレフィックスつきで実装済み)のプロパティに紐付けられ、それらへのエイリアスのような扱いになっています。

一方で、Firefox の既存機能に紐付かないプロパティも存在します。それが text-stroke 系プロパティのサポートです。


text-stroke プロパティ

text-stroke (text-stroke-*) プロパティによる文字の縁取りは、WebKit (Blink) では、-webkit ベンダープレフィックス付きですが、かなり昔から (caniuse.com によれば Chrome 4 から) サポートしてます。


h1 {

-webkit-text-stroke: 1px red;
}


Chrome で表示 :arrow_down:

stroke.png


iOS / Android (3以外) でも普通に使えるプロパティなので、モバイルデバイス向けのページ等で使っている方もいるのではないかと。

一方、標準化は進んでないようで、Chrome だろうと ベンダープレフィックスなしでは表示できません。


h1 {

text-stroke: 1px red; /* ベンダープレフィックスなし */
}


Chrome で表示 :arrow_down:

stroke-noprefix.png


それを裏付けるかのように、IE (Edge) / Firefox では、一貫してこのプロパティをサポートしていませんでした。

...先日までは。 :smirk:

Firefox 49 は、本来 Firefox に無かった機能である text-stroke を、 WebKit との互換性向上という目的で追加した結果、『Firefox なのに -webkit しか効かない』 というフシギな状態ができるワケですね。


:warning: サポートはあくまで "互換性向上"

Firefox の縁取りサポートで、CSSの表現力が高まる...と歓迎したいところですが、Mozilla の blog でも言及されている通り、 縁取りが 正式に Firefox の機能になったわけではありません。

実際、about:config でカンタンに切り替えられてしまう機能なので、あくまで WebKit との互換性向上のためのサポート と捉えましょう。Firefox で -webkit サポートを見越した縁取りCSSを書かないように!! :smiling_imp:


:kissing: .o( コレが標準化の起爆剤となって、ベンダープレフィックスなしの text-stroke プロパティになってくれるといいんですけどね... )