普通のCSSで変数が使える!?カスタムプロパティの使い方と対応状況

今までCSS内で変数を使うにはSassとかの専用のツールが必要でした。

でもこれはツールを使っているので元のCSSで直接変数を使っている訳じゃありません。

 

ですが新しいCSSではなんと特別なツールを使わなくても変数使用が可能になっています。

これはカスタムプロパティという仕様で完璧ではないもののブラウザでも対応してきています。

という訳でそのカスタムプロパティの使い方と対応状況について解説

カスタムプロパティとは

カスタムプロパティはCSS内で特定の値を表すことができるプロパティのことです。

あくまで純粋な変数ではなく、プロパティの一種だという点に注意

 

そしてこの宣言方法ですが、次のようにプロパティ名の前にハイフン2つ  --  をつけて宣言可能

上の例だと  --my-base-color  というのがカスタムプロパティになります。

そしてカスタムプロパティを宣言するときは必ずセレクタ  {}  の中に書くようにしてください。

そのセレクタに当てはまる要素とその下にある全ての要素で変数が参照できます。

間違ってもCSSの一番外つまり  {}  で囲まれていない部分に変数宣言するのはNGです。

 

そしてこのカスタムプロパティを参照するにはvar関数を使います。

例えば次のようにカスタムプロパティ名を渡せばOK

このコードのように  var(--my-base-color)  のようにすれば変数の内容が展開されます。

この場合だとh2要素のbackgroundプロパティには lightblue が設定されることになりますね。

ちなみに上で書いたようにh2要素はbody要素の下にあるので変数の範囲内です。

 

ということで以上がカスタムプロパティの一番基本的な使い方

次は細かなルールとか制限について少し説明していきます。

カスタムプロパティの範囲(スコープ )について

どんなプログラミング言語でも変数にはスコープというものがあります。

これはプログラミング内で変数が使える範囲のこと

それと同じようにカスタムプロパティにもそれが使える範囲が存在しています。

 

例えば  body  というセレクタ内(つまりbody要素)で宣言された変数のスコープは次の通り

  • body要素そのもの
  • body要素の下にある全ての要素

CSSでの変数はどこでも使えるわけではなく、それが宣言されたセレクタ要素の中のみで使用可能です。

 

具体例を出すなら次のようにカスタムプロパティを使ったCSSを書いたとしましょう。

--my-bg-color  というカスタムプロパティに  skyblue  という値を設定しています。

 

そしてこのCSSを次のようなHTMLに適用したとしましょう。

この時、背景色が変わるのは  me  と  child  というクラス名を持つ要素です。

me  の下に含まれていない  parent  の背景色は変わりません。

 

このようにカスタムプロパティにはスコープがあることを意識しましょう。

CSSのみしか使ったことがない人は感覚が分かりずらいかもしれませんが、使っていく内に慣れます。

var関数で代替値を指定するには

カスタムプロパティの値を参照するvar関数

これの使い方は基本的に1つ引数(関数が取る値や変数のこと)を渡すだけです。

 

しかしもしカスタムプロパティが見つからなかった場合、代わりの値を指定することもできます。

その指定の仕方は1つめの引数の後に代替値をコンマ区切りで書けばOK

例えば次は  --my-bg-color  がないときの代替値として  skyblue  を指定している例

上のコードで  --my-bg-color  が定義されていなければ  div.me  の背景色が  skyblue  になります。

カスタムプロパティがないときの保険としてこういう書き方は役に立ちますね、

 

ちなみにvar関数は入れ子にすることも可能です。

例えば次は代替値にさらにカスタムプロパティを指定しているコード例

上のコードの場合もし  --hoge  が宣言されていなければ  --piyo  の値が、

もし  --piyo  も宣言されてなければ  skyblue  という値が背景に設定されます。

あまり使うことはなさそうですが、覚えておくとどこかで役立ちそうです。

カスタムプロパティのブラウザ対応状況

便利なカスタムプロパティですが注意しないといけないことが1つ・・・

それはブラウザごとのカスタムプロパティの対応状況です。

今使っているブラウザだと動くけど実はそれ以外は未対応だった・・・

なんてことになると最悪なので新しいものを使う前は必ず調べておきましょう。

 

でもだからと言ってブラウザごとに対応状況を個別に調べていくのは大変すぎます。

そこで便利なのが Can I use.. というHTML5やCSS3のブラウザの対応状況を一覧表示してくれるサイト

カスタムプロパティについては次のページから対応状況が見れます。

これを見る限りは Chrome とか FireFoxとかの主要ブラウザはほとんど対応してますね。

ただ Internet Explorer(IE) と Opera Mini では残念ながら未対応な模様

でも今さらIE対応する必要性もないのでカスタムプロパティを使っても問題なさそうです。

ここまでのまとめ

カスタムプロパティについてもう一度まとめ

  • 宣言するにはプロパティ前にハイフン2つを付ける

    上の例だと  --my-base-color  というプロパティに  lightblue  という値がセットされる

  • 変数の値を参照するにはvar関数を使う

    上の例だと  --my-base-color  の値が展開されて背景色に設定される

  • カスタムプロパティにはスコープがある
    使用できるのは宣言したセレクタに該当する要素とその下にある要素だけなことに注意!
  • ブラウザの対応状況はほとんど問題なし
    IE と Opera Mini には対応していないが、それ以外でも問題なく使用可能

細かなルールとかは使っていけば自然と分かってくるのでそこは慣れですね。

 

ということでCSSで変数が使えるカスタムプロパティについてでした。

一切ツールも必要ないのでWeb開発のサクサク進めるのに役立ちそうです。

ではでは($・・)/~~~

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください