実験くん & CSS 振り分け その6-2

CSS に SSI は使えるのかい

CSS 振り分け その6【SSI による振り分け】では、HTML リソースに SSI を使用して、UA 毎に CSS を振り分ける作戦だったわけですが、この方法だと対象 UA が増えた場合、全 HTML リソースの記述変更をする必要があり、大変な手間が発生します。

そこで、CSS 側で SSI を用い、補正 CSS を UA 毎に振り分ける作戦を実験してみましょう。

この方法は、【2003 年 6 月の履歴もしくは日誌 / おのひろきおんらいん】にてご指摘いただきました。この CSS 側で SSI を使用する方法だと、対象 UA が増えた場合、基本 CSS の記述を変更するだけなので、変更作業が非常にスマートになりますねぇ。感謝。

Gecko では『白地に黒』。MacIE5 では『黒地に白』、になるはずー。

NN4.x は『青地に白』、Opera は『緑地に白』。

WinIE5 は『銀地に黒』、WinIE5.5 は『灰色地に黒』、WinIE6 は『赤地に白』。

それ以外は『白地に灰色』でせう。

ソース

【basic.css】

@charset "Shift_JIS" ;

@import url("
<!--#if expr="($HTTP_USER_AGENT = /compatible; MSIE 5/) && ($HTTP_USER_AGENT = /Mac/)" -->MacIE5.css
<!--#elif expr="($HTTP_USER_AGENT = /Gecko/)" -->Gecko.css
<!--#elif expr="($HTTP_USER_AGENT = /Mozilla\/4/) &&! ($HTTP_USER_AGENT = /compatible/)" -->nn4x.css
<!--#elif expr="($HTTP_USER_AGENT = /Opera/)" -->Opera6.css
<!--#elif expr="($HTTP_USER_AGENT = /compatible; MSIE 5.0/) && ($HTTP_USER_AGENT = /Windows/)" -->WinIE5.css
<!--#elif expr="($HTTP_USER_AGENT = /compatible; MSIE 5.5/) && ($HTTP_USER_AGENT = /Windows/)" -->WinIE55.css
<!--#elif expr="($HTTP_USER_AGENT = /compatible; MSIE 6/) && ($HTTP_USER_AGENT = /Windows/)" -->WinIE6.css
<!--#else -->kara.css<!--#endif -->
");

/* 基本スタイルだが、NN4x以外は適用されないと思ふ */
body{
	background-color : teal ;
	color : white ;
}

span.Gecko{
	background-color : white ;
	color : black ;
}

span.MacIE5{
	background-color : black ;
	color : white ;
}

span.nn4x{
	background-color : teal ;
	color : white ;
}

span.Opera{
	background-color : green ;
	color : white ;
}

span.WinIE5{
	background-color : silver ;
	color : black ;
}

span.WinIE55{
	background-color : gray ;
	color : black ;
}

span.WinIE6{
	background-color : red ;
	color : white ;
}

span.Kara{
	background-color : white ;
	color : gray ;
}

【MacIE5.css】

@charset "Shift_JIS" ;

/* MacIE5x用スタイル */
body{
	background-color : black !important;
	color : white !important;
}

/* なんか MaIE5 は body の color が優先されるので補正 */
span.Gecko{
	color : black !important ;
}

span.MacIE5{
	color : white !important ;
}

span.nn4x{
	color : white !important ;
}

span.Opera{
	color : white !important ;
}

span.WinIE5{
	color : black !important ;
}

span.WinIE55{
	color : black !important ;
}

span.WinIE6{
	color : white !important ;
}

span.Kara{
	color : gray !important ;
}

【Gecko.css】

@charset "Shift_JIS" ;

/* Gecko 用スタイル */
body{
	background-color : white !important;
	color : black !important;
}

【nn4x.css】

@charset "Shift_JIS" ;

/* NN4x用だが、インポートのバグで無意味 */
body{
	background-color : navy !important;
	color : white !important;
}

【Opera6.css】

@charset "Shift_JIS" ;

/* Opera 用スタイル */
body{
	background-color : green !important;
	color : white !important;
}

【WinIE5.css】

@charset "Shift_JIS" ;

/* WinIE5 用スタイル */
body{
	background-color : silver !important;
	color : black !important;
}

【WinIE55.css】

@charset "Shift_JIS" ;

/* WinIE5.5 用スタイル */
body{
	background-color : gray !important;
	color : black !important;
}

【WinIE6.css】

@charset "Shift_JIS" ;

/* WinIE6 用スタイル */
body{
	background-color : red !important;
	color : white !important;
}

【kara.css】

@charset "Shift_JIS" ;

/* その他の UA用 */
body{
	background-color : white !important;
	color : gray !important;
}

.htaccess

Xbithack full になってるから、パーミッションを 754 とかにすりゃ、CSS でも SSI が効くかと思ったら、駄目だったので、.htaccess に下記を追加。


AddType text/css  .css
AddHandler server-parsed .css

やや、6 ヶ月間も正常に動作してなかったやうだ

いやー、サーバ移転した時に、.htaccess をバイナリでアップロードしたみたいで、さっきまで正常に動いてなかったわ。ゴメン。

2004-09-14T18:46:29+09:00 追記

でっちあげた人

2003-06-15T18:40:44+09:00 カナかな団首領 last modified 2004-12-15T18:33:15+09:00

ご案内

参考リソース