CSS変数（カスタムプロパティ）

CSS変数とも呼ばれるCSSカスタムプロパティをご覧ください。これは、より優れたCSSの作成に役立つ最新のブラウザの強力な新機能です。

前書き

ここ数年、CSSプリプロセッサは多くの成功を収めました。新しいプロジェクトがLessまたはSASSで始まることは非常に一般的でした。そして、それはまだ非常に人気のある技術です。

これらのテクノロジーの主な利点は、私の意見では次のとおりです。

セレクターをネストできます
簡単なインポート機能を提供します
彼らはあなたに変数を与えます

最新のCSSには、と呼ばれる新しい強力な機能がありますCSSカスタムプロパティ、通称CSS変数。

CSSはのようなプログラミング言語ではありませんJavaScript、Python、PHP、Ruby、またはGoで、変数が何か便利なことをするための鍵となります。 CSSは実行できる機能が非常に限られており、主にブラウザーにHTMLページの表示方法を指示する宣言型の構文です。

ただし、変数は変数です。値を参照する名前であり、CSSの変数は、値の定義を一元化することで、CSSの繰り返しや不整合を減らすのに役立ちます。

また、CSSプリプロセッサにはない独自の機能が導入されています。JavaScriptを使用してプログラムでCSS変数の値にアクセスして変更できます。

変数の使用の基本

CSS変数は、先頭に追加する特別な構文で定義されます2つのダッシュ名前に（--variable-name）、次にコロンと値。このような：

:root {
  --primary-color: yellow;
}

（詳細:root後で）

を使用して変数値にアクセスできますvar()：

p {
  color: var(--primary-color)
}

変数値には、次のような任意の有効なCSS値を指定できます。

:root {
  --default-padding: 30px 30px 20px 20px;
  --default-color: red;
  --default-background: #fff;
}

任意の要素内に変数を作成します

CSS変数は、任意の要素内で定義できます。いくつかの例：

:root {
  --default-color: red;
}
body {
–default-color: red;
}
main {
–default-color: red;
}
p {
–default-color: red;
}
span {
–default-color: red;
}
a:hover {
–default-color: red;
}

これらのさまざまな例で変更されるのは、範囲。

変数スコープ

セレクターに変数を追加すると、そのすべての子が変数を使用できるようになります。

上記の例では、:rootCSS変数を定義する場合：

:root {
  --primary-color: yellow;
}

:rootツリーのルート要素を識別するCSS疑似クラスです。

HTMLドキュメントのコンテキストでは、:rootセレクターはhtmlそれ以外の要素:root高い特異性（優先されます）。

SVG画像のコンテキストでは、:rootを指すsvg鬼ごっこ。

CSSカスタムプロパティをに追加する:rootページ内のすべての要素で使用できるようにします。

内に変数を追加する場合.containerセレクター、それはの子供たちだけが利用できるようになります.container：

.container {
  --secondary-color: yellow;
}

この要素の外でそれを使用することは機能しません。

変数は再割り当て：

:root {
  --primary-color: yellow;
}
.container {
–primary-color: blue;
}

外側.container、--primary-colorになります黄、しかしその中には青い。

を使用して、HTML内の変数を割り当てたり上書きしたりすることもできます。インラインスタイル：

<main style="--primary-color: orange;">
  <!-- ... -->
</main>

CSS変数は通常に従いますCSSカスケードルール、に従って優先順位が設定されます特異性

JavaScriptを使用したCSS変数値との対話

CSS変数の最も優れた点は、JavaScriptを使用してそれらにアクセスして編集できることです。

プレーンJavaScriptを使用して変数値を設定する方法は次のとおりです。

const element = document.getElementById('my-element')
element.style.setProperty('--variable-name', 'a-value')

以下のコードは、変数がで定義されている場合、代わりに変数値にアクセスするために使用できます。:root：

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--variable-name')).trim()

または、異なるスコープで設定された変数の場合に、特定の要素にスタイルを適用するには、次のようにします。

const element = document.getElementById('my-element')
const styles = getComputedStyle(element)
const value = String(styles.getPropertyValue('--variable-name')).trim()

無効な値の処理

変数が変数値を受け入れないプロパティに割り当てられている場合、それは無効と見なされます。

たとえば、ピクセル値をに渡すことができますpositionプロパティ、または色プロパティへのrem値。

この場合、その行は無効と見なされ、無視されます。

ブラウザのサポート

CSS変数のブラウザサポートはとても良い、使用できますか。

CSS変数はそのまま残り、Internet Explorerや他のブラウザーの古いバージョンをサポートする必要がない場合は、今日それらを使用できます。

古いブラウザをサポートする必要がある場合は、次のようなライブラリを使用できます。PostCSSまたは神話ただし、変数は古き良き変数のないCSSに変換されるため、JavaScriptまたはブラウザー開発ツールを介して変数を操作する機能が失われます（そのため、CSS変数の機能のほとんどが失われます）。

CSS変数では大文字と小文字が区別されます

この変数：

--width: 100px;

とは異なります：

--Width: 100px;

CSS変数の数学

CSS変数で数学を行うには、次を使用する必要がありますcalc()、例えば：

:root {
  --default-left-padding: calc(10px * 2);
}

CSS変数を使用したメディアクエリ

ここでは特別なことは何もありません。 CSS変数は通常、メディアクエリに適用されます。

body {
  --width: 500px;
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
–width: 800px;
}
.container {
width: var(–width);
}

var（）のフォールバック値の設定

var()2番目のパラメーターを受け入れます。これは、変数値が設定されていない場合のデフォルトのフォールバック値です。

.container {
  margin: var(--default-margin, 30px);
}

私の無料ダウンロードCSSハンドブック