CSSを用いたUA分岐方法

ここでは、それぞれのUAのバグを用いたUA分岐方法を提案します。ですが、多くのUAへの対応を考えると、CGIなどで分岐したほうが良いでしょう。

導入方法のバグを用いたUAの分岐方法

方法	N6.x N7.0 Win	N4.7 Win	e6.0 Win	e5.5 e5.0 Win	e4.0 Win	e3.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
LINK要素	○	○	○	○	○	△	○	○	○	○
LINK要素 + media=all	○	×	○	○	○	○	○	○	○	○
LINK要素 + media=hoge	×	×	×	×	×	×	○	○	×	×
@import	○	×	○	○	○	×	○	○	○	○
途中の@import	×	×	×	○	○	×	×	×	×	×
@import ''	○	×	○	○	×	×	×	×	○	○
@import url('')	○	×	○	○	○	×	×	×	○	○
@import ""	○	×	○	○	×	×	○	○	○	○
@import url("")	○	×	○	○	○	×	○	×	○	○
@import url()	○	×	○	○	○	×	○	○	○	○
@import + mediatype	○	×	×	×	×	×	△	△	○	△
@import "" + mediatype	○	×	×	×	×	×	×	×	○	○
@import '' + mediatype	○	×	×	×	×	×	×	×	×	○
@import url() + mediatype	○	×	×	×	×	×	○	○	○	△

セレクタのバグを用いたUAの分岐方法

クラスセレクタ
方法	N6.x N7.0 Win	N4.7 Win	e6.0 Win	e5.5 e5.0 Win	e4.0 Win	e3.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
全称セレクタ	○	×	○	○	○	△	○	○	○	○
子供セレクタ・隣接セレクタ	○	×	×	×	×	×	○	×	○	○
属性セレクタ	○	×	×	×	×	×	×	×	○	○
大文字小文字の区別	○	×	○	×	×	×	○	×	×	×
複数のクラス	○	×	○	○	×	×	○	×	○	○
"_"を含むクラス	○	○	○	○	×	×	○	○	○	○
"-"を含むクラス	○	○	○	○	○	×	○	○	○	○
一意セレクタ
大文字小文字の区別	○	×	○	×	×	×	×	×	×	○
"_"を含むID	○	○	○	○	×	×	○	○	○	△
"-"を含むID	○	○	○	○	○	×	○	○	○	○

その他の方法を用いたUA分岐方法

以下、その他の方法を用いたUAの分岐方法を提案しているサイトへのリンクをまとめておきます。

くどいようですが、このような手法は本来的にはチープです。しかし、UAが自分の名前を偽ることは容易であり、どのUAもきちんとCSSを実装しておらず、また基本スタイルに大きな差がある為に、このような手法に頼らざるを得ない時もあるでしょう。その時点において、始めて手を出すようにしてください。ですが、それでも当方は"とても有用な手法"であるという認識をしております。

この手のトリックが好きな場合は、それを否定し、利用を拒むものではありません。

関連記事

"通"御用達、CSSハック