これは CSS 変數に関する投稿の後半です。前半はここにあります。
この記事では、var() の詳細を見ていきます。そして 2 つの素晴らしい例:

• CSS 変數を使用したアニメーション
• システム設定検出による純粋な CSS ダークモード切り替え

var() の使用

var() はカスタム プロパティ値 (CSS 変數) にアクセスします。その構文は次のとおりです:

var( <custom-property-name>, <fallback-value>? )

基本ルール

1. 最初のパラメータは CSS 変數である必要があります: var() はカスタム プロパティ名のみを受け入れるため、var(20px) などの直接値はエラーになります。

2. var() はプロパティ名を置き換えることはできません: つまり、var(--prop-name): 20px; のようなものは記述できません。 var() はプロパティ値でのみ使用できるように制限されているためです。
   

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

詳細な動作

1. var(--b, fallback_value) Fallbacks: 2 番目のパラメーターは、--b が無効な場合に使用されるフォールバック値として機能します。

2. 空のフォールバックを使用した var(--c,) 構文: フォールバック値が空のままの場合、構文は有効なままであり、--c が無効な場合はデフォルトで空の値になります。 .

3. 複數のカンマ: var(--d, var(--e), var(--f), var(--g)) では、最初のカンマ以降はすべてフォールバックとして扱われるため、--d が無効な場合、var() 式は var(--e)、var(--f)、var(--g) を 1 つのフォールバックとして評価し、結果を決定します。

完全な CSS トークンとしての

4. var(): この関數は、20px と同様に、完全な CSS トークンとして機能します。したがって、var(--size)var(--unit) は 20px を作成せず、無効とみなされます。

5. CSS 変數でのイニシャルの使用: CSS 変數へのイニシャルの割り當ては、無効であることを意味します。初期値を値として表示するには、それをフォールバックに配置する必要があります。

6. url() および var() 使用法: url() は完全な CSS トークンとして扱われるため、変數內で完全な url() を定義する必要があります。
   

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

変數の解像度と範囲

CSS 変數は、他の CSS プロパティと同様に、スコープと詳細性に関して CSS 固有のルールに従います。これらの要素が CSS 変數にどのような影響を與えるかを理解することで、より正確な制御が可能になります。

グローバル変數とスコープ変數:
:root で定義された変數はグローバルに適用されますが、セレクターで定義された変數のスコープはより制限されています。

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

特異性による優(yōu)先度:
より高い特異性は、CSS 変數のより低い特異性をオーバーライドします。

var( <custom-property-name>, <fallback-value>? )

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

この例では、.box が --green: 0 を再定義する前に --background が rgb(255, 255, 255) に解決されたため、.box の背景色は白のままです。

疑似クラスを使用した変數の再評価:
変數は、同じレベルで定義されている場合、疑似クラスの狀態(tài)に基づいて変化します。

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

---

次に、CSS 変數の高度な使用例をいくつか見てみましょう:

使用例A：アニメーション

ブラウザはデータ型を推測できないため、CSS 変數を直接アニメーション化することはできません。これを解決するには、@property を使用して変數の型と初期値を定義し、ブラウザが変數をアニメーション化する方法を理解できるようにします。

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

   :root {
     --main-color: blue;
   }

   .section {
     --main-color: green; /* Overrides :root definition */
   }

   .section p {
     color: var(--main-color); /* Shows green */
   }

   p {
     color: var(--main-color); /* Shows blue */
   }

システム環(huán)境設定に合わせた手動切り替えの追加

デフォルトではシステム設定によってテーマが制御されますが、明るいテーマと暗いテーマを手動で切り替えるオプションをユーザーに提供したい場合があります。これを実現するには、狀態(tài)を切り替えるチェックボックスを追加します。理想的には、チェックボックスが選択されている場合はダーク モードを示し、選択されていない場合はライト モードを示します。

ただし、特にダーク モードでは、CSS はシステム設定を自動的に検出して、それに応じてチェックボックスの狀態(tài)を変更することはできません。この制限に対処するには、CSS 変數と :has() セレクターを使用して、チェックボックスの狀態(tài)に基づいてテーマの切り替えを制御できます。

これを完全に CSS で実現したいと考えていましたが、ユーザーのシステムはライト モードまたはダーク モードに設定されている可能性があるため、CSS だけではダーク モードのチェックボックスを自動的にチェックすることはできません。

山を動かすことができない場合は、道を設定します?；乇懿撙洗韦韦趣辘扦?

• CSS を使用してトグル スイッチを作成します。視覚的な「オフ」狀態(tài)はライト モードを表し、「オン」はダーク モードを表します。

• システムがライトモードに設定されている場合: チェックボックスが選択されていない場合は、「オフ」狀態(tài) (ライトモード) に相當します。選択すると「ON」狀態(tài)（ダークモード）に相當します。

• システムがダーク モードに設定されている場合: システム設定が反転されるため、視覚的な狀態(tài)も反転します。チェックボックスがオフの場合は「ON」（ダークモード）に相當します。選択すると「OFF」（ライトモード）に対応します。

この効果を実現するには、次の 2 つの主要な要素が必要です。

最初: システム設定とチェックボックスの狀態(tài)に基づいて変化する変數

var( <custom-property-name>, <fallback-value>? )

2 番目: チェックされた狀態(tài)と ON/OFF 表現のシステム設定に基づく動作の切り替え

ライト モードとダーク モードの CSS プロパティは、システム設定に応じて逆になります。

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

CSS 変數のトリックを使用して変數の設定を簡素化する

ここでは、スペース切り替えテクニックを使用して変數設定を簡素化します。以下にコードを示し、その後にその動作の説明を示します:

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

ここで重要なのは、行 --background-color: var(--light, #fbfbfb) var(--dark, #121212); です。ここで、背景色は --light と --dark の値に依存し、プロパティ內の if/else を効果的にシミュレートします。

どのように機能しますか? 最初は --light: var(--ON);および --ON: 初期。 --ON を無効な狀態(tài)にします。なお、--OFFは空文字列として設定されます。 var(--light, #fbfbfb) var(--dark, #121212) に適用すると、無効な --light 変數はデフォルトで #fbfbfb になり、有効な --dark 変數 (空) は --background-color を許可します。 #fbfbfb と等しくなります。

他のすべてのカラー変數は同じロジックに従い、--light と --dark の狀態(tài)に基づいて調整されます。この方法では、各カラー変數を 1 回定義するだけで済みます。

狀態(tài)の切り替えが簡単になります。ダーク モードがアクティブな場合は、--light: var(--OFF); を使用します。および --dark: var(--ON);。ライトモードでは、それらを逆にします。すぐには直感的ではありませんが、この方法は現在 CSS で最も効果的です。より良い解決策がある場合は、検討する価値があります。

完全な例: CodePen の例

---

まとめ

CSS は進化し続けており、2016 年以降、主要なブラウザで CSS 変數が利用できるようになりました。 @property や :has() などの新機能により、CSS 変數の柔軟性がさらに拡張されています。他の新しいツールと組み合わせることで、CSS 変數はさらに強力になってきています。たとえば、スクロール駆動のアニメーションを強化して視覚的に動的な効果を作成できるようになりました。他のプログラミング言語の変數と同様に、CSS に狀態(tài)を保存するための中心的な要素として、CSS 変數をしっかりと理解することは、將來的により洗練されたスタイルやデザインにとって非常に貴重であることがわかります。

---

參考文獻

• https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url/42331003#42331003
• https://kizu.dev/cyclic-toggles/#was-this-always-possible
• https://dev.to/afif/what-no-one-told-you-about-css-variables-553o
• https://hackernoon.com/cool-css-variable-tricks-to-try-uyu35e9
• https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

以上がCSS 変數の驚くべき詳細 - var() の使用と優(yōu)れた例の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。