CSS-Filter

Friday, Apr 22, 2005 - 01:21 +09:00

１つのCSSファイルで全ての環境に対応できるのが理想なのだけど、場合によっては個別のCSSファイルを用意してやったほうが便利な時もある。そんな時のための識別と振り分けの方法です。

バージョン４世代にCSSを適用させない

Webサイトを制作する際、古いバージョンのブラウザへの対処が悩みの種となります。特にCSSではNetscape4.xのように、サポートが不十分だったり間違った解釈をしていたりして、予測のつかない挙動を示してしまうことが良くあります。

WebサイトがXHTMLによって正しくマークアップされているなら、古いブラウザに対しては、思い切ってCSSそのものを読み込ませない手法も有力です。この手法の利点は３つ。

少なくとも「読めないことはない」
最低限の論理的な文章構造は保たれる
新しいブラウザでより美しく見えるということを示せれば、ブラウザの乗り換えを勧めることができる

とはいえ、会社の都合で乗り換えることができないということが殆んどなので、バージョン４世代でも表示が確保できることが理想である、ということは知っておきましょう。

Netscape4.x以前にCSSを読み込ませない

<link href="import.css" rel="stylesheet" type="text/css" media="screen,print">

HTML/XHTMLの<link>要素に「media="screen"」以外の値を記述すると、Netscape4.x以前ではCSSファイルは読み込まれません。つまり、media属性の値として「screen」以外の値を入力する（例：medis="all"）か、上記の例のように複数指定してやれば良い。

ただし、「print」を指定すると印刷時に影響を与えることがあるし、Operaブラウザではフルスクリーン表示が「projection」扱いとなっているので、注意が必要です。Sig.としては、「media="all"」と指定することを勧めておきます。

IE4（Win/Mac）以前にCSSを適用しない

@import "base.css";

CSSでファイルのURLを指定する方法は幾つかありますが、IE4は「url( )」形式にしか対応していません。したがって、上の例のように引用符で文字列を囲う形式で指定すれば、IE4以前でCSSは適用されません。

1つだけ注意点。Netscape4の初期のバージョンでは、「@import」が実行されると強制終了したりフリーズしたり、あまり宜しくないアクシデントが生じます。よってNetscape4とIE4ともにフィルタを掛けるには、まずHTML側でNetscape4を弾き、外部CSSで「@import」を指定してIE4以前を弾く、という2段構えで挑むことが原則です。

Mac版のIE4.5にCSSを適用しないようにする

@import url("base.css");

Sig.はMac環境を保有していませんが、CSSの「url( )」形式でURLを指定するときにURL部分を二重引用符で囲うと、Mac版IEではCSSが適用されなくなるようです。ただし、この手法だとIE4（Win）にCSSが読み込まれてしまいますので、注意。

IE5.0/5.5にだけ外部CSSを読み込ませる

IE5.xは特徴的なバグを多く含みますが、そのシェアは大きく、まだまだ無視できる存在ではありません。IE5.ｘへの対処は「voice-family」を使ったHackでも解決できますが、個別のスタイルシートを用意することもできますので、選択肢として数えておきましょう。

IE5.0(Win）にだけCSSを読み込ませる

@media tty {
	i{content:"\";/*" "*/}}; @import 'ie50win.css'; {;}/*";}
}/* */

まず「@import」とURLの文字列指定によってバージョン４世代を排し、それ以外のブラウザにはttyメディア（携帯電話など、固定ピッチフォントで表示される端末）専用のスタイルとして、<i>要素に「content」プロパティが指定されているように解釈させます。

「@import」に先立つ「;」によってIE5.0（@importを認識）/5.5（@importを無視）の振り分けを行っています。

参考： http://tantek.com/CSS/Examples/ie50winbandpass.html

IE5.5(Win）にだけCSSを読み込ませる

@media tty {
	i{content:"\";/*" "*/}}@m; @import 'ie55win.css'; /*";}
}/* */

こちらの場合だと、構文解析バグによってIE5.0は「@import」を読み込めなくなっています。先の例（IE5.0用）とともに「Band Pass Filter」と呼ばれています。

参考： http://tantek.com/CSS/Examples/ie55winbandpass.html

IE5.0（Win）とIE5.5(Win)にだけCSSを読み込ませる

@media tty {
	i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

「Band Pass Filter」に改良を与えた「Mid Pass Filter」と呼ばれる手法です。「Band Pass Filter」と共通の「"\";/*" "*/」という不可解な文字列は、実のところ何の意味もなく... ただCSSのエスケープシーケンスを利用した振り分けとして使われています。

「\」を使ったエスケープ処理に対応していないIE5.xは、「"\"」という値を指定したところで処理が終わったと解釈し、それ以外のブラウザでは「"\";/*"」という値だと判断します。「content」プロパティは半角スペースで区切って羅列することが可能なので、エスケープシーケンスを正しく解釈するブラウザでは後に続く二重引用符で囲まれた部分（@importを含む）を「content」プロパティのもう1つの値として処理するわけです。

参考： http://tantek.com/CSS/Examples/midpass.html

IE5.ｘ（Mac）にだけCSSを読み込ませる

/*\*//*/
	@import "ie5mac.css";
/**/

IE5.ｘ（Mac)の「Band Pass Filter」。「\」を使った「Backslash Hack」を利用して、「@import」をIE5.x（Mac）だけに読み込ませています。つまりIE5.x（Mac）だと「\」から「*/」までがコメントとして扱われ、「@import」が読み込まれる。他のブラウザでは「\」の後の「/*」から最後の「*/」までがコメント扱いなので「@import」は読み込まれないわけです。

参考： http://www.stopdesign.com/examples/ie5mac-bpf/

posted in HTML/CSS Trackback (0)

Trackback

このエントリーのトラックバックURL: http://rospear.info/other/mt-tb.cgi/15

« Previous Entry - Next Entry »

Ragnarok Online Spear Special