CSSカスタムプロパティ（「変數(shù)」と呼ばれることが多い）の前に、単一のWebサイトで複數(shù)の配色を管理する必要があります。これで、単一のスタイルシート內(nèi)の変數(shù)を定義し、CSSがバリエーションを処理できるようにすることができます。

ユーザー定義のテーマがなくても、サイト全體のテーマは貴重です。たとえば、さまざまなセクションでは、異なるカラーパレットを使用する場(chǎng)合があります。

例を挙げてみましょう。例では、セクション全體で一貫した軽さを使用して、色相のみを変化させます。単一の色相のための単純化されたパレットは、次のようになります。複數(shù)の色相がこれを拡張し、1つの値が変更されるHSLで簡(jiǎn)単に管理できます。

カスタムプロパティを活用します

古いブラウザ向けに広くサポートされ、簡(jiǎn)単にポリフィージーされたカスタムプロパティは、標(biāo)準(zhǔn)のCSSと同様の簡(jiǎn)単な構(gòu)文を提供します。基本的な使用法を以下に示します。変數(shù)は一般に:root擬似エレメントで定義されますが、データ屬性などの屬性を使用して特定の要素にスコープすることができます。

calc()統(tǒng)合

カスタムプロパティは固定値に限定されません。 calc()関數(shù)は、一貫したパターン內(nèi)で動(dòng)的値計(jì)算を有効にします。 CSSにはループがありませんが、プリプロセッサはコードの一部を生成するのに役立ちます（ただし、CSS変數(shù)はSASS変數(shù)とは異なります）。

実際にCSS変數(shù)を?qū)g裝します

私たちの目標(biāo)は、異なるページセクションでコンポーネントの色を変更することです。 IDの3つのセクションを使用します： #food 、 #lifestyle 、および#travelは、それぞれ異なる色合いに関連付けられています。 .wrapper Divのdata-theme屬性は、アクティブな色合いを決定します。 #travelがアクティブな場(chǎng)合、 --first-hue （例えば、ティールの場(chǎng)合は180°）が--hueに割り當(dāng)てられます。

<div data-theme="travel">
  
</div>

<style>
.wrapper[data-theme="travel"] {
  --hue: var(--first-hue); /* = 180° = teal */
}
</style>

小さなJavaScriptスニペットは、タブクリックに基づいてdata-theme屬性を更新し、ハッシュ（ # ）を削除します。これにより、コンパイル後に靜的なプリプロセッサ変數(shù)とは異なり、JavaScriptのCSSを操作する能力が活用されます。

プログレッシブエンハンスメント

JavaScriptを無効にしているユーザーのアクセシビリティを確保するために、進(jìn)行性の強(qiáng)化を追加します。

 //プログレッシブエンハンスメント：
// javascriptがなければ、すべてのセクションが表示されます。テーマはページが読み込まれたときにのみ設(shè)定されます
wrapper.dataset.theme = wrapper.queryselector（ 'section'）。id;

これにより、JavaScriptがなくても基本的な機(jī)能が保証されます。

ここでは、単一ページのアプローチが使用されていますが、サーバー側(cè)のdata-theme設(shè)定を備えた個(gè)別のページとしてセクションを提供することも実現(xiàn)可能です。

代替アプローチ

色の値が線形に変化しない場(chǎng)合、スタイルシートを分離できます。

サポートWebコンポーネント

Webコンポーネントをテーマにするには、以下が必要です:host-context() pseudo-selector：[概念的にオリジナルで説明されているように、Brevityのために例を省略します]。

結(jié)論

CSSカスタムプロパティは、Webサイトのテーマを簡(jiǎn)素化し、JavaScriptとの保守性、パフォーマンス、統(tǒng)合を改善します。 HSLとcalc()と組み合わせて、強(qiáng)力なテーマ機(jī)能のロックを解除し、ユーザー制御テーマに単純な色の変更を超えて拡張します。

以上がカスタムプロパティ、HSL、および小さなcalc（）を使用してカラーテーマを作成するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。