サイト制作の際、ブラウザごとのCSS解釈の違いで、
やむを得ずCSSハックを使用することはよくあることですが、
Webサイトを構築する際、出来る限りCSSハックを使用することは避けたいもの。

そんなCSSハックの使用を避ける為に作られた「CssUserAgent (cssua.js)」が
今後活用できそうだったのでご紹介。

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が付与されるか確認ができるようになっています。

CssUserAgent (cssua.js) Demo

「Apple Webkit」が用意されているので、WindowsとMacでSafariの切り替えは可能になりそうですが
Firefox「mozilla」ではWindowsとMacでの判別はできなそうなのが残念。。。

ですが、今後のCSS構築の際に何かと活用できそうです。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

ハック不要でブラウザ(UserAgent)ごとにCSSを切り替えることが可能になる「CssUserAgent (cssua.js)」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR