古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた(2日目)

JavaScript CSS

若干修正しました。

コンディショナルセレクタ搭載してみました。

  • あー、良く考えたらコンディショナルな仕組みは必要なのかも。
    • レンダリングエンジンでスタイルを適用したり/しなかったり、代替スタイルを用意するって仕組みはあってもいいのかもしれない
      • CSSハックは、ぐっちゃぐちゃなCSSになるのがアレだけど、バンドエイドとしては上手く機能しているもんね。
function autoexec() {
  var node = _query.tag("html")[0], cn = [node.className, "js"];
  _ie         && cn.push("ie ie" + _uaver);
  _mm.opera   && cn.push("opera opera" + _uaver);
  _mm.gecko   && cn.push("gecko");
  _mm.firefox && cn.push("fx fx" + _uaver);
  _mm.webkit  && cn.push("webkit");
  _mm.safari  && cn.push("safari safari" + _uaver);
  _mm.chrome  && cn.push("chrome chrome" + _uaver);
  _mm.iphone  && cn.push("iphone");
  _mm.slver   && cn.push("sl sl" + _mm.slver);
  _mm.flashver&& cn.push("flash flash" + _mm.flashver);
  node.className += cn.join(" ").replace(TRIM, "").replace(/\./g, "");
}

コンディショナルセレクタは、document.body.className に【どんなブラウザか】【jsが使えるか】【Silverlightが使えるか】【Flashが使えるか】といった情報を設定します。

これで何がうれしいかというと、

<style>
html div { color: green }
html.ie6 div { color: red }
</style>

としておくと、IE6 なら赤くなり、それ以外の環境では緑になります。
html は省略可能なので、以下のようにしても同じ結果になります。

<style>
div { color: green }
.ie6 div { color: red }
</style>

識別子の一覧

利用可能な識別子の一覧です。

class 条件
ie IE なら
ie6 IE6 なら
ie7 IE7 なら
ie8 IE8 なら
chrome Google Chrome なら
chrome1 Google Chrome1 なら
chrome2 Google Chrome2 なら
chrome3 Google Chrome3 なら
gecko Gecko 搭載ブラウザなら
fx Firefox なら
fx2 Firefox2.0 なら
fx3 Firefox3.0 なら
fx35 Firefox3.5 なら
webkit WebKit 搭載ブラウザなら(Safari, iPhone, iPod, Google Chrome等を含む)
safari Safari 系ブラウザなら(Google Chromeは含まない)
safari3 Safari3 なら
safari32 Safari3.2 なら
safari4 Safari4 なら
opera Opera なら
opera92 Opera9.20〜9.29 なら
opera95 Opera9.50〜9.59 なら
opera96 Opera9.60〜9.69 なら
opera10 Opera10.00〜10.09 なら
iphone iPhone または iPod なら
js JavaScript が利用可能なら
sl Silverlight がインストールされているなら
sl1 Sliverlight1 がインストールされているなら
sl2 Sliverlight2 がインストールされているなら
sl3 Sliverlight3 がインストールされているなら
flash Flash の ver 7.0 以上がインストールされているなら
flash7 Flash7 がインストールされているなら
flash8 Flash8 がインストールされているなら
flash9 Flash9 がインストールされているなら
flash10 Flash10 がインストールされているなら


ブラウザ名 + バージョン番号は自動生成なので、上記以外のバージョンのものについても使用できます。
# Safari2 をサポートしたければ "safari2" が使える

具体的にはこうなります。

各ブラウザで実行すると、document.body.className が以下のように設定されます。

IE6 js ie ie6 sl sl3 flash flash10
IE8 js ie ie8 sl sl3 flash flash10
Opera9.27 js opera opera92 sl sl3 flash flash10
Opera10.00β js opera opera10 sl sl3 flash flash10
Google Chrome3β js webkit chrome chrome3 sl sl3 flash flash10
Safari4 js webkit safari safari4 sl sl3 flash flash10
iPhone OS 3.0 js webkit safari safari4 iphone

反省会

  • コンディショナルセレクタを実装したあとに、「既にありそうだ…」と、ぐぐってみたらやはりありました。http://youmos.com/news/css_browser_selector
    • ほぼ同じことを2年前にやってる人がいたってことは、誰でも思いつくレベルのアイデアってことですね。
  • コンディショナルセレクタのほかに、バグを2つほど修正してます。