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

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

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

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

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

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