inspfightmanの日記 RSSフィード

2008-06-24

[][][] UAVICE / UA によるCSS 書き換えエンジンPHP

 金魚屋開発支援シリーズ。

名前

UA Variable Interpretational CSS Engine

UA によるCSS 書き換えエンジンPHP

概要

特定のOSブラウザ、バージョンにだけ適用したいCSS を、簡単なタグを記載することで一枚のCSS だけで振り分け表示することを可能にしたPHP スクリプト

振り分けにはブラウザのUSER AGENT(ユーザエージェント)が利用されます。

はじめに

  • 以下あらゆる著作物の利用に関して著作者は一切の責任を負いません。
  • 以下あらゆる著作物の著作権は金魚屋ですが、とりたてて利用に制限はありません。
  • 利用にはCSSPHP について多少の知識が必要です。
  • ツッコミ大歓迎。
  • 細かいところは解説しません。

目的

  • 一つのCSS にまとめて全ての設定を書き込みたい
  • ブラウザ別にJavaScript などでCSS を切り替えるのは面倒
  • CSS ハックではコードの見栄えが悪い

Latest Version

HISTORY

2008-06-24 Version 1.0.1

 バグを修正

2008-06-24 Version 1.0.0

 公開

パッケージ構成

uavice.php
スクリプトの本体
sample.css.php
CSS のサンプル
README.txt
このファイル

動作環境

PHP4 or 5

タグによる振り分けの方法

ブラウザ別の振り分け
div {
	width: 100%; // IE
	width: auto; // FF
}

 例えば上記のようなCSS を記述すると、IE ブラウザでは

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 */
}

のように出力され、Mac IE 7 では

div {
	width: 100%; /* IE 7 */
	width:  97%; /* MAC IE 7 */
}

 のように出力されます。

タグの種類

 タグには大きく分けて3種類あります。

 OSタグとブラウザタグ、ブラウザタグとバージョンタグ、といったように別種類のタグをスペースやタグで区切って同時に指定することが可能です。

 指定の順番は考慮されません。

 またタグの大文字・小文字は判断されません。

OS タグ

 OS タグにはWindows, Mac, Linux の3つが存在します。

 またそれぞれ別名を利用することができます。

 OS とタグの対応は下記。

ブラウザタグ

 ブラウザタグは主要な5つのブラウザに対応します。

 OS タグと同様、それぞれ別名を利用することができます。

 タグの対応は下記。

バージョンタグ

 バージョンタグはブラウザのメジャーバージョンに対応します。

 指定は整数で行います。

 例えばIE6 なら 6, FireFox2 なら 2 などです。

 ブラウザタグを指定せずに、バージョンタグだけを指定することも可能です。

タグを指定しないと

 振り分けが必要ない定義では、タグを指定しないことでUSER AGENT に関わらず全てのブラウザ向けに出力されます。

利用上の注意
  • タグは行単位での指定のみ可能です。
  • 複数行にまたがる定義には利用できません。
  • ブロックごと振り分ける機能はありません。

準備

スクリプトの設置

uavice.php をどこかに設置します。

CSS の準備

振り分け表示したいCSS拡張子php にします。

ファイルの先頭に行を開けずに以下の記述をします。

<?php
mb_internal_encoding('UTF-8');
mb_http_output('auto');
define('UAVICE_FILE', __FILE__);
require './uavice.php';
?>
  • 1行目の <?php は変えないでください。
  • 2行目はCSS ファイルの文字コードを指定しています。UTF-8 の箇所を適宜変更してください。
  • 3行目はCSS を出力するときの文字コードを指定しています。そのままで良いときは auto のまま、別の文字コードとして出力したい場合は auto の箇所を適宜変更してください。
  • 4行目はCSSブラウザキャッシュさせるために必要な記述です。ブラウザキャッシュを利用しなければ削除してください。
  • 5行目は設置したuavice.php の位置を指定します。絶対パスか、CSS ファイルからの相対パスで指定します。
  • 6行目の ?> は変えないでください。
  • ?> の後の行から、実際のCSS を記載してください。

その他の機能

LINUXMacintosh として扱う

 LINUX 専用の振り分けが必要ではなく、Macintosh として扱いたい場合には下記のように指定します。

<?php
mb_internal_encoding('UTF-8');
mb_http_output('auto');
define('UAVICE_FILE', __FILE__);
define('UAVICE_NOT_LINUX', 'MAC');
require './uavice.php';
?>

 UAVICE_NOT_LINUX がLINUX 不要の場合に、代わりに使うOS の指定になります。

 Windows として処理したい場合は、MAC をWIN などに書き替えます。

そのほかに利用できる指定

※ いずれも、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 の先頭に判別したUAOSブラウザ、バージョンが表示されます。

利用上の注意

日本語環境での注意点

 プログラムの性質上、Shift_JISSJIS-WIN をファイルの文字コードとして利用すると、文字化けを起こすことがあります。

 文字化けを避けて、かつ出力をShift_JIS で行いたい場合は下記のような指定をしてください。

<?php
mb_internal_encoding('UTF-8');
mb_http_output('SJIS');

 UTF-8 はEUC-JP などSJIS 以外なら別の日本語文字コードでもかまいません。その場合は、実際のファイルの文字コードに合わせて、UTF-8 の箇所を書き替えます。

FILES

uavice.php

 スクリプトの本体。

sample.css.php

 CSS のサンプル。

README.txt

 解説文。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/inspfightman/20080624/1214241591

Copyright (C) 金魚屋・J・龍角 All right reserved.

当ブログの記事、写真などの二次利用に関する制限はありません。

Connection: close