スコープ指定された CSS カスタム プロパティが計算のために正しくカスケードされないことがあるのはなぜですか?

CSS でのスコープ付きカスタム プロパティの継承

CSS でカスタム プロパティを定義する場合、スコープはその継承と使用において重要な役割を果たします。ただし、外側のスコープ内の変数を計算するために使用されるスコープ付きカスタム プロパティが無視される状況が発生する場合があります。これは、カスタム プロパティが子要素内で再定義されるときに発生し、予期しない結果が生じる可能性があります。

スコープの説明

カスタム プロパティは、-- 接頭辞と接頭辞を使用して定義されます。 :root または :host キーワードを使用して、特定の要素またはサブツリーにスコープを設定できます。スコープ付きプロパティは要素またはその子孫内でのみアクセスできるため、カプセル化と制御された継承が可能です。

スコープ付きプロパティと計算の問題

この例では、次のように定義しています。 --size-1、--size-2、および --size-3 の値を計算するには、:root セレクターのスコープ付きカスタム プロパティ --scale を使用します。ただし、子要素 (.scale-1x、.scale-2x、および .scale-3x) 内では --scale を再定義しています。 CSS はカスタム プロパティを上から下の方法で評価するため、これにより問題が発生します。カスタム プロパティが特定のレベルで評価されると、ネストされた要素で上書きしたり変更したりすることはできません。

コンポーザブル スケーリングのための CSS カスタム プロパティ テクニック

目的の値を達成するには結合せずに異なるレベルでリストをスケーリングする効果を得るには、次の手法を使用できます。

:root {
  --size-1: calc(1rem * var(--scale, 1));
  --size-2: calc(2rem * var(--scale, 1));
  --size-3: calc(3rem * var(--scale, 1));
}

.size-1, .size-2, .size-3 {
  font-size: var(--scale, 1rem);
}

.scale-1x {
  --scale: 1;
}
.scale-2x {
  --scale: 2;
}
.scale-3x {
  --scale: 3;
}

このアプローチでは、 --scale プロパティのスコープは :root レベルのままになります。ただし、これをフォント サイズの計算に直接使用するのではなく、.size-1、.size-2、および .size-3 クラス内の var() 関数内で使用します。これにより、フォント サイズが外部スコープで設定されている場合、 --scale の値を継承できるようになります。 --scale が指定されていない場合は、デフォルト値の 1rem に戻ります。

この手法を使用すると、要素を結合せずにスケーリング効果を構成できます。 .scale-1x、.scale-2x、および .scale-3x クラスをさまざまなリスト要素またはグループに適用して、目的のスケールのバリエーションを実現できます。

以上がスコープ指定された CSS カスタム プロパティが計算のために正しくカスケードされないことがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。