WebKit – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 Firefox 51・Chrome 56リリース、Safari 10.1発表、Windows 10 Creator’s UpdateのEdge、WebKitほか──2017年1月のブラウザ関連ニュース /myakura/22272/ Tue, 07 Feb 2017 03:04:00 +0000 /?p=22272 連載： WEB標準化動向 (21)

2017年1月は新年早々いろいろ動きがありました。Firefox 51とChrome 56のリリース、Safari 10.1発表、Windows 10 Creator’s UpdateのEdge、WebKitにWebRTCとCredential Management API、Facebookとブラウザベンダー協力の話など、注目ニュースが満載です！

Firefox 51リリース

1月24日に、Firefox 51がリリースされました。

WebGL 2のサポートや、非HTTPSなページ上のパスワードフォーム入力についてのUI改善が目玉ですが、すでに知っているところだと思うので、地味なところをとりあげます。

::placeholder 疑似要素と :placeholder-shown 擬似クラスが実装されました。input 要素やtextarea 要素の placeholder 属性で指定するプレースホルダ周りのスタイルを調整するためのものです。前者はプレースホルダのテキストを、後者はプレースホルダが表示されているときの要素（input など）を表します。

SVGでは、xlink 接頭辞なしの href 属性がサポートされました。これまでSVG内で外部リソースを読み込んだりSVG内の要素を参照する際は、XLinkを使っていました。SVGがXMLのフォーマットというところに由来するのですが、名前空間の扱いの難やHTMLとの親和性などをふまえ、SVG 2.0で名前空間なしの属性が導入されました。

この名前空間なしの href 属性ですが、Internet ExplorerがSVGを初実装したIE9から使えます。SVGを実装するにあたって、検討段階だったSVG 2.0で取り入れたい機能の先行実装をさせたという話を以前SVG WGの人に聞いたことがあります。

SVGまわりでは、tabindex 属性や data- 属性に対応しました。使えなかったのに驚く方もいるかもしれませんが、これらはHTMLのグローバル属性だったので、SVGの要素では使えず、dataset プロパティなどのアクセサリーもなかったのでした。これらもSVG 2.0で導入されたものです。

Chrome 56リリース

1月25日に、Chrome 56がリリースされました。

パフォーマンスの観点から、タッチイベントハンドラの passive オプションがデフォルトで true になりました。Android版Chromeでは多くの場合、スクロールがスムーズになるとのことです。

CSSでは、position: sticky が復活しました。むかーしむかし実装されていたのですが、パフォーマンスの観点から削除されていたのでした。scroll イベントを監視しなくてもよくなるので、パフォーマンス向上が期待できる機能です。

Web PaymentsのPayment Request APIに追加された　canMakePayment()　メソッドがサポートされました。このメソッド、昨年AppleがWebでのApple Payを発表した祭、Web Paymentsにないものとして上げていたメソッドのひとつです。Web PaymentsのアクティビティにもAppleが関わり、APIの差異を埋めているようなので、今後に期待ですね。

他にも、border-image-repeat: spaceがサポートされています。これでようやく実装がそろった感じですね。

Safari 10.1発表

macOS Sierra 10.12.4のベータ版が開発者向けに公開され、Safariが10.1にアップデートすることがわかりました。昨年春にリリースされたSafari 9.1のように、WebKitがアップグレードされ、新しい機能が導入されます。

APIの目玉はCustom Elementsでしょうか。Safari 10でもShadow DOMがサポートされたので、Web Componentsがまたさらに進みます。
ほかにも、Fetch APIやIndexed DB API　2.0, Gamepad APIがサポートされます。Gamepad APIはすこし意外ですね…ブラウザでゲームパッドを使うようなゲームを提供する顧客がいるのでしょうか？

JavaScriptでは、ES2017仕様のAsync Functionsや SharedArrayBuffer に対応します。

HTMLでは、HTML 5のフォームバリデーション機能がついに実装されました。これまでもDOM上では検証していたのですが、invalidな際にフォームの送信をブロックするという挙動を実装していなかったのでした。

CSSではGrid Layoutが有効になります。リリース時期を春とすると、FirefoxやChromeと同時期になります。いっきに使いどころが増えそうです。

Windows 10 Creator’s UpdateのEdge

Microsoftのブログが活発に更新され、Windows 10 Creator’s Updateで提供される各種機能の紹介がされています。先月から引き続きいくつか取り上げます。

このエントリでは、タブのサムネイルや一時退避といったブラウザのUIの機能（Operaみたいですね）や、EPUB、Payment Requset APIのサポートなど、EdgeHTML 15で目玉になる機能をまとめています。

WebRTC 1.0は互換性のため実装を始めたもので、あくまでORTCを推奨していくという立場のようです。コーデックもVP8をサポートしましたが、ソフトウェアでコードのため電力消費やCPUの使用はH.264よりも高いとのこと。

他にも、Content Security Policy Level 2のサポート、フルカラー絵文字のサポートもあるようです。

WebKitにWebRTCとCredential Management API

Safari 10.1もうれしいですが、次期メジャーバージョンでも嬉しい機能が入りそうです。

ひとつは、WebRTCです。1月19日に、Appleのエンジニアによって、WebKitにWebRTCのライブラリがチェックインされました。

WebRTCについては、getUserMedia() の実装が進んでいましたが、通信周りのAPIは特に進んでいませんでした。EdgeもEdgeHTMLでWebRTC (1.0)を実装しますが、ようやくといったところでしょうか。

コミットログを読むと、Chromeのソースコードをインポートして利用しており、Chromeとの互換性がなかなか期待できそうです。

もうひとつは、Credential Management APIです。1月24日に、AppleのエンジニアがWebKitにCredential Management APIを実装予定という旨のメールをメーリングリストに投稿しています。

Credential Management APIはパスワードやソーシャルログインなど、ユーザーの認証情報を抽象化して扱うAPIで、ログイン周りの煩雑さを解消できます。現在はChromeでのみ使えますが、Safariでも使えるようになるとモバイルでのログイン周りがとても便利になりそうです。

次期iPhoneで顔認証が導入されるといった噂を目にしていまし、信憑性が高まった気もします。

Facebookとブラウザベンダーの協力

Facebookの開発者ブログに、ブラウザベンダーと協力してFacebookへのリクエストを省力化したという話が掲載されています。あわせて、Chrome、Mozillaの開発者ブログでも紹介されています。

Facebookは各種アセットを、ハッシュ付きURL＋長大なキャッシュ有効時間というキャッシュ戦略で運用しています。キャッシュの有効時間が長ければ、ブラウザは再読込の際に同じリソースをダウンロードする確率が低くなるので、ネットワークにやさしいです。

しかし、これまでのHTTPキャッシュでは、ダウンロードは防げても、リクエスト自体は起こってしまっていました。パフォーマンスの観点からもうれしくありません。Facebookが自身のアクセスを解析したところ、全体の60％がそういったリクエストだったそうです。更に調べると、他のブラウザが13％〜22％だったのに対し、Chromeだけは63％ととても高い数値を示していたとのこと。

これを解消しようとFacebookのエンジニアがChromeチームに働きかけ、挙動を変更。結果63％だったものが24％まで減少したとのこと。

Firefoxでは、Chromeと同様の挙動変更を行わない代わりに、Cache-Control: immutable という新しいヘッダの値を実装しました。このヘッダについては、Jxckさんが自身のブログにまとめているのでそちらをご覧ください。

]]> details要素がサポート追加となったFirefox 49リリース、Safari 10リリースやベンチマークのMotionMarkなど──2016年9月のブラウザ関連ニュース /myakura/21141/ Thu, 13 Oct 2016 23:58:18 +0000 /?p=21141 連載： WEB標準化動向 (17)

2016年9月のブラウザ関連ニュースは、details要素がサポート追加となったFirefox 49や、Safari 10リリースとベンチマークのMotionMarkなどについて紹介します。

Firefox 49リリース

9月20日に、Firefox 49がリリースされました。

今回はいつも以上にいろいろ追加されてる気がします。

HTML関連では、<details> 要素がサポートされました。トグルで表示・非表示を切り替えるウィジェットをJavaScriptなしに導入できます。

これ関連で面白いなと思ったのが、HTML5 <details> in GitHub です。参考情報としてエラーログなどを張りつける際にログを <details> で囲むことで、ページが長くなるのを防ぎます。

Qiitaでも対応したとのことなので、コード一式をとりあえず書いておくとかそんなときに使えそうですね。

DOMまわりでは、before(), after(), replaceWith(), append(), prepend() メソッドがサポートされました。jQueryで見たことがあるメソッド名が多いですが、それらとほぼ同様で、要素の追加・置き換えを行います。なお要素を削除する remove() については、Firefox 23からサポートされています。

CSSでは、Level 4の機能がいくつかサポートされました。

#rrggbbaa 式の色表記がサポートされました。こちらは先日Blinkでも有効にされかけたのですが、WebViewの誤った実装との互換性をとるため無効にされてしまいました。

background-clip: text がサポートされました。背景画像でテキストをくり抜く表現が実現できます。もともとWebKitの独自拡張でしたが、広く使われてしまったこともあり、Backgrounds & BordersモジュールLevel 4で定義されました。

background-position-x/-yもサポートされました。background-position は水平方向・垂直方向の位置両方を指定しなければいけませんが、これらを使うと個別の方向ごとに位置を指定できます。もともと古いIEやWebKitでサポートされていたもので、こちらもBackgrounds & BordersモジュールLevel 4で定義されました。

背景画像系ではほかにも、Level 3の background-repeat　の round と spaceがサポートされました。他のブラウザでは結構前からサポートされていたので、追いついたかたちです。

-webkit- サポートも追加

もともと独自拡張だった機能のサポートがこのバージョンで行われたのには理由があります。Firefox 49では、-webkit- 接頭辞つきのCSSプロパティやAPIの一部をエイリアスとしてサポートしたからです。これによって、主にモバイル向けWebサイト・アプリの互換性が向上します。

-webkit- の部分的サポートは突然始まったことではなく、日本や中国などの特定サイトに限定し行われていました。それが方針転換し、すべてのサイトに適用されるようになりました。

標準化された機能と接頭辞つき実装には、標準化の過程でプロパティ名や値の取り扱いなどに違いが生まれます。こうした違いをどう埋めるかを明文化すべく、Compatibility Standardという仕様も作られています。ただ、すべての接頭辞つき機能がここで記されるわけではなく、webkitMatchesSelector() などは標準仕様に取り込まれるかたちで定義されています。

Safari 10リリースとベンチマークのMotionMark

9月13日のiOS 10と9月20日のmacOS 10.12 Sierraリリースにともない、Safari 10がリリースされました。Sierraだけでなく、El Capitanにも提供されています。

Safari 10の新機能については、過去の記事で取り上げているので、気になる方はそちらをご覧ください。

さて、9月21日に、WebKitからMotionMarkという、グラフィックス処理のパフォーマンスを計測するベンチマークが発表されました。

MotionMarkは、既存のグラフィクス関連ベンチマークが抱えていたいくつかの問題を解決するために用意したとのこと。計測対象がフレームレートではなく、フレームレートが閾値以下になったときのアニメーションの複雑さであることや、いろんなテストをいちシーンに詰め込まず、問題を切り分けやすくするといった工夫がされているようです。

Safari 10でMotionMarkを実行した結果。スコアは145.15（±5.12％）


この記事を書いているマシン（2011年のMacBook Air、11インチモデル）上のSafari 10で実行してみた

]]> Edge Web Summit、Chrome 50、Firefox 46、WebKitなど─2016年4月のブラウザ関連ニュース振り返り /myakura/18864/ Tue, 10 May 2016 00:00:57 +0000 /?p=18864 連載： WEB標準化動向 (12)

2016年4月のブラウザニュースは、Edge Web Summit、Chrome 50リリース、Firefox 46リリース、WebKitの接頭辞ポリシー変更などについて紹介します。

Edge Web Summit開催

4月4日に、Edge Web Summitが開催されました。Microsoftは前々日にBuildカンファレンスを行っていましたが、Edgeはこちらに集中した印象です。

新たに発表されたのは、レンダリングエンジンEdgeHTMLのイシュートラッカーです。

Internet Explorer時代にもMicrosoft Connectで公開フィードバックはできましたが、こちらはエンジンのEdgeHTMLに特化しており、開発者とのコミュニケーションを強く意識しているように感じられます。

他にも、Webで使われているCSSプロパティなどを集めたデータも公開されました。ChromeチームもChrome Platform Statusで公開していますが、それと同等のものですね。

「使われている」の定義にもこだわっているようで、ただCSSファイルを解析しているわけではなく、WebページにアクセスしDOMとCSSOMを構築したうえで調べているとのこと。

現在バグのため padding 利用率が0％になっていますが （CSSの calc() 解釈まわりにバグがあるそう）、そのうち直るでしょう。

また、WebRTC関連のロードマップが更新されたことも発表されました。

これまでEdgeではORTCをサポートしていましたが、互換性への取り組みからWebRTC 1.0の一部も実装するようです。また、映像コーデックについてはH.264/AVCを実装中、さらに決定ではありませんがVP8も検討しているとのこと。

Chrome 50リリース

4月13日に、Chrome 50がリリースされました。ついに50なのですね。

新しい機能についてはBetaリリース時のポスト、およびDev Operaの記事が詳しいです。

新しい機能として、HTMLの link 要素に preload というものが加わりました。使われるであろうリソースをその種類とともに指定することで、先読みを実施できます。

たとえばWebフォントのURLなどに使いやすそうです。外部CSSでWebフォントが定義されている場合、まずそのCSSファイルを取得し解釈したのち、Webフォントをリクエストするため、パフォーマンスの向上が見込めそうです。

他に目立つのは、Canvasの toBlob() メソッドと、 ImageBitmap インターフェースでしょうか。

toBlob() は toDataURL() の Blob 版です。一度文字列を経由せずに、バイナリデータを直接さわれるのが魅力でしょうか。

ImageBitmap は、Canvasで画像を扱いやすくするAPIです。これまでは効率的に画像のデコードなどを行えませんでしたが、createImageBitmap() を使えば非同期に画像を容易できます。drawImage() のように描画を必要としないのも魅力的です。Workerにも提供されるので、画像の処理を別スレッドにもっていくのも容易です。

すでに他のブラウザでも一部実装されており、toBlob() はFirefox 19とIE10から、ImageBitmap はFirefox 42でサポートされています。

新しい機能が追加される一方で、削除・廃止予定の発表もあります。Chrome 50では、非HTTPS環境でGeolocation APIが利用不可に、同じく非HTTPS環境でAppCacheが廃止予定となりました。

位置情報の取得をGeolocation APIのみに頼っているサイトはHTTPSへの移行が強く推奨されていますが、Google Maps Geolocation APIなど別のサービスも紹介されています。

機能の削除や廃止については、blink-devメーリングリストで都度アナウンスされるほか、Chrome Platform Statusで「deprecated」「removed」と検索すると、すでに変更されたものも含め一覧を見られます。

また、廃止予定の機能を仕様している場合はコンソールにその旨が出ますので、たまにはちゃんと読みましょう。

Firefox 46リリース

4月26日にFirefox 46がリリースされました。

ES2015 に導入された RegExp の u フラグがサポートされました。絵文字や「𠮷」といったBMP外の文字はES5時代のJavaScriptでは扱いづらかったのでうれしいですね。

これに伴い、input 要素の pattern 属性の解釈を u フラグと同等にする変更がHTML仕様に入り、そちらもあわせて実装されました。たしかにフォームのバリデーションは u フラグつきの方がやさしそうですね。

はてなの開発者向けブログでも取り上げられています。わかりやすいです。

また、JavaScriptでのUnicodeの扱いはOperaのMathias Bynesの記事によくまとまっています。彼の講演も面白いですよ。

CSSでは、圏点を表示させる text-emphasis プロパティ群がサポートされました。小説などでは見る強調表現ですが、Webでも太字以外の強調が今後増えてくるのでしょうか。

他には、過去に紹介した -webkit- 接頭辞のプロパティサポートが有効になりました。日本のモバイル向けページなど、-webkit- 接頭辞に強く依存してるページの表示が向上すると思われます。

WebKitが接頭辞のポリシーを変更し、他エンジンに追従

4月26日に、WebKitがベンダー接頭辞に関するポリシーを変更すると発表しました。試験的な機能にベンダー接頭辞をつけることはせず、他エンジンのようにランタイムフラグを設けて試すようになります。

最近はツールの助けもあり、手で -webkit- などを書くことは少なくなっていると思いますが、すでに公開されたページではWebKitの接頭辞に依存したコードが残っていたりします。これをうけEdgeやFirefoxは互換性確保のためいくつかの機能をサポートしています。

接頭辞の廃止については、WebKitもしていきたいとのことですが、機能によりそうです。廃止が現実的でない機能については、Compat Standardでの定義など標準化によるサポートも必要でしょうか。

]]> 【HTML5 Experts.jp】2015年12月のブラウザ関連ニュース振り返り /myakura/18263/ Tue, 09 Feb 2016 00:00:54 +0000 /?p=18263 連載： WEB標準化動向 (8)

Chrome 47リリース

12月1日に、Chrome 47がリリースされました。

次期ECMAScript仕様の Array.prototype.includes() がサポートされました。これで indexOf() を使うハックから解消されますね。このメソッド、もともとは has() という名前で検討されていましたが、MooToolsで同名のメソッドが定義されてしまっていたため名前が変わったなんて経緯があります。

パフォーマンス関連では、 requestIdleCallback() というAPIがサポートされました。実行させたい処理のスケジューリングをよしなにしてほしい時に使うAPIです。そんな説明ではわからないと思うので、Google Developersのエントリや、エキスパートの川田さんがpixivのアドベントカレンダーで取り上げた詳細な記事をご覧ください。

DOMでは、Event.timeStamp の返す値が DOMTimeStamp から DOMHighResTimeStamp に変更されました。より細かい精度をもつ値を返すようになったのですが、DOMTimeStamp はUNIXのエポック時間を返すのに対し、DOMHighResTimeStamp はページヘのアクセスが起点になっていおり、互換性への懸念があります。

と思ったら、どうやらAngularのアニメーション機能で衝突したようです。MozillaでもFirefox NightlyとDeveloper Editionで限定的に有効にしているのですが、対策を検討しています。

最後にUIの話を。選択範囲の描画方法が変わりました。これまでChromeはSafariと同じようにテキストの外側にも選択範囲が描画されていましたが、今後はテキストや画像などの周りだけが選択範囲として描画されます。パフォーマンスの向上や、モバイルで選択範囲をわかりやすくするねらいがあるようです。

Chrome 46とChrome 47でページの一部を選択したスクリーンショット。

Chromeの選択範囲。46（左）ではページの大部分に選択範囲が描画されているのに対し、47（右）ではテキストまわりのみになっている

Firefox 43リリース

12月15日に、Firefox 43がリリースされました。

このリリースで、Chromeに続いてArray.prototype.includes() がサポートされました。リリースサイクルを考えるとFirefoxのほうがたぶん早く実装してるんですが、リリースは同時期になっちゃいましたね（タイミングが合うと使い始めやすいかもですが）。

今回も開発者ツールを取り上げましょうか。

Server Loggingというのが実装されました。サーバーから送られるメッセージをコンソールに出せるようです。仕組みとしてはChrome LoggerというChrome拡張が使ってるプロトコルをFirefoxの開発者ツールに実装したようです。仕様を見ると、独自のHTTPヘッダにBase64エンコードしたJSONを渡すというものだそうで。

スタイルパネルも便利になりました。スタイルを見るときに、別の宣言で上書きされていたりすることはしばしばです。どのスタイルで上書きされているかを調べるには、スタイルパネルを辿って調べるわけですが面倒です。そうしたものを簡単に見つける機能が追加されました。

Firefox開発者ツールのスタイルパネル

上書きされている宣言の横についている虫眼鏡アイコンをクリックすると、プロパティ名でフィルタをかけた状態になる

ほかにも、「Use in Console」なるコンテキストメニューがインスペクタパネルに追加されました。任意の要素の上で「Use in Console」を選択すると、それが temp0 といった変数から参照できます。

Firefox開発者ツールのインスペクタパネルで、Use in Consoleを実行。コンソールが開き、選択した要素がtemp0という変数として使えるように。

便利かどうかわかりませんが、$0 よりも多少使いやすいでしょうか。

EdgeのChakraがオープンソースに

12月5日に開催されたJSConf US Last Callでの発表で、Microsoft EdgeやInternet Explorerで使われているJavaScriptエンジン、Chakraがオープンソースになることが発表されました。

ただ発表時点では公開されませんでした。オープンソース化する部分の整備を進めており、公開されるのは1月になるとのこと。

オープンソースになるのは、ChakraCoreと呼ばれるものです。ChakraCoreはこれまでのChakraから、WindowsアプリやEdgeなどと連携させるためのプライベートAPIを除いたものとのこと。1月のリリース時にはWindowsでしか使えないようですが、今後は汎用的なJavaScriptエンジンとして利用できるように整備していくとのことです。

MicrosoftはWindows 10 IoTでNodeを利用するために、ChakraにV8のshimをはさんで動かすNodeを開発するなどしています。現行メジャーブラウザのJavaScriptエンジンがすべてオープンソースになるなんて、すごい時代になりましたね。

WebKitでタップ時の遅延が条件下で削除

モバイルブラウザで画面をタップしてから、反応までにすこし時間がかかると思った方はいるでしょうか。

それなりに知られている話だとは思いますが、これはダブルタップかシングルタップなのかを区別するために、シングルタップと認識するまでに意図的に遅延を入れているからです。ダブルタップでズームするという挙動があるため、ズームしたいのかタップなのかを区別するために入っているんですね。

この遅延、Chrome, Firefoxでは300ms、WebKitでは350msとなっています。

ただ、ChromeとFirefox、Edgeでは、特定の条件下でこの遅延を消せます。具体的には、viewportの指定が width=device-width や user-scalable=no と設定された、ズームを必要としないページについては、ダブルタップを区別しないでよいため、遅延がなくなります。

viewportによる遅延の削除はChrome 32、Firefox 30から、そしてEdgeは最初から対応しているのですが、SafariとWebKitはまだ対応できていません。iOS 8からはゆっくりタップした場合には遅延がないようになったらしいのですが、せっかちさんは救われません。

対応していないブラウザに対しては、fastclickなどのライブラリが開発されています。ただこうしたものは遅延を消すためにタッチイベントを使っているため、タッチイベントを利用するライブラリやページと競合するなんてこともあります。

今回の変更で、他のブラウザと同様の挙動になりました。また、viewportをカスタマイズできないページへの対応として、CSSの touch-action プロパティも実装されました。クリッカブルな要素に touch-action: manipulation を指定すれば、その要素はダブルタップを考慮しなくなり、遅延がなくなります。

]]> 【HTML5 Experts.jp】2015年10月のブラウザ関連ニュース /myakura/17525/ Wed, 25 Nov 2015 00:00:52 +0000 /?p=17525 連載： WEB標準化動向 (6)

Safari 9.0リリース

10月1日にOS X 10.11 El Capitanがリリースされ、先月のiOS版に続きOS X版のSafariも9.0になりました。

Safari 9.0ではWeb Inspectorに力がはいったようで、UIの刷新ほか既存の機能もかなり強化されています。

いくつかの機能は他のブラウザに追いついたものですが、スタイルサイドバーのMatch StylesやJavaScriptの型プロファイルはユニークですね。

また、ES6実装状況についても簡単にまとめた記事が公開されています。

ここ最近になりかなり実装が進んでいますが、Default parametersやArrow Functionsなどは次のメジャーバージョンになるようですね。

Chrome 46リリース

10月13日にChrome 46がリリースされました。新しく追加された機能などはChromium Blogのエントリ…よりもChromiumベースなOperaのブログのほうが読みやすいです。

rel=preconnect はCSSやスクリプトなどで他originのリソースを読み込む際にパフォーマンスを向上させられるかもしれません。詳しい説明や使い方は preconnect が定義されている Resource Hints仕様のEditorであるIlya Grigorikのエントリをお読みください。

DevToolsのUI変更中

そういえば、Chrome 45くらいからUIの変更を含め、DevToolsがいろいろ変わっています。こうした変更点について、Developer AdvocateのAddy Osmaniが行ったトークが公開されています。

また、先月発売されたWEB+DB PRESS 89号でもエキスパートの佐藤さんと泉水さんによるChrome DevToolsの解説記事が掲載されています。すこし先の変更（Chrome 47 Canaryでの情報をもとに執筆）とのことで、現時点のChromeと若干違うかもしれませんが、大いに参考になりそうです。

FirefoxがWebKit接頭辞つき機能のサポートを本格化

FirefoxのNightlyで、WebKitの接頭辞つき機能がサポートされ始めました。-webkit-linear-gradient、-webkit-radial-gradientといったCSSのグラデーションを始め、Element.webkitMatchesSelector()メソッドなどDOM APIにの実装も行われています。

WebKit接頭辞なCSSのサポートですが、これまでは中国や日本の一部のサイトに限って有効にされていました。

ただ思った以上にWebKit接頭辞のみを仕様していることなどから、やむなくすべてのサイトで有効にするようです。

こうしたマッピングをベンダー独自にやってしまうことで、新たな互換性問題を生んでしまう可能性もあります。このためMozillaのCompatibility Teamが中心となり、互換性のためのドキュメントCompatibility Standardの作業も始まっています。

また、Element.webkitMatchesSelector() についてはまとめやすさの都合からか、標準の Element.matches() エイリアスとしてDOM仕様で定義されました。ベンダー拡張だった機能の標準化はHTML、DOM、XMLHttpRequestなど多数の仕様で行われましたが、接頭辞つきの名前で仕様に定義されるのは、このメソッドが初めてかと思います。

なお、ベンダー接頭辞だけでなく、日本のWebが起こしている互換性の問題については、Compatibility TeamのKarl Dubostが以前に自身のブログに記しています。彼は今月のFirefox Developer Comferenceでも登壇し、互換性の話をしました。とてもおもしろかったので、ビデオが公開されたらチェックしてくださいね。

]]>