2016年3月のブラウザニュースは、Chrome 49の新機能、Firefox 45とinnerText、WebAssembly実装のプレビュー、Edgeの拡張機能、Safari 9.1リリースなどについて紹介します。
Chrome 49でCSS Variablesサポート
3月2日に、Chrome 49がリリースされました。新機能はベータ版がリリースされた際にまとめられています。また、同じエンジンを搭載するOpera 36のリリース記事でも紹介されています。
- Google Developers Japan: Chrome 49 ベータ版: CSS Custom Properties、Background Sync、ES2015 の新機能など
- Dev.Opera — What’s new in Chromium 49 and Opera 36
注目はCSS Custom Properties(通称Variables)でしょうか。プリプロセッサやポストプロセッサが持つ変数とちがい、ちゃんと継承されるというのが特徴です。これを利用し、Jake Archibaldが、display
の値をカスタムプロパティで定義し、外部CSSが読み込まれた際に block
に書きかえさせ段階的にCSSを読み込ませるというアイデアを披露しています。
V8も更新され、ES2015のdestructuringとdefault parametersが使えるようになりました。また、Promiseのrejectionを検知する unhandledrejection
イベントおよび rejectionhandled
イベントもサポートされました。
Firefox 45と innerText
3月8日に、Firefox 45がリリースされました。
ES 2015のClass構文が有効にされています。うれしいですね。
他には、他ブラウザとの互換性のため innerText
プロパティがサポートされました。要素内の「レンダリングされたテキスト」を取得するプロパティです。
この「レンダリング」というのが曲者です。要素内の文字列を取得するには textContent
プロパティがありますが、こちらは「DOM要素内のテキスト」なので display: none
などが指定された要素内のテキストももちろん返ります。いっぽう、 innerText
はレンダリング結果を考慮するため display: none
な要素内のテキストは結果に入りません。
innerText
はブラウザ拡張などで外部サイトをいじったりするときには便利だったりしますが、レイアウトを行うためパフォーマンスに影響があります。単純に要素のテキストを取得したい場合は textContent
を使いましょう。
WebAssembly実装のプレビュー
3月15日に、Mozilla、Google、Microsoftが、WebAssemblyの実験的なサポート状況について公開しました。WebAssemblyの試験実装は昨年から進められていますが、3ブラウザで相互運用可能な状態になったとのことです。
- WebAssembly が 1 つのマイルストーンを達成しました: 複数ブラウザによる実験的なサポートがはじまりました | Mozilla Japan ブログ
- Google Developers Japan: V8 で WebAssembly を試験運用開始
- Previewing WebAssembly experiments in Microsoft Edge | Microsoft Edge Dev Blog
FirefoxとChromeについては、NightlyやCanaryでフラグを有効にすると試せます。
WebAssemblyについては、中心人物のひとり、MozillaのLuke Wagner氏へのインタビューが面白いです(インタビューの場に混ぜていただきました)。インタビューが行われたMozillaのView Source Conferenceでのセッション資料も参考になります。
また、先日ポッドキャストでのインタビューも行われています。こちらもあわせてどうぞ。
Edgeの拡張がプレビュー版に
Microsoft Edgeの拡張機能が、ついにプレビュー版に入りました。
拡張は正式リリース時にはWindows Storeから追加できるようになるそうです。
拡張の構造はChrome拡張互換のAPIですが、現時点では本家やMozillaのWebExtensionsと少し違い、chrome
オブジェクトが browser
オブジェクトに変わっているそうです。ちょっと面倒ですね。
- Micorosoft Edge(プレビュー)の拡張を作ってみる – ぷろじぇくと、みすじら。
- Micorosoft Edge(プレビュー)の拡張について調べる、デバッグする方法 – ぷろじぇくと、みすじら。
サポート予定のAPIはロードマップが公開されています。Firefox, Edge, Chromium系で(だいたい)同じコードで拡張が動くようになるのでやる気がでますね。
Safari 9.1リリース、さらにTechnology Preview登場
3月21日に、OS X 10.11.4とiOS 9.3がアップデートされ、Safari 9.1がリリースとなりました。WebKitのブログで新しい機能が紹介されています。
新しい機能は内部的に利用されてもいるようで、追加されたCSS Custom Propertiesを使い、Web Inspectorのコードをシンプルにした話もエントリとして公開されています。
さらに、3月30日、Safari Technology Previewという開発者向けのビルドが公開されました。
Safari Technology Previewはリリース版のSafariよりも新しいWebKitを搭載したビルドで、2週間にいちど更新されます。最初のビルドではES2015のArrow Functionsやイテレータ、Web標準ではShadow DOM (v1)などが使えるようになっています。
なお、レンダリングエンジンのWebKitはこれまでもナイトリービルドを提供していましたが、Safari Technology Previewは独立したUIを持ち、App Storeから更新されるといった違いがあります。
現段階でiOS版のプレビューは提供されていませんが、多くの人がそれを望んでるだろうとは認識しているとのこと。こちらのほうが出ると嬉しいので、要望をあげましょう。