CSS 変数の驚くべき詳細 - var() の使用と優れた例

これは 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 */
   }

特異性による優先度:
より高い特異性は、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 の背景色は白のままです。

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

: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 */
   }

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

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

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

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

山を動かすことができない場合は、道を設定します。回避策は次のとおりです:

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

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

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

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

最初: システム設定とチェックボックスの状態に基づいて変化する変数

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

2 番目: チェックされた状態と 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 を無効な状態にします。なお、--OFFは空文字列として設定されます。 var(--light, #fbfbfb) var(--dark, #121212) に適用すると、無効な --light 変数はデフォルトで #fbfbfb になり、有効な --dark 変数 (空) は --background-color を許可します。 #fbfbfb と等しくなります。

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

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

完全な例: CodePen の例

---

まとめ

CSS は進化し続けており、2016 年以降、主要なブラウザで CSS 変数が利用できるようになりました。 @property や :has() などの新機能により、CSS 変数の柔軟性がさらに拡張されています。他の新しいツールと組み合わせることで、CSS 変数はさらに強力になってきています。たとえば、スクロール駆動のアニメーションを強化して視覚的に動的な効果を作成できるようになりました。他のプログラミング言語の変数と同様に、CSS に状態を保存するための中心的な要素として、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() の使用と優れた例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。