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

2010-12-10

とあるIEのバグを調べていたら、Lessに近い形でCSSをPHPで書けることを知ったのでメモ。
まずHTMLのlink要素のファイル名を修正することから始めます。ここでのCSSファイル名は仮にdummy.phpとします。

<link rel="stylesheet" type="text/css" href="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の値を効率よく管理することもできそうです。

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

参考サイト