共有する

CSS Variables と CSS の未来

ここ数年にリリースされたウェブブラウザは W3C の仕様に従いつつ、実験的に独自の要素を実装して表現の幅を広げようとしています。CSS まわりでは WebKit がリードしているのではないでしょうか。マルチカラムや複数背

2008年8月7日 12:04 pm

6コメント

ここ数年にリリースされたウェブブラウザは W3C の仕様に従いつつ、実験的に独自の要素を実装して表現の幅を広げようとしています。CSS まわりでは WebKit がリードしているのではないでしょうか。マルチカラムや複数背景画像のような CSS3 にあるものから、反射やマスクのような変わったものまで実に様々です。

最近 WebKit のほうにも実装され、今月の CSS WG で草案化する可能性がある仕様で CSS Variables というのがあります。その名のとおり「CSS で変数を扱う」というもので、値を一元管理出来るようになります。詳しくは withD のこちらの記事が参考になりますが、サンプルコードを書くとこんなかんじです。

  1. @variables {
  2.  companyTheme: #069
  3.  highlight: #ffc;
  4.  PageTitleSize: 18px;
  5.  SubheaderSize: 14px;
  6. }
  7. h1 {
  8.  background: var(companyTheme);
  9.  font-size: var(SubheaderSize);
  10. }
  11. h2 {
  12.  font-size: var(SubheaderSize);
  13. }
  14. strong{
  15.  background: var(highlight);
  16. }

@variables内で変数と値を定義しておくことで、メンテナンス性を上げています。こうした一元管理の試みは以前から行われており、PHPで行うテクニックは広く知られています。CSS Variables が実装されれば、面倒な準備をせずにそのまま書き込めるので便利ですね。

期待が高まる CSS Variables ですが、反対意見も出ています。W3C の CSS WG にも参加している Bert Bos氏が最近 Why “variables” in CSS are harmful というエッセーを公開しました。彼は CSS がどんどんプログラミング言語のような扱いになっていることを危惧しており、CSS が CSS として行わればならないこと (タイポグラフィやレイアウト) にフォーカスするべきではないかと指摘。上級者には便利な拡張に思える CSS Variables だが、初心者を遠ざけてしまう恐れがあるのではないかと考えているそうです。

今、CSS を使いこなしている方の多くは、他の人が作った CSS ファイルを参考にしてスキルアップをした方が多いと思います。CSS Variables が入ることで、コードをみて覚えるというのが少し大変にはなるでしょうね。また、CSS Variables のような値の管理を CMS 側で行うというやり方も考えられると思います。

Bos氏が書いていることで同意出来る点はあります。
CSS3 セレクタは複雑ではありますが、大変便利だと思いますし、使う機会は今度ますます増えてくると思います。ただ、CSS でわざわざアニメーションをする必要があるのかどうか疑問だったりします。CSS で何でも出来るようにするよりかは CSS は CSS であって欲しいなという思いがあります。

しかしながら、CSS Variables は必要ではないとは思いません。工夫すればシンプルに CSS を管理することは出来る部分はありますが、どうしても数百行のコードになってしまいます。CSS でサイトを構築する敷居は低くなってきましたが、それとは逆にメンテナンスが年々難しくなってきているような気がします。ドキュメンテーションを作るというのもひとつの解決方法ですが、CSS Variables がメンテナンス性を上げるひとつの答えになるのではないでしょうか。

ブラウザにおける CSS の解釈の違いを理解するのも CSS を学習する上で大変な部分ではありますが、CSS の基礎を学ぶのも今は何とも難しいなという気がします。先に紹介したセレクタもそうですし、属性も様々。もちろん、ひとつのプログラミング言語を覚えるのに比べたら簡単でしょうけど、初心者が中級者への道筋が険しいものになっているような気がします。

筆者について

Photo of Yasuhisa Hasegawa

(@yhassy)

デザインやコンサルティングを通じてWebの仕事に携わる活動家。Webとデザインをキーワードに情報発信をしているだけでなく、各地でWebに関するさまざまなトピックで講演を行ったり、多数の雑誌で執筆に携わる。

この記事のコメント

  1. 1

    popcorn

    拡張されていくのは良いのだけど、結局またＩＥ，ＮＮの３ｘ～４ｘ時代に逆戻りしそうで嫌です。ＣＳＳ自体に機能をつけずとも、CSSを自動生成することは出来るし、アクセス元の環境を判断して画面を切り替える事も出来ている。
    それよりも、ブラウザごとに実現できる表現が異なるという現状を、なんとか統一してほしい。携帯端末は難しいだろうが、せめてＰＣ用は統一してほしい。

    2008年8月7日 1:56
  2. 2

    Toshi

    @variable面白いですね。個人的にはほしいです。有益な情報ありがとうございます。

    あとcssのclassって他のclassの拡張っぽくかけると便利だと常々思ってます。
    .test1 {
    xxxxx
    xxxxx
    …..
    }

    .test2 extends .test1 {
    xxxxx
    }
    test1を継承してoverwriteするみたいな。
    どうでしょうか？

    2008年8月7日 2:06
  3. 3

    ヤスヒサ

    @popcorn
    昔のように表記が大幅に崩れて、ブラウザによってあまりにも違うということはないでしょうけど、一部のブラウザで @variables がサポートされてもメンテナンス性は上がるどころか逆に手間になってしまうでしょうから、やるならいち早く導入してほしいですね。
    仰るとおり、自動生成も切り替えも現時点でも行えることを考えると @variables の存在はどうなのかなと思ってしまいます。

    @Toshi
    今でも複数のセレクタを指定したり、上書きすることは出来ますが、表記として書かれていた方が何処がどう上書きされたのか見ただけで分かりますね。ただ、これすると余計プログラミングっぽくなるのはどうなのだろう・・・。悩ましい。

    2008年8月7日 7:49
  4. 4

    seven

    @variableのような変数がCSSで扱えたらなぁと思っていましたが、
    プログラミング言語風になっていくのは僕は個人的に違うかなぁと思っています。
    その境界がどこかといわれると微妙ですが・・・。CSS3って便利なところは便利であるんでしょうけど、上手に使わないとだめそうですね。

    2008年8月8日 11:26
  5. 5

    Jon Gilkison

    I don’t read/write Japanese (although I own a house in Saitama) but I’m assuming you are saying good things about me ;)

    I wrote the PHP implementation. If you’re using it, let me know, I have a version that has a command line compiler so you can build static CSS from the command line.

    Arigato!

    Jon.

    2008年8月10日 8:47
  6. 6

    ヤスヒサ

    @seven
    ビジュアルエディタがこれからさらに進化していくのでしょうけど、今のような UI では、複雑なセレクタの指定も難しいでしょうし、そのセレクタや変数が既にあることが気付きにくいでしょうね。今後期待といったところでしょうか。

    @Jon
    Thx for leaving a comment. I linked your website as an expamle of CSS/PHP implementation (So nothing bad). I am looking forward to the further developement!

    2008年8月14日 2:44

コメントを投稿する