Posted at

CSS値の「initial」「inherit」「unset」「revert」の違い

一言で言うとプロパティの初期化になるのですが、

それぞれが異なる動きをします。

自分のまとめも兼ねて投稿します。


これは何?

CSSの値のキーワード

プロパティに対して、初期値・継承値をセットします。

この為、プロパティをリセットしたい時に使用できます。


使いたい場面


  • ABテスト等で特定のstyleを消したい時。

  • CSSフレームワークを使用する際に、特定のstyleを消したい時。

  • 急ぎ(障害対応等)でstyleを設定したい、かつ複数のセレクタが入り混じって何だか分からない時に、一旦styleを消してしまいたい時。

基本的には「初期値・継承値をセット」なのですが、それぞれ異なる働きをするので、注意が必要です。


各プロパティ


initial

そのstyleのプロパティの初期値又は規定値を設定する。初期値に戻したい時に使用できる。

ここでの初期値は、ブラウザーのスタイルシートで指定された値ではありません。

使用する場面としては、場面としてはABテストやhot-fix等でしょうか。

IE11は未対応。

https://caniuse.com/#feat=css-initial-value


inherit

プロパティの計算値を、明示的に継承することを指定することができます。

私個人としては、あまり使った事がないです。

何か便利な使い方がありそうですが。。


unset

プロパティをリセットし、親からの継承された場合は継承値、それ以外は初期値を設定します。MDNの例が分かりやすいと思います。

使いどころとしては、何かの子要素にstyleが設定されていた時に、親要素のstyleを継承させたい場合に使うかと思います。

場面としてはABテストやhot-fix等でしょうか。

IE11は未対応。

https://caniuse.com/#feat=css-unset-value


revert

ユーザーエージェントのstyleをセットします。プロパティそのものの初期値ではありません。

MDNの説明に、いい感じで使用する場面も挙げてあるのですが、

なにぶん「Safari」しか対応していないので、事実上使用できないです。

https://caniuse.com/#search=revert


参考

https://developer.mozilla.org/ja/docs/Web/CSS/inherit

https://developer.mozilla.org/ja/docs/Web/CSS/initial

https://developer.mozilla.org/ja/docs/Web/CSS/unset

https://developer.mozilla.org/ja/docs/Web/CSS/revert