CSSハックを使わずに、ブラウザごとにCSS表示を切り替えができるJSライブラリ「CssUserAgent」

サイトをコーディングするうえで、時間のかかる作業のひとつが、ブラウザごとの表示の違いへの対応。 CSSハックを使って対応することが多いですが、ハックの使用は極力避けたいもの。そんな時に役立ちそうなのが、ちょっと便利なライブラリ「CssUserAgent」。 CSSを作成する際、classの作り方にひと手間加えることで、ハックを使わずに、ブラウザごとにCSSを切り替えることができるようになる優れものです。

使い方は、以下を参照。

まず、http://cssuseragent.org/ より、「cssua.js」（もしくは「cssua.min.js」）をダウンロードし、 htmlに読み込みます。

<script type="text/javascript" src="cssua.js"></script>

このライブラリは、UserAgentを判別し、htmlタグに対してUserAgentごとに個別のclassを動的に付与してくれるので、例えば、IE6でアクセスした場合は、以下のようになります。

<html class="ua-ie-6">
  <head>……</head>
  <body>……</body>
</html>

「.logo-areaの背景にpngを使用し、IE5とIE6のみ、pngをgifに切り替えて表示する」ということを実現したい場合、CSSファイルは以下のような記述になります。（参照：CssUserAgentデモページ）

/* CssUserAgent lets you target specific browsers without CSS hacks */
.logo-area {
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-position: left top;
}

/* target IE 5.0, 5.5, 6.0 */
.ua-ie-5 .logo-area,
.ua-ie-6 .logo-area {
    /* IE versions < 7.0 don't fully support transparent 24-bit PNGs */
    background-image: url(logo.gif);

ブラウザごとに個別のスタイルを指定するという点はCSSハックと同じですが、これはブラウザのバグを利用しているわけではないので、 CSSの記述が非常にクリーンなものになります。

「CssUserAgentデモページ」では、現在ページを閲覧しているブラウザ（IETester等含む）には、どのようなclass名が付与されるのか確認できるようになっていますので、それを参考にclass名を付けていけば、意図したとおりにCSSを切り替えることができます。

日本国内での使用率が11％程度になったと言われてはいるものの、まだまだ生き残っているIE6。もっとも手間取るIE6固有のバグに対しても、CSSハックを使わずに対応できるので、今後、活用できるのではないかと思います。

【参考サイト】