Unformed Building

initialキーワード

公開:
更新:

パーマリンク

initialキーワードというものが「CSS Values and Units Module Level 3」で定められているのですが、知りませんでした……。

The initial keyword represents the specified value that is designated as the property's initial value.

CSS Values and Units Module Level 3 - 3.1.1. CSS-wide keywords: ‘initial’ and ‘inherit’

この値が指定されたプロパティには、そのプロパティの初期値が指定されます。
以下はその例です。

initialキーワード デモ

<ul>
  <li>Unordered List Item</li>
  <!-- 4回繰り返し -->
</ul>
ul {
  color: gray;
}

li {
  margin: 5px;
  border: 2px solid red;
}

li:nth-child(3) {
  border-color: -moz-initial; /* currentColor */
  border-color: initial; /* currentColor */
}

3番目のリストアイテムのボーダーカラーが灰色で表示されているのが分かります。
border-colorの初期値はcurrentColorなので、親であるul要素のcolorプロパティで指定されたgrayで表示されるわけです。

MDNによると、現在このキーワードはFirefoxとWebkitで使用可能なようです。
(Firefoxでは-moz-initialです。Firefox 13で確認)
先ほどのサンプルで試したら、確かにInternet Explorer 9とOpera 12では期待通りの表示にはなりませんでした。

このキーワードは本当に初期値を指定するため、そのプロパティの初期値を理解していないと使うことは難しいと思います。

まあ、プロパティの値に何も指定しなければ初期値が使われるので(ショートハンドプロパティでよくある)、いちいち書く必要もないわけですが、どうしても明示したいときくらいにしか使う機会はないんじゃないでしょうか。
そんな機会があるかどうか分かりませんが。

とりあえず、こういうキーワードもあると覚えておく程度でもいいんじゃないかと思います。

以降は参考リンクです。