CSSのcurrentColorで色を設定する

currentColorという値で色設定を行なっているサイトを見かけたので、currentColorについて調べたことをメモ。

対応ブラウザ

currentColorはCSSで色を設定する際に使用できるキーワードで、その要素のcolorプロパティで設定されている値と同じ値になります。
対応ブラウザはこちらで、特に問題なく使用できます。

サンプルコード

色違いのボタンを作成する例で試してみます。

  <a href="#" class="button">ボタン</a>
  <a href="#" class="button--red">赤ボタン</a>
  <a href="#" class="button--blue">青ボタン</a>

currentcolorを使用しない場合、色違いパターンで設定箇所それぞれに色指定する形になります。

.button,
.button--red,
.button--blue {
	display: inline-block;
	position: relative;
	border: 2px solid black;
	border-radius: 5px;
	padding: 10px 30px;
	color: black;
	text-decoration: none;

	&::after {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 4px);
		right: 10px;
		width: 8px;
		height: 8px;
		border-top: 2px solid black;
		border-right: 2px solid black;
		rotate: 45deg;
	}
}

.button--red {
	border-color: tomato;
	color: tomato;

	&::after {
		border-color: tomato;
	}
}
.button--blue {
	border-color: steelblue;
	color: steelblue;

	&::after {
		border-color: steelblue;
	}
}

currentcolorを使わない場合のデモページ

currentColorを使用すると、色違いパターンのborderの色設定を省略(colorで設定した色を参照)できるようになります。

.button,
.button--red,
.button--blue {
	display: inline-block;
	position: relative;
	border: 2px solid currentColor;
	border-radius: 5px;
	padding: 10px 30px;
	color: black;
	text-decoration: none;

	&::after {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 4px);
		right: 10px;
		width: 8px;
		height: 8px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		rotate: 45deg;
	}
}

.button--red {
	color: tomato;
}
.button--blue {
	color: steelblue;
}

currentcolorを使った場合のデモページ