KOJIKA17

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

とある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の値を効率よく管理することもできそうです。

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