CSS内部でブラウザ毎の値を切り替える、Conditional-CSS

昨日ぼんやり海外のサイトのニュースを見ていたら、「Conditional-CSS」というサイトのリンクが載ってました。はて、それは何じゃらほい?と見てみると面白いことをされているじゃあーりませんか。

Web制作者の悩みの種といえば、ブラウザの種類が多いこと。
サイトの見え方を重要視した場合など、ターゲット次第ではCSSを切り替えたり、やれCSSハックだなんだと頭を抱えることにもなります。対応させるIEのバージョン次第ではコンディショナルコメントを使ったりされている方もいるのではないでしょうか(ボクはどちらもほとんど使わないのですが… 笑)。

そんなブラウザ毎に微妙に違う解釈を一つのCSSファイルで実現する方法として、このConditional-CSSってものが作られたようです。

これ、PHP版とかC版とかいろいろあるんですが、サイトの右側にあるコンパイラを使って必要なファイルを生成することができます。PHPならバージョンを選んで自分のCSSの名前を入れて「GO」ボタンを押せば、自動的に「c-css.php」なるファイルがダウンロードできます。

c-css-01

で、そのファイルをサーバにアップしてCSSの代わりにコイツを指示する、というのが基本的な導入方法のようです(サイトの説明ちゃんと読んでください 笑)。

Include the ‘c-css.php’ file as you would any CSS file on your web-pages using: @import “{path_to_}/c-css.php”; (or similar).

CSSの記述方法はサイトにも載ってますが、CSSの中にコンディショナルコメント的な書き方で適用させるブラウザ毎の値を入れておく感じです。

c-css-02

デモサイトをそれぞれのブラウザで見て、CSSの頭を見るとちゃんとそのブラウザ専用にCSSが生成されているようですね。そのオリジナルのCSSもサイトには用意されていますので、中を見てみると良いでしょう。

アクセスの多いサイトなんかだと、いちいちPHP呼び出して処理させるとどうかなぁ?と思ったりもしますが、ブラウザ毎に同じようなCSSを何枚も用意するよりは一個で完結できるのは制作者にとっては便利かもしれませんね。

ちなみに無駄に「font.css」だの「layout.css」だの複数のCSSを読み込んでいる場合(HTTP requestsの回数をあげるのが好きな方 謎)は、そのPHPの中の配列にCSSのファイル名を入れておけば良さそうですよ(ってことは、これを使えば統合できるんじゃないか?と思った)。

ま、面白そうだったのでお知らせまで。
使いたかったら、あとは皆さんが頭を使うだけです(笑)。

Tags: , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE