css

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

投稿日:

  • 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をセットします。プロパティそのものの初期値ではありません。

 

引用:https://qiita.com/h-naito/items/3027f92dde68899159c7

 

-css

関連記事

no image

何番目系CSS

種類 -child -of-type 最初 :first-child :first-of-type 最後 :last-child :last-of-type n番目 :nth-child(n) :nt …

no image

蛍光ペン効果

 background:linear-gradient(transparent 60%, #ff6 60%);

no image

Youtubeのレスポンシブ対応

.movieはiframeを囲うdivなど .movie { position: relative; width: 100%; padding-top: 56.25%; } .movie iframe …

no image

placeholder(プレースホルダー)のCSS

:placeholder-shown { color: #CCCCCC;padding-top: 4px !important; } /* Google Chrome, Safari, Opera 1 …

no image

テーブルジェネレータ

excelからtableタグ作成 https://www.tablesgenerator.com/html_tables