最初の CSS 変数: currentColor_html/css_WEB-ITnose

1. 基本的な紹介

CSS 変数は、初期ドラフトからブラウザ実装に徐々に移行しています。しかし、仕様には何年も前から存在する変数、currentColor があります。この CSS 機能には、優れたブラウザー サポートといくつかの実用的なアプリケーションがあり、それを学習して理解します。 MDN からの説明を引用します:

currentColor キーワードは、要素の color プロパティの計算値を表します。これにより、デフォルトでは継承されないプロパティまたは子の要素プロパティに継承されるカラー プロパティを作成することもできます。要素の color プロパティの計算された値を継承し、これらの要素の継承キーワード (存在する場合) と同等になります。

border-color の値を指定しない場合、デフォルトで color の値が入力されることがわかっています。 :

	<style type="text/css">	.parent{ 		width: 100px;		height: 100px; 		color: red;		border: 1px solid;		box-shadow: 5px 5px 5px;		text-shadow: 3px 3px 3px;	}	</style>	<div class="parent">		没有设置边框颜色	</div>　

これは非常に巧妙なトリックです。テキストの色を変更すると、境界線の色も自動的に変更されます。このトリックは、アウトライン、ボックスシャドウ、テキストシャドウなどにも機能します。

2. いくつかの例

<style type="text/css">.parent{ 	width: 100px;	height: 100px; 	color: #333;}.son {	border: 1px solid #333;	box-shadow: 2px 2px 2px #333;}</style><div class="parent">	<div class="son">没有设置边框颜色</div></div>

currentColor を使用して上記の例を変更しましょう:

<style type="text/css">.parent{ 	width: 100px;	height: 100px; 	color: #333;}.son {	border: 1px solid currentColor;	box-shadow: 5px 5px 5px currentColor;	text-shadow: 3px 3px 3px currentColor;}</style><div class="parent">	<div class="son">没有设置边框颜色</div></div>

もちろん、グラデーション、SVG、疑似要素など、予想されるすべての場所に currentColor を適用することもできます。 , 例: 次のように、インライン svg スプライトをアイコン フォントのように表示します:

svg {fill: currentColor;}

この時点で、各 svg 要素は親要素のテキストの色としてレンダリングされます。デモを表示をクリックしてください

三、サポート

IE9+ および最新のすべてのブラウザーがサポートしています。

読んでいただきありがとうございます。記事内の間違いを批判して修正していただければ幸いです。

再版ステートメント:

この記事のタイトル: 最初の CSS 変数: currentColor