CSSをPHPで効率良く書く方法

とあるIEのバグを調べていたら、Lessに近い形でCSSをPHPで書けることを知ったのでメモ。

まずHTMLのlink要素のファイル名を修正することから始めます。ここでのCSSファイル名は仮にdummy.phpとします。

外部PHPを外部CSSとして認識させる。

拡張子がPHPの場合、UAに対しContent-Typeのメディアタイプにtext/htmlとして返してしまいます。
これを正常にメディアタイプをtext/cssとして返してやれば、拡張子がPHPでもCSSとして認識してくれます。

<?php header('Content-Type: text/css; charset=utf-8'); ?>
@charset "UTF-8";

この記述のみでCSS設定完了です。

実際にPHPでCSSを記述してみる。

<?php header('Content-Type: text/css; charaset=utf-8'); ?>
@charset "UTF-8";

<?php $color = '#00a'; $transition = 'transition:opacity 1s 0s'; ?>

a { outline:none; color:<?php echo $color; ?>; -o-<?php echo $transition; ?>; -webkit-<?php echo $transition; ?>; -moz-<?php echo $transition; ?>; -ms-<?php echo $transition; ?>; <?php echo $transition; ?>;}

PHPですので、プロパティや数値を変数として格納することができます。
Progressive Enhancementを行う場合、ベンダープレフィックスを何度もつけなければならない場合などで、効果を期待できます。
また変数を変換させることにより、padding, margin, widthの値を効率よく管理することもできそうです。

かなりトリッキーな使い方なので、実際に使うかは別として面白い手法でしたので、記事にしてみました。

ツイート
このエントリーをはてなブックマークに追加
次の記事
WebデザイナーのためのOperaの15の便利機能
前の記事
CSSや画像の命名規則について
HOMEに戻る