このページは Cloud Translation API によって翻訳されました。

CSS 変数 - メリット

Rob Dodson

Chrome 49 では、CSS 変数（より正確には CSS カスタムプロパティ）が導入されます。これらは CSS の繰り返しを減らすためだけでなく、テーマの切り替えや、将来の CSS 機能の拡張やポリフィルなどの強力なランタイムエフェクトにも役立ちます。

CSS が雑然としている

アプリケーションを設計する際は、アプリの外観の一貫性を維持するために再利用されるブランドカラーのセットを確保しておくのが一般的です。残念ながら、CSS でこれらの色の値を何度も繰り返すのは面倒なだけでなく、エラーが発生しやすくなります。ある時点でいずれかの色を変更する必要がある場合、風に注意を払い、すべてのものを「見つけて交換」することができますが、大規模なプロジェクトでは、これは簡単に危険です。

近年、多くのデベロッパーが SASS や LESS などの CSS プリプロセッサに目を向け、プリプロセッサ変数を使用することでこの問題を解決しています。これらのツールはデベロッパーの生産性を大幅に向上させましたが、使用される変数には大きな欠点があります。それは、静的であり、ランタイム時に変更できないということです。実行時に変数を変更する機能を追加すると、アプリケーションの動的テーマ設定などが可能になるだけでなく、レスポンシブデザインに大きな影響を及ぼし、将来の CSS 機能にポリフィルできるようになります。Chrome 49 のリリースでは、こうした機能を CSS カスタムプロパティの形式で利用できるようになりました。

カスタムプロパティの概要

カスタムプロパティに、CSS ツールボックスに次の 2 つの新機能が追加されました。

作成者は、作成者が選択した名前のプロパティに任意の値を割り当てることができる。
var() 関数。作成者はこれらの値を他のプロパティで使用できます。

簡単な例で説明しましょう

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color は、作成者が定義したカスタムプロパティであり、値は #06c です。すべてのカスタムプロパティは 2 つのダッシュで始まります。

var() 関数は、自身を取得してカスタムプロパティ値に置き換えます。その結果、color: #06c; になります。ただし、スタイルシートのどこかでそのカスタムプロパティを定義していれば、var 関数で使用できます。

最初は構文が少し奇妙に思われるかもしれません。多くのデベロッパーから、「変数名に $foo だけを使用すべきではないのはなぜですか？」という質問が寄せられます。特に、可能な限り柔軟性を高め、将来的に $foo マクロを使用できるようにするために選択しました。背景については、仕様作成者の Tab Atkins によるこちらの投稿をご覧ください。

カスタムプロパティの構文

カスタムプロパティの構文は単純です。

--header-color: #06c;

カスタムプロパティでは大文字と小文字が区別されるため、--header-color と --Header-Color は異なるカスタムプロパティです。表面上は単純に見えるかもしれませんが、カスタムプロパティに使用できる構文は、実際にはかなり制限が緩やかです。たとえば、有効なカスタムプロパティは次のとおりです。

--foo: if(x > 5) this.width = 10;

通常のプロパティでは無効なため、変数としては有用ではありませんが、実行時に JavaScript で読み取られ、操作される可能性があります。つまり、カスタムプロパティを使用すると、現在の CSS プリプロセッサでは実現できないあらゆる興味深い手法を活用できる可能性があります。「あくびは SASS をしているから、どうやって気にしているのだろう...」と思った方は、もう一度ご覧いただき、これらの変数は、使い慣れた変数ではありません。

カスケード

カスタムプロパティは標準のカスケードルールに従うため、同じプロパティを異なる詳細度で定義できます。

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

つまり、メディアクエリ内のカスタムプロパティをレスポンシブデザインに役立てることができます。ユースケースの 1 つは、画面サイズが大きくなるにつれて、主要なセクション要素の周囲の余白を拡大することです。

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

重要な点として、上記のコードスニペットは、メディアクエリ内の変数を定義できない現在の CSS プリプロセッサでは不可能です。アビリティアビリティがあれば、大きな可能性が開けます。

また、他のカスタムプロパティから値を取得するカスタムプロパティを使用することもできます。これはテーマ設定に非常に役立ちます。

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

var() 関数

カスタムプロパティの値を取得して使用するには、var() 関数を使用する必要があります。var() 関数の構文は次のようになります。

var(<custom-property-name> [, <declaration-value> ]? )

ここで、<custom-property-name> は作成者が定義したカスタムプロパティの名前（--foo など）、<declaration-value> は、参照先のカスタムプロパティが無効な場合に使用されるフォールバック値です。代替値はカンマ区切りのリストで 1 つの値に結合されますたとえば、var(--font-stack, "Roboto", "Helvetica"); は "Roboto", "Helvetica" のフォールバックを定義します。マージンやパディングに使用されるような省略形の値はカンマで区切られていないため、パディングの適切な代替例は次のようになります。

p {
    padding: var(--pad, 10px 15px 20px);
}

コンポーネント作成者は、これらのフォールバック値を使用して、要素の防御スタイルを作成できます。

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

この手法は、カスタムプロパティが Shadow 境界を越える可能性があるため、Shadow DOM を使用するウェブコンポーネントのテーマ設定に特に役立ちます。ウェブコンポーネントの作成者は、フォールバック値を使用して初期デザインを作成し、カスタムプロパティの形式でテーマ設定「フック」を公開できます。

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

var() を使用する際に注意すべき問題がいくつかあります。変数をプロパティ名にすることはできません。次の例をご覧ください。

.foo {
    --side: margin-top;
    var(--side): 20px;
}

ただし、これは margin-top: 20px; の設定とは異なります。2 番目の宣言は無効であり、エラーとしてスローされます。

同様に、その一部が変数で指定される値を（単純に）構築することはできません。

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

これは、margin-top: 20px; の設定とは異なります。値を作成するには、calc() 関数という別の関数が必要です。

calc() を使用して値を作成する

calc() 関数は、CSS 値の計算を行うための小さなツールです。最新のすべてのブラウザでサポートされており、カスタムプロパティと組み合わせて新しい値を作成できます。次に例を示します。

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

JavaScript でのカスタムプロパティの操作

実行時にカスタムプロパティの値を取得するには、計算済みの CSSStyleDeclaration オブジェクトの getPropertyValue() メソッドを使用します。

/* CSS */
:root {
    --primary-color: red;
}

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

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

同様に、実行時にカスタムプロパティの値を設定するには、CSSStyleDeclaration オブジェクトの setProperty() メソッドを使用します。

/* CSS */
:root {
    --primary-color: red;
}

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

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

setProperty() の呼び出しで var() 関数を使用して、実行時に別のカスタムプロパティを参照するようにカスタムプロパティの値を設定することもできます。

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

カスタムプロパティはスタイルシート内の他のカスタムプロパティを参照できるため、ランタイムにさまざまな効果をもたらすことが想像できます。

ブラウザサポート

現在、カスタムプロパティをサポートしているのは、Chrome 49、Firefox 42、Safari 9.1、iOS Safari 9.3 です。

デモ

サンプルで、カスタムプロパティのおかげで活用できる興味深い手法の一部をご紹介していますので、ぜひお試しください。

CSS 変数 - メリット

CSS が雑然としている

カスタム プロパティの概要

カスタム プロパティの構文