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

CSS 変数 - メリット

Rob Dodson

CSS 変数は、正確には CSS カスタムプロパティと呼ばれています。 Chrome 49 でリリースされますCSS の繰り返しを減らすのに有効であり、テーマの切り替えや、場合によっては今後の CSS 機能の拡張やポリフィルにも対応します。

CSS の煩雑さ

アプリケーションを設計する際は、特定のブランドとブランドを分けておくことが一般的です。アプリの見た目を統一するために再利用される色です。残念ながら、CSS でこれらの色の値を何度も繰り返すと、面倒なだけでなくミスも起こりがちですある時点でいずれかの色が変更する必要がある場合は、風と「検索と置換」に注意を払うこともできます。大きなプロジェクトでは危険が伴います

近年では、多くのデベロッパーが SASS や CSS などの 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>

つまり、メディアクエリ内でカスタムプロパティを活用して、レスポンシブデザインで対応できますユースケースの一つとして画面のサイズが大きくなったときに、主なセクショニング要素を調整できます。

: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 を使用するウェブコンポーネントのテーマを設定する場合に特に便利です。 DOM（カスタムプロパティは Shadow の境界をまたがることができるため）Web Component 作成者フォールバック値を使用して初期設計を作成し、テーマ設定「フック」を公開できるカスタムプロパティ形式で指定できます

<!-- 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; の設定と同等ではありません。新しい P-MAX キャンペーンを渡すには、別の calc() 関数が必要です。

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

この関数を使ったことがないなら、calc() 関数は非常に便利です。 CSS 値を決定するための計算を行えるツールです。最新のすべてのブラウザでサポートされており、組み合わせて使用することもできます。カスタムプロパティを使用して新しい値を作成できます例:

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

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

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

/* 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');

カスタムプロパティの値を設定して、別のカスタムプロパティを参照することもできます。 var() 関数を呼び出して、実行時にそのプロパティを指定する必要があります。 setProperty()。

/* 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 の煩雑さ

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

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

滝

var() 関数

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

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

ブラウザ サポート

デモ

関連情報

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

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

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

ブラウザサポート