今月より、ブラウザ関連のニュース、とりわけレンダリングエンジンに実装されたWebプラットフォーム機能について取り上げる月一の連載を開始したいと思います。1月も後半ですが、2013年12月の話題を取り上げます。
注：MozillaやChromeのコミットログを主な情報元としているため、ここで紹介する機能がすぐに使えるとは限りません。
Firefox ― CSS Variablesをはじめ、機能拡張いろいろ
12月に「おおっ」と思ったのは、Firefoxでした。CSS Variablesなど目を引く機能が追加されました。Multiline Flexboxや開発者ツールのCSS Source Mapsなど、これが入ってくれたら助かると思った機能もサポートされました。
CSS Variablesがサポート
CSS Variablesがサポートされました。Firefox 29以降でlayout.css.variables.enabledを有効にすると利用できます。
- CSS Variables in Firefox Nightly ✩ Mozilla Hacks – the Web developer blog
- CSS Variables in Firefox 29 • Cameron McCormack’s blog
CSS Variablesは、変数として利用可能なカスタムプロパティを定義する仕組みです。カスタムプロパティはvar-接頭辞付きのプロパティに値を設定し定義できます。カスタムプロパティの値は、var()内にプロパティ名を入れることで参照できます。
:root {
var-foreground: #222;
var-background: #eee;
}
body { color: var(foreground); background-color: var(background); }
名前の通り「プロパティ」ですので、SassやLESSなどのCSSプリプロセッサの変数とは違い、宣言として書かなければいけません。定義と参照で表記が違う点も含めて、少しクセがありますね。宣言として書く都合上、グローバルな変数は:rootセレクタのブロックにでも定義するとわかりやすいかもしれません。
CSS VariablesはBlinkでもすでに実装されていますが、仕様が未成熟なため、フラグを有効にしなければ利用できません。またコードが管理されていないことから、先日WebKitから削除されたなど、対応状況もよくありません。
また、Mozilla Hacksのポストなどには、構文への不満や「Sassがあるのになぜ必要？」といったコメントも寄せられています。DOMからのアクセスができることや継承するなど、プリプロセッサの変数にはない優位性もあるのですが、なかなか理解されるのは難しいかもしれません。
スタイルの継承については、エキスパートの谷さんが書かれたCSS Variablesのエントリでも触れられています。
input要素のnumber型が有効に
input要素のnumber型（type="number"）がAuroraとNightlyで有効になりました。問題なければFirefox 28から利用可能になります。
number型は数値入力用のinput型です。実装されているデスクトップブラウザでは、入力ボックスの右側にスピナーコントロールが付き、値を増減できます。
Firefoxでのinput要素のnumber型。他のブラウザと同じくスピナーコントロールが用意されている
さて、今回の実装を担当したJonathan Watt氏のエントリにおいて、小数点がドット（.）のままでローカライズされないことが触れられています。HTML仕様では小数点はドットとなっているものの、小数点をカンマ（,）で表記する地域もあります。Watt氏のエントリには、チェコなどではカンマを使うため、現在の実装では使いものにならないといったコメントも寄せられています。フォームのローカライズはHTML仕様で推奨されているものの、その仕組みは定義されていません。まだまだ検討が必要ですね。
開発者ツールがCSSのSource Mapsをサポート
開発者ツールでCSSのSource Mapsがサポートされました。Firefox 29以降でdevtools.styleeditor.source-maps-enabledを有効にすると利用できます。Source MapsのサポートはChrome DevToolsでJavaScript, CSSどちらも対応していますが、Firefoxの開発者ツールでは、これまでJavaScriptのみの対応となっていました。
Firefoxの開発者ツールでCSSをインスペクトすると、Source mapsによってlessファイルにリンクされる
ブラウザの開発者ツールは、該当するスクリプトやスタイルのファイル・行数などを表示してくれますが、minify/compact化されたソースにはあまり役立ちませんでした。Source Mapsは、CoffeeScriptやSass/LESSなどでコンパイルされたJavaScript/CSSファイルと、もとのファイルの行数・桁目を対応させるマッピングの仕組みです。詳しい仕組みはHTML5 Rocksなどの記事をご覧ください。
- Introduction to JavaScript Source Maps – HTML5 Rocks
- An Introduction to Source Maps | Nettuts+
- An Introduction to Source Maps – Treehouse Blog
CSSのSource Maps出力はSass, LESSといったCSSプリプロセッサのほか、CSSポストプロセッサのAutoprefixerなども対応しています。
Multi-line Flexboxがサポート
Multi-line Flexboxは、複数行にまたがるFlexboxです。FirefoxでのサポートはFirefox 22からですが、Multi-line Flexboxのサポートが行われない限定的なものでした。今回サポートされたことによりかなり使えるものになりました。
Flexboxでは、flexアイテムの幅・高さがflexコンテナのそれよりも大きくなってしまう場合、そのままではFlexコンテナの幅・高さが自動的に調整されたり、overflowを引き起こしたりします。しかしflex-wrapなどのプロパティを使えば、複数行にまたがります。
ふつうのFlexboxとMulti-line Flexboxの違い。Multi-line Flexboxはflexアイテムの幅に応じて行送りがなされる（jsdo.itで見てみる）
他のエンジンでは、Blink, Tridentで接頭辞なしのサポート、Safariでは接頭辞つきのサポートが行われています。Firefoxの実装も接頭辞なしですので、Safari以外では接頭辞なしで利用可能です。バージョンごとの対応状況は、caniuse.comのFlexbox対応状況をご覧ください。
Chrome, Opera ― Element.matches()、DevToolsのUI改善
12月のBlinkは一足早く冬休みモードだったのか、そこまでコミットもなくおとなしい感じでした。
Element.matches()が実装
DOM仕様では、要素が特定のセレクタにマッチしているかを確かめるElement.matches()というメソッドが定義されています。何に使うのかというと、イベントのデリゲーションに使えます。地味ですね。これがBlinkに導入されました。Chrome 34から利用できます。
とはいってもこのAPI、もともとSelectors API Level 2仕様でElement.matchesSelector()として定義されており、各ブラウザもベンダー接頭辞付きで実装しています。ただ標準のElement.matches()はこれまで実装されていませんでした。Blinkは実装しましたが他のエンジンではとくに動きはなさそうで、引き続きベンダー接頭辞に悩まされそうです。
（注：上記のパッチはその後取り下げられましたが、1月13日に再び導入されました。）
DevToolsのネットワークパネル、コンソールで改善
DevToolsのネットワークパネルで表示されるバーが、画像ではなくCSSでの表示になり、Retina Displayをはじめとする高密度なディスプレイでの見栄えがよくなりました。Chrome 34から導入されます。
DevToolsのネットワークパネルを拡大。アイコンなど画像はぼけているが、バーはくっきりと表示されている
また、async属性付きで読み込まれたJavaScriptファイル内でdocument.write()を使っている場合、そのdocument.write()は実行できませんが、今回コンソールにエラーが表示されるようになりました。Firefoxの開発者ツールに倣ったようです。
async属性で読み込まれたJavaScriptファイル内でdocument.write()がある場合エラーが出るように
そのほか
機能追加だけではなんですので、その他のブラウザ関連の話題も取り上げてみます。
Advent Calendar
技術系のAdvent Calendarが今年もたくさん作られました。CSSプロパティやFrontrend、HTML5などWeb開発に関するものはどれも面白かったです。矢倉もいくつか寄稿させていただきました。
- CSS Property Advent Calendar 2013 – Adventar
- Frontrend Advent Calendar 2013 – Adventar
- HTML5 Advent Calendar 2013 – Adventar
- その他Adventarに登録されているAdvent Calendar（技術系じゃないものも多いです）
さて、ブラウザ関連ではInternet ExplorerのAdvent Calendarが異彩を放っていました。IEに特化したAdvent Calendarなんと2つも立てられたのです。
- Internet Explorer Advent Calendar 2013 – Adventar
- Yet Another Internet Explorer Advent Calendar 2013 – Adventar
他にブラウザ関連のAdvent CalendarはFirefox OS Advent Calendar 2013しかなかったです。Chromeとかがあってもおかしくなさそうなのに、ちょっと意外でした。
Operaのへんてこプレスリリース
OperaのCoastというiPad専用のブラウザが新しくなったようなのですが、その「プレスリリース」が面白かったです。
プレスリリース本文の上にスライダーがあり、それを動かすことで文章量が変化し「プレスリリース風」になります。また「Geek edition」を押すと変更履歴風になったり、「Go full Corp!」を押すとバズワードわんさかなプレスリリースになったりもします。スライダーを動かすと単語がフェードインで現れたり、なかなか手が込んでますし、文章も書くのは大変ではなかったかと思います。しかしこういったユーモラスなものが、なぜこのタイミングで紹介されたのかはわからないです。