サイト制作の際、ブラウザごとのCSS解釈の違いで、やむを得ずCSSハックを使用することはよくあることですが、Webサイトを構築する際、出来る限りCSSハックを使用することは避けたいもの。
そんなCSSハックの使用を避ける為に作られた「CssUserAgent (cssua.js)」が今後活用できそうだったのでご紹介。
CssUserAgent (cssua.js)
使い方はいたって簡単。
サイト上からダウンロードすることができる「cssua.js」（もしくは「cssua.min.js」）を制作するHTMLファイルから読み込むだけ。
このJSファイルを読み込むことで、＜html＞タグに閲覧環境（UserAgent）ごとに別々のCLASSが自動で追加される仕様になっています。
例えば現在の私の環境「Firefox3.6.13」で見た場合、＜html＞タグには以下のCLASSが自動で付与されます。
◆HTML <html class="ua-gecko ua-gecko-1 ua-gecko-1-9 ua-gecko-1-9-2 ua-gecko-1-9-2-13 ua-firefox ua-firefox-3 ua-firefox-3-6 ua-firefox-3-6-13">
FirefoxのバージョンごとのCLASSに加えて、geckoエンジンのバージョンごとにもCLASSが付与されています。
ちなみに同じページを「IE8」で見た場合は以下のようなCLASSが付与されます。
◆HTML <html class="ua-trident ua-trident-4 ua-trident-4-0 ua-ie ua-ie-8 ua-ie-8-0">
このCLASS制御によって、ハック同様にブラウザごとに別々の指定を加えることが可能になります。
CSS指定方法のサンプルは以下の様な記述になります。
（「cssua.js」ライブラリDEMOページのチュートリアルから参照。）
◆CSS
/* 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);
}
通常ブラウザでは「.logo-area」に対して、背景画像にPNGファイルを使用していますが、IE5とIE6ではGIF画像に切り替えています。
デモページでは上記チュートリアルの他に、実際の閲覧している環境で、どのCLASSが付与されるか確認ができるようになっています。
「Apple Webkit」が用意されているので、WindowsとMacでSafariの切り替えは可能になりそうですが
Firefox「mozilla」ではWindowsとMacでの判別はできなそうなのが残念。。。
ですが、今後のCSS構築の際に何かと活用できそうです。