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は、既存のグラフィクス関連ベンチマークが抱えていたいくつかの問題を解決するために用意したとのこと。計測対象がフレームレートではなく、フレームレートが閾値以下になったときのアニメーションの複雑さであることや、いろんなテストをいちシーンに詰め込まず、問題を切り分けやすくするといった工夫がされているようです。
この記事を書いているマシン（2011年のMacBook Air、11インチモデル）上のSafari 10で実行してみた