2016年8月のブラウザ関連ニュースは、8月2日にリリースされたFirefox 48、8月31日にリリースされたChrome 53について紹介します。
Firefox 48リリース
8月2日に、Firefox 48がリリースされました。マルチプロセスが状況に応じて有効化されたり、Chrome拡張API互換のWebExtensionsが安定版となったりしました。
Web関連の新機能ですが、Web Animations APIのひとつ Element.animate() がサポートされました。
とても雑に紹介するならば、jQueryの animate() メソッドの標準版です。とはいってもCSSアニメーションとおなじバックエンドを使うため、基本的にjQueryのアニメーションよりもスムーズ・低負荷なものになるはずです。
CSSでは text-combine-upright: all がサポートされ、縦中横ができるようになりました。縦中横は日本語の縦書きで、短い桁の数値を一文字分に収めたりするのによく使われています。
通常は横に寝てしまう「28」を縦中横にしたので、ちょっと読みやすくなった
開発者ツールには、Firebug由来の機能が追加されました。ほかにも、CSSのルールを編集する際によく使われるプロパティ名が優先的にサジェストされるなど、細かなところの使い勝手が向上しています。
EdgeHTML 14リリース
8月3日にWindows 10 Anniversary Updateがリリースされ、Microsoft EdgeもEdgeHTML 14を搭載した新しいものにアップグレードされました。
このAnniversary Updateで、Edge公開時点のロードマップで言及されていた拡張機能がついに導入されました。こちらもChrome拡張APIと互換となっています。これで拡張を作るモチベーションが多少上がりますね。
EdgeHTML 14で導入されたWeb関連機能は多岐にわたります。Web Notifications APIやWOFF 2.0などはすでに実装・利用されていますが、Fetch APIやES 2015, ES 2016など他のブラウザと同じ時期に実装しているものもあります。また、FIDO 2.0などはEdgeが先行しています。今後の動向も注目です。
Chrome 53リリース
8月31日に、Chrome 53がリリースされました。
52でのMac版に続き、Windows版でも見た目がすっきりしました。これについて、リデザインに関わったGoogleのSebastien Gabrielが、その経緯や技術的なところをMediumに投稿しています。
Material Designへの移行にあたり、SVGでおこしたデザインをコードに変換する方法に切り替えたことで、使っていた画像のアセットが大幅に減ったといった話などは面白いですね。
Web関連機能では、新しいShadow DOMのAPI、通称「Shadow DOM v1」が実装されました。
Shadow DOMはChrome 35から実装されていますが、これは「v0」と呼ばれる、Blinkのみでしか使えないものです。標準化が進むにつれ、APIに結構大きな変更が生まれたため、新しいAPIは「v1」として区別されています。v1 APIは他ベンダーの合意もとりつけ、Safari 10でも実装されます。
Android版では、Payment Request APIが有効になりました。
モバイルで決済をする際にとても煩わしいのが、決済フォームへのクレジットカード番号や住所の入力でしょう。Payment Request APIは、端末やブラウザに保存されている情報を利用し、それらをブラウザ側で用意されたUIで提供することで、決済周りの体験をスムーズにする目的で策定されているAPIです。
こちらもAndroid版ですが、muted 属性が指定された video 要素に限り、autoplay 属性や play() メソッドによる自動再生が可能になりました。
これまではビデオの自動再生ができなかったため、アニメーションGIFやCanvasで擬似的に行うといったハックが使われていました。しかしアニメーションGIFには容量の増大や色数の制限、描画パフォーマンスなどに問題がありますし、CanvasもビデオファイルをJavaScriptでデコードするといった無茶をしており、うれしくありません。こうした本末転倒な状況を解消するため、無音状態に限り自動再生できるように要件が緩和されました。
同様の変更は、iOS 10のSafariでも行われます。
多くのサイトが、負荷の高いアニメーションGIFからビデオに移行してくれればなあと強く思います。