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

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

var() の使用

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

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

基本ルール

1. 最初のパラメータは CSS 変數(shù)である必要があります: 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 */
}

詳細(xì)な動(dòng)作

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

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

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

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

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

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

6. url() および var() 使用法: url() は完全な CSS トークンとして扱われるため、変數(shù)內(nèi)で完全な 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 */
}

変數(shù)の解像度と範(fàn)囲

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

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

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

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

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

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 の背景色は白のままです。

疑似クラスを使用した変數(shù)の再評(píng)価:
変數(shù)は、同じレベルで定義されている場合、疑似クラスの狀態(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 変數(shù)の高度な使用例をいくつか見てみましょう:

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

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

   :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)境設(shè)定に合わせた手動(dòng)切り替えの追加

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

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

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

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

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

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

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

この効果を?qū)g現(xiàn)するには、次の 2 つの主要な要素が必要です。

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

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

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

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

.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 変數(shù)のトリックを使用して変數(shù)の設(shè)定を簡素化する

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

: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 の値に依存し、プロパティ內(nèi)の if/else を効果的にシミュレートします。

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

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

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

完全な例: CodePen の例

---

まとめ

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

---

參考文獻(xiàn)

• 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 変數(shù)の驚くべき詳細(xì) - var() の使用と優(yōu)れた例の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。