UserAgentでCSSを切り替える - tetsunosukeのnotebook

mixiのコミュニティで話題になっていた話。一般的にはJavaScriptを利用して切り替えるらしい。とりあえず「JavaScript CSS ブラウザ」で検索すると以下がひっかかった。

navigator.useragentプロパティで判定を行うのだ。 http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_085.html

しかしこれ、実はnoscript要素はhead内に書けない。

そこで考えてみたのだが、サーバサイドでプログラムを仕込むことで、CSSを出力させればよいのではないか？と思った。

ためしにPHPで書いてみるとこんな感じになる。

<?php
  // cssのためのヘッダー出力
  header("Content-type:text/css");
  // 環境変数HTTP_USER_AGENTを使う
  $ua = $HTTP_SERVER_VARS['HTTP_USER_AGENT'];
  // IEかどうかを判定
  if( preg_match("/IE/", $ua)){
    // IE用のCSSファイルを読み込んで内容を出力
    $cssSpec = file_get_contents("ie.css");
  } else {
    // その他の場合
    $cssSpec = file_get_contents("others.css");
  }
  print $cssSpec;
?>

利用する側はもちろん

<link rel="stylesheet" href="xxxx.php">

とすればよい。

例えばGETのパラメータでxxxx.php?file=hogeとかやっておいて、hoge_ie.cssとhoge_others.cssと分岐するようにしたり、ie用とそれ以外、またその共通部分を読み込んで出力するように工夫する手もあるだろう。