CSS 変数 - メリット

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 でカスタム プロパティです。

デモ

ぜひお試しください。 サンプル では、ここで活用できる興味深い手法をひととおりご紹介します。 カスタムプロパティに移動します

関連情報

カスタム プロパティについて詳しくは、 Google アナリティクス チームは、カスタム プロパティに魅力を感じている理由に関する入門書を執筆しています。 他のブラウザで進行状況を確認できます chromestatus.com.