CSS スコープのカスタム プロパティは継承とオーバーライドをどのように処理しますか?

CSS スコープ付きカスタム プロパティ: スコープと継承について

CSS カスタム プロパティを定義する場合、目的の効果を実現するには、そのスコープを理解することが重要です。要素内で宣言されたカスタム プロパティは、その要素とその子孫にスコープされます。ただし、この質問で示されているように、このスコープは予期しない動作を引き起こす可能性があります。

この問題は、提供されたコードで、カスタム プロパティ --scale がルート レベルで定義され、その後オーバーライドされるという事実に起因します。子要素内。スコープ指定されたカスタム プロパティを使用する場合、このオーバーライド動作は予期されません。

この問題を実証するために、CSS を分析してみましょう。

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

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

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

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

ここで、--size-* プロパティは値に依存します。 --スケールの。ただし、.scale-1x、.scale-2x、および .scale-3x クラス内で --scale を定義すると、:root で定義された値がオーバーライドされます。

期待される動作は、 -- scale プロパティは、それが定義されている各要素で評価されるため、各リストのフォント サイズが異なります。ただし、カスタム プロパティはすでにルート レベルで評価されているため、この問題は発生しません。

この問題に対処し、望ましい効果を実現するには、スコープ付きカスタム プロパティをより一貫して使用することを検討してください。たとえば、各 .scale-* クラス内で --size-1、--size-2、および --size-3 を定義し、それらのスコープがその要素のみに限定されるようにします。これにより、それぞれのクラス内で定義された --scale の値に基づいて各リストを独立してスケーリングできるようになります。

以上がCSS スコープのカスタム プロパティは継承とオーバーライドをどのように処理しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。