CSS カスタム・プロパティへの期待

Why I’m Excited About Native CSS Variables’ という、CSS カスタム・プロパティ (CSS 変数) を紹介する記事を日本語に翻訳し、「僕がネイティブな CSS 変数にわくわくする理由」として公開した。元記事から 3 か月近くたってしまい、旬を逃した感もあるけど、近々カスタム・プロパティが Chrome と Safari の安定版でもサポートされるというタイミングなので、まあいいかと思って公開した。

僕はこの記事を読むまで、CSS カスタム・プロパティの存在は知っていたもののほとんど注意を払っておらず、当面は Sass があるしべつにいいやと思っていたという、まさに記事の想定読者の典型だったと言える。でもこれを読んで考えをあらためました。個人的には、Sass にはじめて触れたとき以来と言っていいくらいの驚きがあった。

記事の例にあるように、レスポンシブ・デザインやコンテクスチュアル・スタイリングなどにおいて威力を発揮するのは間違いないけど、僕がとくにうれしいのはレスポンシブなタイポグラフィが実現しやすくなるという点だ。現状ではメディアによってフォントサイズを変更するくらいは容易だけど、行間やスペーシング、見出しのバランスなど、サイズではなくプロポーションをレスポンシブにするのはものすごく骨が折れる。このサイトではなんとか頑張ろうとしてるけど、絶望的にめんどくさい。これがカスタム・プロパティによってようやく可能になるというか、カスタム・プロパティが利用できるようになるまではレスポンシブなタイポグラフィはあきらめたほうがいいんじゃないかと思いはじめている。

ただ実際問題としては、フォールバックを書くのがかなり大変というかどう書きゃいいんだというのがある。なにしろ CSS 設計の根幹をなすところなので、慎重にならざるを得ないというのもある。でも Firefox ではもうサポートされてるし、さっき書いたとおり Chrome と Safari ももうすぐ、そしてなにより多くの問題を解決する可能性を持った強力なフィーチャーなので、少しずつプロジェクトに取り入れていく方法を探ってみたい。

というわけで、僕も CSS カスタム・プロパティにわくわくしてます。少なくとも、CSS の未来を明るくしてくれるもののひとつだと思う。