web-dev-qa-db-ja.com

CSSでの「初期」値の使用とは何ですか？

initial値は、最初にレンダリングされたスタイル（ブラウザーの内部ユーザーエージェントスタイルシートによって適用されるスタイル）を復元すると思いました。

例：

div.inline {
  display: inline;
}

div.initial {
  display: initial;
}

div.inlineルールはインラインモードで<div class="inline">を表示し、div.initialルールはdivの元の表示値blockを使用して<div class="initial">を表示すると予想していました。

しかし、これを探索すると、<div class="initial">がインラインで表示されます。私が間違っている？誰でもこれについて詳しく説明できますか？

htmlcssbrowser
29
NkS

initial value （属性ではない）は、CSS仕様で定義されているように、プロパティの初期値を示します。値。"したがって、その意味はプロパティに依存しますが、他のものには依存しません。ブラウザ上またはプロパティが適用されている要素上ではありません。したがって、ブラウザのデフォルトを意味するではありません。

たとえば、displayプロパティの場合、initialalwaysはinlineを意味します。これは、プロパティの初期値。この例では、要素がblockであるため、ブラウザのデフォルトはdivです。

したがって、initial値の有用性は限られています。その主な効果は誤解のために人々を混乱させることのようです。使用可能なケースはcolorプロパティです。これは、その初期値がブラウザーに依存しているためです（ご存知のように、ほとんどが黒ですが、必ずしもそうとは限りません）。そのため、initialはブラウザのデフォルトを意味します。これがプロパティの定義方法です。同様の使用例はfont-familyの場合です。font-family: initialを宣言すると、ブラウザのデフォルトフォント（ブラウザの設定によって異なります）。

IE（IE 10）でもサポートされていないため、有用性はさらに制限されます。

48
Jukka K. Korpela

ソース

最初のCSSキーワードは、プロパティの初期値を要素に適用します。これはすべてのCSSプロパティで許可されており、指定された要素はプロパティの初期値を使用します。

/* give headers a green border */
 h2 { border: medium solid green }

 /* but make those in the sidebar use the value of the "color" property */
 #sidebar h2 { border-color: initial; }
<p style="color:red"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>
7
John Conde