UAVICE / UA によるCSS 書き換えエンジンPHP
金魚屋開発支援シリーズ。
概要
特定のOSやブラウザ、バージョンにだけ適用したいCSS を、簡単なタグを記載することで一枚のCSS だけで振り分け表示することを可能にしたPHP スクリプト。
振り分けにはブラウザのUSER AGENT（ユーザエージェント）が利用されます。
はじめに
目的
- 一つのCSS にまとめて全ての設定を書き込みたい
- ブラウザ別にJavaScript などでCSS を切り替えるのは面倒
- CSS ハックではコードの見栄えが悪い
Latest Version
動作環境
PHP4 or 5
タグによる振り分けの方法
ブラウザ別の振り分け
div { width: 100%; // IE width: auto; // FF }
div { width: 100%; /* IE */ }
のように出力され、FireFox ブラウザでは
div { width: auto; /* FF */ }
のように出力されます。
OS別の振り分け
div { width: 100%; // WIN width: auto; // MAC }
例えば上記のようなCSS を記述すると、Windows では
div { width: 100%; /* WIN */ }
のように出力され、Mac では
div { width: auto; /* Mac */ }
のように出力されます。
ブラウザとバージョンの振り分け
タグにはブラウザとバージョン、OS とブラウザなど、別種類のタグを同時に指定できます。
div { width: 100%; // IE 7 width: 99%; // IE 6 width: 98%; // WIN IE 6 width: 97%; // MAC IE 7 }
例えば上記のようなCSS を記述すると、Windows のIE6 では
div { width: 99%; /* IE 6 */ width: 98%; /* WIN IE 6 */ }
div { width: 100%; /* IE 7 */ width: 97%; /* MAC IE 7 */ }
のように出力されます。
タグの種類
タグには大きく分けて３種類あります。
- OS タグ
- ブラウザタグ
- バージョンタグ
OSタグとブラウザタグ、ブラウザタグとバージョンタグ、といったように別種類のタグをスペースやタグで区切って同時に指定することが可能です。
指定の順番は考慮されません。
またタグの大文字・小文字は判断されません。
ブラウザタグ
ブラウザタグは主要な５つのブラウザに対応します。
OS タグと同様、それぞれ別名を利用することができます。
タグの対応は下記。
バージョンタグ
バージョンタグはブラウザのメジャーバージョンに対応します。
指定は整数で行います。
例えばIE6 なら 6, FireFox2 なら 2 などです。
ブラウザタグを指定せずに、バージョンタグだけを指定することも可能です。
タグを指定しないと
振り分けが必要ない定義では、タグを指定しないことでUSER AGENT に関わらず全てのブラウザ向けに出力されます。
利用上の注意
- タグは行単位での指定のみ可能です。
- 複数行にまたがる定義には利用できません。
- ブロックごと振り分ける機能はありません。
準備
CSS の準備
振り分け表示したいCSS の拡張子を php にします。
ファイルの先頭に行を開けずに以下の記述をします。
<?php mb_internal_encoding('UTF-8'); mb_http_output('auto'); define('UAVICE_FILE', __FILE__); require './uavice.php'; ?>
- １行目の <?php は変えないでください。
- ２行目はCSS ファイルの文字コードを指定しています。UTF-8 の箇所を適宜変更してください。
- ３行目はCSS を出力するときの文字コードを指定しています。そのままで良いときは auto のまま、別の文字コードとして出力したい場合は auto の箇所を適宜変更してください。
- ４行目はCSS をブラウザキャッシュさせるために必要な記述です。ブラウザキャッシュを利用しなければ削除してください。
- ５行目は設置したuavice.php の位置を指定します。絶対パスか、CSS ファイルからの相対パスで指定します。
- ６行目の ?> は変えないでください。
- ?> の後の行から、実際のCSS を記載してください。
その他の機能
LINUX はMacintosh として扱う
LINUX 専用の振り分けが必要ではなく、Macintosh として扱いたい場合には下記のように指定します。
<?php mb_internal_encoding('UTF-8'); mb_http_output('auto'); define('UAVICE_FILE', __FILE__); define('UAVICE_NOT_LINUX', 'MAC'); require './uavice.php'; ?>
そのほかに利用できる指定
※ いずれも、require './unvice.php' の記述の前に記載してください。
define('UAVICE_NOT_OPERA', 'IE');
Opera 向けの振り分けが必要にならない場合に、代わりのブラウザを指定します。上記ではIE を指定しています。IE を適宜書き替えてください。
define('UAVICE_NOT_NETSCAPE', 'FF');
Netscape 向けの振り分けが必要にならない場合に、代わりのブラウザを指定します。上記ではFireFox を指定しています。FF を適宜書き替えてください。
define('UAVICE_UNKNOWN_OS', 'WIN');
define('UAVICE_UNKNOWN_BROWSER', 'IE');
いずれもUSER AGENT からOS 、ブラウザを判別できない場合に、代わりに利用されるものを指定します。
なお、これらの指定がない場合は全てのタグが対象外になります。
define('UAVICE_FILE', __FILE__);
CSS をブラウザにキャッシュさせたい場合に指定します。
内容は書き換えずに、このまま記載してください。
この記載がない場合、CSS は基本的にキャッシュされません。
define('UAVICE_DEBUG', true);
デバッグモード。
これを指定すると、出力されるCSS の先頭に判別したUA とOS、ブラウザ、バージョンが表示されます。
