WWW Watch

Firefox 27 が正式リリース、all:unset で CSS のリセットが可能に

Firefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。CSS 関連では、all プロパティと unset 値への対応や fieldset 要素の overflow 属性が実装、インスペクタで HTML の編集が可能になるなどの機能追加が行われています。

FirefoxFirefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。

CSS 関連では、all プロパティと unset 値に対応し、CSS のリセットが簡単に行えるようになった他、cursor プロパティ用の -moz-grab-moz-grabbing 接頭辞が外れました。ベンダプレフィックスなしで使用できます。

Firefox 27

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 はすべてのプロパティ (directionunicode-bidi プロパティは除外) に値をセットするショートハンドプロパティで、セレクタで言えばユニバーサルセレクタみたいな感じ。指定できる値は initialinheritunset で、今回あわせて対応したのは unset 値です。

inherit 値はすでに多くのブラウザで実装済みですし、initial 値も IE 以外はほぼサポートしていた (はず) ですので身近かもしれません。

inherit 値は親要素に指定された計算値を本来は継承しないものも含めて継承させます。一方で initial 値は該当要素に対するスタイルをすべてリセットし、要素のプロパティの初期値を適用させます。

unset は上記、initialinherit の合わせ技になります。本来継承するスタイルに関しては親のスタイルを継承 (つまり 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 プロパティのみです。

ですから、下記のようになりますね。普通です。

CSS の継承 - 通常の例

これに下記のように all: inherit; の指定を加えてみます。

<style>
  div {
    background: red;
    border: 1px solid #ccc;
    font-size: 2em;
    padding: 1em;
  }
  p {
    background: white;
  }
  p {
    all: inherit;
  } 
</style>

すると、下記のようになります。

CSS の継承 - inherit 値を指定した例

本来、div 要素に指定された borderpaddingbackground プロパティの値は、子である p 要素には継承されませんが、all: inherit; とすることで、すべて継承されているのがわかります。

次に下記のように all: initial; に値を変えてみますが、

<style>
...省略...
  p {
    all: initial;
  } 
</style>

すると下記のように、

CSS の継承 - initial 値を指定した例

すべてのスタイルがリセットされ、本来継承されるはずの font-size に関しても継承されていませんし、background: white; の指定もリセットされていることがわかります。ちなみに p 要素に対する display: block; さえもリセットされて、display: inline; になってます (画像ではわかりにくいですが)。

で、最後に all: unset; に値を変えてみます。

<style>
...省略...
  p {
    all: unset;
  } 
</style>

すると、

CSS の継承 - unset 値を指定した例

わかりますかね。p 要素に指定された background: white; の指定はリセットされているんですが、親要素の font-size に関しては継承されています。

開発者ツールの方でも機能追加が

インスペクタで HTML の編集ができるようになった件、過去に Nightly ビルドでの実装時に記事を書いたのですが、これが今回の Firefox 27 で実装されています。

また、デバッガがソースマップに対応したようですので、Minify された JavaScript コードなども確認がしやすくなりました。

ということで、毎度のことですが、Firefox 27 の正式リリースに伴い、Firefox 28 が Beta Channel に、Firefox 29 が Aurora Channel に、Nightly が Firefox 30 へとそれぞれ移行しています。

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー