initial キーワード

Category : CSS

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

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

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

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

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

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

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

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

以下は参考リンクです。

Leave a Reply