すべてがWebKitになる

  • 33
    いいね
  • 2
    コメント

Q. 以下のHTMLをFirefox 50で表示した場合、赤い図形はどのような形になるだろうか?

<style>
  #target {
    background-color: red;
    height: 200px;
    width: 200px;
    border-radius: 0; /* 正方形 */
    -webkit-border-radius: 100px; /* 円形 */
    -moz-border-radius: 20px; /* 角丸四角 */
  }
</style>
<div id="target"></div>

順当に考えれば「正方形」か「角丸四角」に絞り込まれるはずだ。
詳しい人であれば、ベンダープレフィックスの廃止を問う問題だと考えるかもしれない。

「border-radius」は主要なブラウザにおいてベンダープレフィックス無しで実装されており、
「-moz-border-radius」は2012年にリリースされたFirefox 13から廃止されている。
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius#Gecko_notes
よって、解答は「正方形」になる……と思いたい。








さて、実際に表示した結果が、以下のスクリーンショットである。

firefox.png

「円形」だ。「円形」なのだ。

今となっては希少な、UserAgentにWebKitが含まれないブラウザであるFirefoxは、よりにもよって「-webkit-border-radius」を解釈するのである。

種を明かすと、about:configにて「layout.css.prefixes.webkit」がtrueだと、webkitプレフィックスの付いた一部のプロパティを解釈する。
これはFirefox49からデフォルト有効化された機能で、リリースノートにも「既存のコンテンツとの互換性を高めるため」として記載されている。
https://developer.mozilla.org/ja/Firefox/Releases/49#Compatibility




さて、これで終わりあればよかったのだが、本項のタイトルは「すべてがWebKitになる」である。

OperaがWebKitの軍門に下った今、WebKitに属さない勢力といえば、Firefox以外にMicrosoftが挙げられる。
では、Microsoft Edgeで同じHTMLを表示した場合、どうなるだろうか。




実際に表示した結果が、以下のスクリーンショットである。

edge.png

「円形」だ。「円形」なのだ。

UserAgentでMozillaを名乗り、WebKitを名乗り、Chromeを名乗り、Safariを名乗るブラウザMicrosoft Edgeは、当然のように「-webkit-border-radius」を解釈するのである。

WebKitを名乗ってはいるが、Edgeは独自のレンダリングエンジンを採用している。
webkitプレフィックスの解釈は「互換性を高めるために」意図的に実装されているのである。
https://msdn.microsoft.com/ja-jp/library/mt270097


Webの標準化は果たして何処へと向かっているのだろうか。