CSS3で追加されたcurrentColorキーワードを試してみた

先日、ブックオフのタッチでおトクなメンバーズが8月で利用できなくなると知り(参考：【BOOKOFF タッチでおトクなメンバーズ】サービス名称・内容変更について)、ブックオフに行きました。そこで2011年に発売された定価2800円のCSS3本の値札が700円、しかもその日は半額デイだったため350円で売られていたので思わず購入。まだほとんど読んでないのですが、パラパラめくっていると色の指定方法について書かれた項目に『currentColor』という値が書いてありました。

一瞬、「現在の色？それって何も指定しないのと同じじゃ……」と思ったのですが、よくよく読んでみると現在の要素の文字色を表す値ということが分かりました(参考：color value – CSS | MDN（currentColor キーワード）)。

たまに文字色とボーダーの色を同じにするようなレイアウトのスタイルを記述することがありますが、そういう時に便利なキーワードですね。

というわけで試してみました。

HTML

<div class="redTxt">
	<span>この要素内は赤い文字になります</span>
	<div class="current-border">
		<span>赤文字でボーダー色がcurrentColor</span>
		<div class="current-background">
			<span>赤文字で背景色がcurrentColor</span>
			<input type="text" value="文字色継承せず、背景色がcurrentColor" class="current-background">
		</div>
	</div>
</div>
<div class="blueTxt">
	<span>この要素内は青い文字になります</span>
	<div class="current-border">
		<span>青文字でボーダー色がcurrentColor</span>
		<div class="current-background">
			<span>青文字で背景色がcurrentColor</span>
			<input type="text" value="文字色継承して、背景色がcurrentColor" class="color-inherit current-background">
		</div>
		<div class="redTxt current-background">
			<span>赤文字で背景色がcurrentColor</span>
		</div>
	</div>
</div>

CSS

div{
	padding:10px;
}
/* 文字色を赤にする */
.redTxt{
	color:red;
}
/* 文字色を青にする */
.blueTxt{
	color:blue;
}
/* ボーダーの色を文字色と同じにする */
.current-border{
	border:1px solid currentColor;
}
/* 背景を文字色と同じにする。文字には白い枠を付けて袋文字にする */
.current-background{
	background-color:currentColor;
	text-shadow:1px 0 #fff, 0 1px #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
/* 文字色を継承する */
.color-inherit{
	color:inherit;
}

実行結果：currentColorテスト

確かに、指定の色が、その要素の文字色と同じ色になっていることが分かります。覚えておきたいです。

ここから余談です。

先日、プロとして恥ずかしくない新・WEBデザインの大原則を読みました。タイトルにWEBデザインとありますが、デザインだけでない、WEB制作について広範囲に書かれており、わかりやすかったので良書といえると思います。
ですが、一つだけ気になった点があります。その点を以下に引用します。CSSの基本について書かれた項目の一部です。
名前からも想像できる通り、colorは文字色（前景色）を、background-colorは背景色を指定するためのプロパティだ。
自分は、background-colorが背景色を表すのは一目見たら分かると思うのですが、colorプロパティは見ただけでは文字色を表すと分からないと思います。時々、疑問に思うんです。なんで、CSSを作った人は、文字色の指定するプロパティを、font-colorとかtext-colorという書き方にしなかったのだろうかと。
まあ、こんな疑問もつの自分だけかもしれないんですけどね。