CSS変数trial_html/css_WEB-ITnose

CSS はあらゆる種類のカラフルな服を着せる素晴らしいものですが、開発者にとっては柔軟性が不十分なため、Sass 、LESS、Stylus などのさまざまなプリプロセッサが存在します (著者は Sass の SCSS 構文を推奨しています)。 、これらのプリプロセッサにより、CSS の柔軟性が大幅に向上し、コードの編成と CSS のメンテナンスが強化されます。しかし結局のところ、これらは生物学的に関連していません。その後、CSS 開発を担当する専門家は黙ってはいられず、CSS にいくつかの新機能を追加し始めました。この記事では、CSS 変数の進歩と応用について説明します。
W3C による CSS 変数の最新の調査は、カスケード変数モジュール レベル 1 の CSS カスタム プロパティに反映されています。最新の更新は 2014 年 5 月 6 日に行われました。現時点では草稿であるため、この記事は調査と調査のみを目的としています。この記事は W3C の修正後に同時に更新される可能性があります。

なぜそうなるのですか?

Web サイトやアプリケーションには大量の CSS が含まれることが多く、Web サイトで使用されるカラー システム、背景色、テキストの色、リンクの色など、これらの繰り返し使用される属性値は、多数の CSS ドキュメントに散在しており、色の変更など、値の一部を変更する必要がある場合、それは単なる悪夢です。各ファイルを検索して置換するという膨大な量の機械的な繰り返し操作では、必然的に間違いが発生するため、CSS コードの編成とメンテナンスが CSS の使用を妨げる重要なボトルネックとなっています。
もちろん、CSS プリプロセスはこれらの問題を効果的に解決できます。プリプロセッサの使用は事実上の業界標準となっており、Sass を選択するフロントエンド担当者がますます増えています。ただし、コンパイル環境を導入したり、開発ツールを Sass に対応させたりする必要があり、追加の作業が必要になります。何かが起こると、私たちは、いつか通常の CSS と同じようにプリプロセッサを使用できるようになったらどうなるだろうか、と考えずにはいられません。
W3C の CSS にはさまざまなものがあります。

繭を剥がして絹を描きます

変数については、定義と使用にすぎません。 次に、それらを個別に分析します。

変数を定義する

次のコードに示すように、このカスタム属性には、先頭に二重点線が付いています。

/* 变量定义 */:root {  --main-color: #06c;}/* 变量使用 */#foo h1 {  color: var(--main-color);}

変数名

カスタム属性名と変数名は、CSS 識別子の定義規則に従い、英数字 (a-z、A-Z、0-9)、ISO 10646 文字リストの U+00A0 以降の文字、およびアンダースコアを含めることができます(_)、ハイフン(-)などを数字、ハイフン+数字、ダブルハイフンで始めることはできません。
CSS 変数の構文では大文字と小文字が区別され、文字、数字、アンダースコア、ハイフンを含めることができますが、数字やハイフンで始めないことをお勧めします。

/* 正确的变量名 */:root{	--link-color: #06c;	--_hover-color: #f6c;	--toolTip_color: #ff0;	--main_background_color: #333;}/* 下面两个变量都有效，表示两个变量 */:element{	--link-color:#06c;	--Link-color:#66c;}

変数値は文法に準拠した任意の値を受け入れることができますが、デフォルト値は " " にすることはできません。それ以外の場合はエラーが報告されます。

変数の継承とオーバーライド

変数の宣言と使用は、通常のプログラミング言語の変数スコープと同様に、CSS のカスケード特性に従います。以下のコードを見てください。

:root { --color: blue; }div { --color: green; }#alert { --color: red; }* { color: var(--color); }<p>I inherited blue from the root element!</p><div>I got green set directly on me!</div><div id='alert'>  While I got red set directly on me!  <p>I’m red too, because of inheritance!</p></div>

変数の使用

var() を通じて変数を使用できますが、変数は属性名とセレクターでは使用できません。変数を使用するための構文は次のとおりです。

/*  * var()接受两个参数，自定义属性名(变量名)、缺省值 * 第一个参数custom-property-name调用变量 * 第二参数可选，指定自定义变量无效时的缺省值。 */var() = var( <custom-property-name> [, <any-value> ]? )/* for example *//* In the component’s style: */.component .header {  color: var(--header-color, blue);}.component .text {  color: var(--text-color, black);}/* In the larger application’s style: */.component {  --text-color: #080;  /* header-color isn’t set,     and so remains blue,     the fallback value */}

CSS 変数への呼び出しをネストできます。

/*one example */:root {  --main-color: #c06;  --accent-background: linear-gradient(to top, var(--main-color), white);}/*another example */<one><two><three /></two></one>one   { --foo: 10px; }two   { --bar: calc(var(--foo) + 10px); }three { --foo: calc(var(--bar) + 10px); }

互換性と包括性

フロントエンド開発者にとって、互換性と包括性は常に達成が難しい苦痛であり、「オタク思考」を持つフロントエンド担当者として、私たちは依然として懸命に取り組む必要があります。
まず、CSS 変数の現在の驚くべき互換性を見てみましょう。以下の図に示すように、データは caniuse から取得されています。

このライン全体は人気がありますが、Firefox だけが知っています。どうすれば再生できますか?
もし兄弟が私がわがままでふざけたいと言ったらどうすればよいですか?外国人がパッチ（ポリフィル）を書いてくれたので試してみると良いでしょう。

明確な説明を求めています

要約すると、CSS 変数はドラフト段階にあり、ブラウザーの互換性は平均的です。私は今日、単に視野を広げて知識を蓄えるためにこの記事を書いています。商用利用の場合はSassやLESSなどのプリプロセッサをご利用ください。
詳細については、以下のリストを使用して詳細を確認してください。

W3C リファレンス

MDN 情報

caniuse

謝辞