CSSカスタムプロパティを使用してCSSを動的にする

しばらくCSSを書いているのであれば、ある時点で変数の必要性を感じていたに違いありません。 CSSカスタムプロパティは、CSS独自の変数の実装にいくぶん似ています。 ただし、適切に使用すると、変数だけではありません。

CSSカスタムプロパティを使用すると、次のことができます。

• 選択した名前のプロパティに任意の値を割り当てます
• var()関数を使用して、これらの値を他のプロパティで使用します

CSSカスタムプロパティのサポートは現時点では少し難しい道であり、一部のブラウザは事前にアクティブ化またはtrueに設定する必要があるフラグの下でそれらをサポートしますが、サポートは今後劇的に増加すると予想されるため、理解することが重要ですそれらを使用および活用する方法。 ¹

この記事では、CSSカスタムプロパティを使用してスタイルシートをもう少し動的にし、アセットパイプラインの余分なSass/LESSステップを廃止する方法を学習します。

元の、それほど強力ではないCSS変数

CSSのカスタムプロパティについて説明する前に、CSSにはある種の変数があり、それがcurrentColorキーワードであることに注意してください。 このめったに使用されないが広くサポートされている変数は、要素の現在の色の値を参照します。 これは、 color値を受け入れる任意の宣言で使用でき、完全にカスケードされます。

例を見てみましょう：

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

カスケードに加えて、これは次のことも生成できます。

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

currentColorの主な問題は、それ自体が変数として仕様に含まれていなかったことを除けば、colorプロパティの値のみを受け入れるため、場合によっては操作が困難になる可能性があることです。

本格的なCSS変数

CSSプリ/ポストプロセッサを使用する主な利点の1つは、値をキーワードに格納し、必要に応じて特定のセレクターにスコープを設定できることです。

開発者から長い間要求された後、CSSのネイティブ変数の解釈に関するドラフトが作成されました。 これらは正式にはCSSカスタムプロパティと呼ばれますが、CSS変数と呼ばれることもあります。

ネイティブCSSカスタムプロパティの現在の仕様は、プリプロセッサ/ポストプロセッサ変数と同じ動作をすべてカバーしています。 これにより、カラーコード、既知のすべての単位のサイズ、または必要に応じて整数のみを保存できます（たとえば、同じ除数または乗数を使用する必要がある場合）。

CSSカスタムプロパティの構文は他の言語と比較して少し奇妙ですが、それらの構文を同じCSSエコシステム内の他の機能と比較すると非常に理にかなっています。

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

さて、あなたは「それはどんな構文なのか！？」と考えているかもしれません。

Lea Verouは、この「ダッシュダッシュ」構文の理由を、彼女のすばらしい講演であるCSS変数：var（–subtitle）：で述べているように、絶対的な単純さで説明しています。

これらは、他のCSSプロパティとまったく同じように機能します[…]。 ドル[記号]などを使用しなかった理由と、ドル[記号]を使用しなかった理由は、SASSまたはプリプロセッサ変数とプリプロセッサ変数の両方を使用できるようにするためです。 CSS変数。 それらは両方とも異なるものであり、異なる目標を達成します。SASSでは絶対にできないCSS変数でできることもあります。また、CSS変数ではできないSASS変数でできることもあるので、人々は同じスタイルシートで両方を使用できるようにするため、ダッシュダッシュ構文は空のプレフィックスを持つプレフィックスプロパティのように想像できます。

カスタムプロパティの値は、 var()関数を使用して取得できます。この関数は、セレクター、プロパティ名、またはメディアクエリ宣言を除くすべての場所で使用できます。

プリプロセッサ/ポストプロセッサ変数はコンパイル時にのみ使用されますが、CSS変数は動的に使用および更新できることに注意してください。 これは何を意味するのでしょうか？ これは、それらが実際のCSSスタイルシートに保持されることを意味します。 したがって、それらが変数であるという概念は、スタイルシートがコンパイルされた後も残ります。

より明確にするために、いくつかの例を使用して状況を説明しましょう。 次のコードブロックは、SASSスタイルシートの一部です。

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

このSASS宣言とルールのスニペットは、次のようにCSSにコンパイルされます。

 .corners { border-radius: 30px; }

SASS変数はCSSファイル内に存在できないため（より正確には、CSSファイル内に強制的に存在させることができますが、無視されるため）、： :root内のプロパティとmediaクエリの両方がコンパイル後に失われることがわかります。それらの構文の一部は無効なCSSであるため）、変数の値を後で更新することはできません。

同じケースを考えてみましょう。ただし、CSSプリ/ポストプロセッサが適用されていない（つまり、トランスパイルやコンパイルが実行されていない）CSS変数のみを使用して適用されます。

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

明らかに、何もコンパイル/トランスパイルしていないので何も変わりません。カスタムプロパティの値は動的に更新できます。 したがって、たとえば、JavaScriptなどを使用して--valueの値を変更すると、var（）関数を使用して呼び出されたすべてのインスタンスで値が更新されます。

カスタムプロパティの機能により、この機能は非常に強力になるため、自動プレフィックスなどを実行することもできます。

Lea Verouは、 clip-pathプロパティを使用して例を設定します。 プレフィックスを付けるプロパティの値をinitialに設定することから始めますが、カスタムプロパティを使用してから、プレフィックスを付けた各プロパティの値をカスタムプロパティ値に設定します。

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

この後、残っているのはセレクター内のカスタムプロパティの値を変更することだけです。

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

これについてもう少し知りたい場合は、CSS変数を使用した自動プレフィックスに関するLeaの完全な記事を確認してください。

防弾CSSカスタムプロパティ

前述のように、CSSカスタムプロパティのブラウザサポートはまだほとんど標準ではありません。 では、これをどのように克服できますか？

ここで、PostCSSとそのプラグインpostcss-css-variablesが機能します。

PostCSSとは何か疑問に思っている場合は、私の記事PostCSS：SASSの新しいプレイ日を確認し、完了したらこれに戻ってください。 そうすれば、このすばらしいツールで何ができるかについての基本的な考え方が得られ、記事の残りの部分を読んでも混乱を感じることはありません。

postcss-css-variablesプラグインとそのpreserveオプションをtrueに設定すると、すべてのvar()関数宣言を出力に保持し、計算値をフォールバック宣言として持つことができます。 また、計算された--var宣言も保持します。 このPostCSSプラグインを使用すると、トランスパイル処理後にカスタムプロパティを動的に更新できますが、フォールバック値は、特にターゲットを絞って個別に明示的に変更しない限り、同じままであることに注意してください。

プリ/ポストプロセッサを使用せずにCSS変数を使用する方法を探している場合は、CSS @supportルールを使用して現在のサポートを手動で確認し、サポートにパッチがあるか存在しない場合は適切なフォールバックを適用できます。 例えば：

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

JavaScriptを使用したカスタムプロパティの値の変更

この記事全体を通して、JavaScriptを使用して変数を更新できると述べてきたので、それについて説明します。

次のようなCSSがあると仮定して、明るいテーマがあり、それを暗いテーマに切り替えたいとします。

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

次の手順を実行して、-text- --text-colorおよび--background-colorカスタムプロパティを更新できます。

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

興味深いユースケース

CSSカスタムプロパティの仕様に関する長年の開発と議論の中で、いくつかの興味深いユースケースが出現しました。 次にいくつかの例を示します。

テーマ： CSS変数を実装する場合、サイトに一連のテーマを使用するのはかなり簡単です。 あなたの現在のスタイルの明るいまたは暗いバリエーションが欲しいですか？ JavaScriptを使用していくつかのカスタムプロパティの値を変更するだけで完了です。

間隔の調整：サイトの間隔を微調整する必要がありますか？たとえば、列間の側溝などです。 単一のCSS変数の値を変更し、この変更がサイト全体に反映されることを確認します。

完全に動的なcalc（）関数：これらの関数内でカスタムプロパティを使用して完全に動的なcalc()関数を使用できるようになり、JavaScript内で複雑な計算や一時的な計算を行ってから、インスタンスごとにこれらの値を手動で更新する必要がなくなりました。

CSSファイルに新しい命を吹き込む

CSSカスタムプロパティは、スタイルシートに活気を与える強力で革新的な方法であり、CSSに初めて完全に動的な値を導入します。

仕様は現在、候補推奨ステータスにあります。これは、標準化が間近に迫っていることを意味します。これは、この機能を深く掘り下げて最大限に活用するための十分な理由です。