Firefox の最新版、Firefox 31 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。
HTML5 の track 要素に対応 （WebVTT） したほか、接頭辞が -- に変更された、CSS Variables （CSS カスタムプロパティ） の最新仕様に対応し、利用可能です。その他、ECMAScript 6 の実装がさらに進んだり、CSS.escape() が実装されるなどしています。
track 要素への対応
track 要素は、動画ファイルや音声ファイルに対して、それと同期する外部のテキストトラックを埋め込みます。audio、video 要素の子要素として使用可能です。track 要素について詳しくは下記をご覧ください。
Firefox は WebVTT 形式のテキストトラックに対応します。WebVTT 形式のテキストトラックは UTF-8 で記述された比較的単純なテキストファイルで、下記のような形式で記述できます。
WEBVTT 00:01.000 --> 00:04.000 Never drink liquid nitrogen. 00:05.000 --> 00:09.000 -- It will perforate your stomach. -- You could die. 00:10.000 --> 00:14.000 The Organisation for Sample Public Service Announcements accepts no liability for the content of this advertisement, or for the consequences of any actions taken on the basis of the information provided.
仕様に関しては下記にありますが、基本形は開始時間、終了時間を HH:MM:SS.sss 形式で指定して、あとはテキストトラックを記述する形。テキストトラックファイルの MIME タイプは text/vtt になります。
CSS Variables 最新仕様への対応
CSS Variables （CSS カスタムプロパティ） に関しては、過去に当 Blog でも書いていますので、そちらをご確認ください。
CSS Variables は、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様です。定義した変数を他のスタイル宣言内で参照することができ、より効率的な CSS の記述が可能になります。
CSS.escape() の実装
Selectors API の querySelector() や querySelectorAll() で指定するセレクタは、CSS セレクタの命名規則に基づいて、特定の文字列にエスケープ処理が必要です。例えば id="hee:haw" のような ID セレクタを持つ要素を、querySelector() で取得する場合、document.querySelector("#hee\:haw"); のように記述しなければなりません。
しかし、CSS.escape() を使用することで、この手間がなくなり、下記のように書くことができます。
document.querySelector('#' + CSS.escape(hee:haw));
カラーピッカーがより使いやすく
以前、下記の記事でも書きましたが、Firefox 31 の開発ツールに、閲覧中の Web ページから色情報を取得する新しいカラーピッカー機能 「Eyedropper」 が実装されました。1px 単位で選択できるため、細かいグラデーションなどの一部でもピックアップしやすくなっていて便利です。
その他にも、開発ツールが強化されました。詳しくは下記の記事をご覧ください。
その他、セキュリティアップデート
緊急 3項目を含む、計 11項目にわたるセキュリティアップデートが行われています。Firefox 31 で行われたセキュリティアップデートについて詳しくは下記のページを参照してください。
