Firefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。
CSS 関連では、all
プロパティと unset
値に対応し、CSS のリセットが簡単に行えるようになった他、cursor
プロパティ用の -moz-grab
、-moz-grabbing
接頭辞が外れました。ベンダプレフィックスなしで使用できます。
all: unset で何ができるか
仕様的には下記にあります。
The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords.
CSS Cascading and Inheritance Level 3 から引用
all
はすべてのプロパティ (direction
、unicode-bidi
プロパティは除外) に値をセットするショートハンドプロパティで、セレクタで言えばユニバーサルセレクタみたいな感じ。指定できる値は initial
、inherit
、unset
で、今回あわせて対応したのは unset
値です。
inherit
値はすでに多くのブラウザで実装済みですし、initial
値も IE 以外はほぼサポートしていた (はず) ですので身近かもしれません。
inherit
値は親要素に指定された計算値を本来は継承しないものも含めて継承させます。一方で initial
値は該当要素に対するスタイルをすべてリセットし、要素のプロパティの初期値を適用させます。
unset
は上記、initial
、inherit
の合わせ技になります。本来継承するスタイルに関しては親のスタイルを継承 (つまり inherit
) させますが、そうでないものはリセット (つまり initial
) します。
実際の使いどころは置いといて、具体的に説明すると、例えば下記のような HTML と CSS があったとしますね。
<style> div { background: red; border: 1px solid #ccc; font-size: 2em; padding: 1em; } p { background: white; } </style> <div> <p>test</p> </div>
p 要素に対してどのようなスタイルが当たるかに注目してみますが、上記なら、p 要素に対して親要素である div 要素から継承されるのは、font-size
プロパティのみです。
ですから、下記のようになりますね。普通です。
これに下記のように all: inherit;
の指定を加えてみます。
<style> div { background: red; border: 1px solid #ccc; font-size: 2em; padding: 1em; } p { background: white; } p { all: inherit; } </style>
すると、下記のようになります。
本来、div 要素に指定された border
や padding
、background
プロパティの値は、子である p 要素には継承されませんが、all: inherit;
とすることで、すべて継承されているのがわかります。
次に下記のように all: initial;
に値を変えてみますが、
<style> ...省略... p { all: initial; } </style>
すると下記のように、
すべてのスタイルがリセットされ、本来継承されるはずの font-size
に関しても継承されていませんし、background: white;
の指定もリセットされていることがわかります。ちなみに p 要素に対する display: block;
さえもリセットされて、display: inline;
になってます (画像ではわかりにくいですが)。
で、最後に all: unset;
に値を変えてみます。
<style> ...省略... p { all: unset; } </style>
すると、
わかりますかね。p 要素に指定された background: white;
の指定はリセットされているんですが、親要素の font-size
に関しては継承されています。
開発者ツールの方でも機能追加が
インスペクタで HTML の編集ができるようになった件、過去に Nightly ビルドでの実装時に記事を書いたのですが、これが今回の Firefox 27 で実装されています。
また、デバッガがソースマップに対応したようですので、Minify された JavaScript コードなども確認がしやすくなりました。
ということで、毎度のことですが、Firefox 27 の正式リリースに伴い、Firefox 28 が Beta Channel に、Firefox 29 が Aurora Channel に、Nightly が Firefox 30 へとそれぞれ移行しています。