Weblog

CSSをスクリプト言語で処理するアイデア3つ(概論)

CSSはCSSファイルに記述するのが割と一般的であろうが,個人的にはその手法はなんとなく無理があるような気がしている.現状ではCSS2.1が勧告され,CSS3も一部モジュールは勧告まで行ってるが,ブラウザ側で対応できてないもの・できないものがあったりする.その上にCSSハックをかまそうものなら,ターゲットブラウザによるチェックを種類分だけやらないといけなくなる.では,どのようにすればいいのか.1つのアイデアとしては,Perl・PHP・Rubyなどのスクリプト言語で処理してしまおうというという方法である.

その前に,似たような技術にSassLESSがあるが,独自の書き方を覚える必要があるので,これらとは別の方法を取ることにする.今回考えた方法は次の3つ.

  • スクリプトファイルに直書き
  • CSSファイルをスクリプトで変換する
  • あらかじめブラウザごとのCSSを作成し,スクリプトファイルで読みだすCSSファイルをブラウザごとに振り分ける

順に書いていこう.

1つ目は,スクリプトファイルにCSSを記述していこうという方法である.ヘッダで「Content-Type: text/css」を出力できれば,事実上サーバでCSSとして処理できる.CSSのプロパティ値を変数に入れておいて,適宜呼び出したり,独自関数を作ってそれらを使いまわすなどの方法ができよう.ちなみに,このサイトで使っているCSSは,この方法を使っている.

2つ目は,CSSファイルをスクリプトファイルを経由して出力する方法である.任意のブラウザで対応していないCSSがあっても,解釈できるように変換したり,意図的に消したりするなどの方法が挙げられるだろう.CSSの仕様上,解釈できないCSSはスルーするが,スルーするくらいなら書かないほうがマシという考えも個人的にはある.

3つ目は,対応させるブラウザごとにCSSファイルを作っておいて,スクリプトファイルで読み出すCSSを変えるという方法である.ファイルを必要分だけ作る必要があるが,他のブラウザのことを考える必要はないはずだ.CSSハックをかます必要がないので,Validationチェックを通しやすくなるだろうとの期待が持てる.

ぼんやりとしたアイデアだが,どれもCSSをプログラミングの力を借りて半ば強引に解決しようという試みである.弱点はローカル環境でというのはあるが(ヒアドキュメントでCSSを書くと,CSSとして解釈するブラウザがあるようだが),サークルとして出るにはまだまだ時間があるので,とりあえず書いてみたという次第.とは言いながら今書いたことがCPANPEARにあったらそっち使ったほうが速いじゃんっていう.

作成時間:
2011年10月30日 午後5時26分
タグ:
HTML / XHTML / CSSProgramming
このページのURL:
http://www.kiryushiki.net/log/2011/10-30-01.html
前のエントリ:
インタビューページ作ってみた
次のエントリ:
ぷろとらドットコムの同人誌に寄稿した