initialキーワード
公開:
更新:
The ‘initial
キーワードというものが「CSS Values and Units Module Level 3」で定められているのですが、知りませんでした……。initial
’ keyword represents the specified value that is designated as the property's initial value.
この値が指定されたプロパティには、そのプロパティの初期値が指定されます。
以下はその例です。
<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では期待通りの表示にはなりませんでした。
このキーワードは本当に初期値を指定するため、そのプロパティの初期値を理解していないと使うことは難しいと思います。
まあ、プロパティの値に何も指定しなければ初期値が使われるので(ショートハンドプロパティでよくある)、いちいち書く必要もないわけですが、どうしても明示したいときくらいにしか使う機会はないんじゃないでしょうか。
そんな機会があるかどうか分かりませんが。
とりあえず、こういうキーワードもあると覚えておく程度でもいいんじゃないかと思います。
以降は参考リンクです。