無駄と文化

実用的ブログ

CSSでネイティブな変数が使えるようになる日

お恥ずかしながら、
『CSSに変数はない』と先日まで思っていたのですが、CSSにもフツーに変数があったのでここに報告させていただきます。

「んなことは知ってるよ」という方は、ま、そっとしておいてください。


未来の技術『CSS Custom Properties』

正確には変数(CSS Variables)ではなくカスタムプロパティ(CSS Custom Properties)というらしいです。
英語の文章に抵抗感の無い方はこちらをどうぞ、

CSS Custom Properties for Cascading Variables Module Level 1

ものすごく簡単に使い方の説明を、

カスタムプロパティを定義して、

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

使う

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

はい、
二連のハイフン(--)で始まるプロパティがカスタムプロパティになり、カスタムプロパティに紐付けられた値をvar()関数で参照できるみたいですね。

他にも再定義されたときはどうだとか、定義されてないカスタムプロパティを参照した場合のfallbackはどうだとか、スコープはどうだとか、語り出したらいろいろあるみたいです。

細かな定義や仕様については先程の英語のドキュメントを参照してもらってもいいんですが、
日本語のリソースで言えば、こちらの記事とかですね。

CSS Variables(CSS カスタムプロパティ)の使い方

いや、完全にすごいです。サイト全体に及ぶテーマカラーの管理とかが断然楽になる。
これさえあればSassとかLessとか要らないじゃないですか。


2015年7月時点のブラウザ対応

完全にすごいカスタムプロパティですが、一応ブラウザの対応状況も見ておきましょう。
納品前日に「IE9で崩れてるんだけど」とか言われると困りますからね。

毎度おなじみ CanIUse.com 曰く...

f:id:todays_mitsui:20150727145702p:plain

...はい、
というわけで、2015年7月時点ではFirefoxでなければ動かない、まさに未来の技術なんですよ。


CSSフレームワークでも採用されている

Firefoxでしか使えないって言った直後にあれなんですが、BasscssというCSSフレームワークのドキュメントには堂々と登場していまして。
私も、Basscssのサイトを読みあさっていてカスタムプロパティというものを知った次第です。

これを見た時は『さすがにFirefoxでしか見られないサイトとか嫌なんだけどPolyfillのJSとかあるの?』と思いました。
調べてみると以下のような記述が、

Custom media queries and custom properties are powerful CSS features that provide more flexibility than similar features found in CSS preprocessors such as Sass and Less, with the potential for native browser support in the near future. With post-processors like cssnext and Rework, you can start using these features today.

Future CSS Syntax

えーっと意訳すると、

  • カスタムプロパティはSassとかLessみたいな柔軟性をもたらしてくれるすごい機能なんだぜ
  • 近い将来には各ブラウザでネイティブにサポートされるはずだぜ
  • さらに"cssnext"とか"Rework"とかのCSSポストプロセッサー(!!)を使えば今日からでも使えるようになるんだぜ

とのことです。

CSSポストプロセッサーって初めて聞きました。いやー興味深い。


今のところはわざわざポストプロセッサーを通してまで使いたくなる機能じゃないなーという印象ですが、ひとつの勢力ではあるんでしょうね。

カスタムプロパティ自体はGoogleのマテリアルデザインチームのスライドにも登場していたので、今後あたりまえの技術になっていくんでしょう。


結局、Basscssを使ってサイトを作ったわけでもなかったんですけど、見知らぬフレームワークの中身をちょっとでも覗いてみるのは楽しいもんです。
Web系の人であればCSSフレームワークの書き方を見てみるのもおすすめですよ。

私からは以上です。