もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。
CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。
詳しくは以下
設定方法はJavaScriptを一つ読み込むだけになります。
<script src="cssua.min.js" type="text/javascript"></script>
このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。
例えばですが、IE6でアクセスした場合には
ua-ie-6というclass名が追加されるようになります。
<html class="ua-ie-6"> <head>…</head> <body>…</body> </html>
iPhoneの場合はua-mobile-iphoneというclassが追加されます。
<html class="ua-mobile-iphone">…<html>
ブラウザ毎に異なるclassが追加されるので、CSSを作る際にブラウザ名を指定しておけば、
該当するブラウザでアクセスした場合にのみ適用されるようになります。
以下はPNG画像の処理をIE6以下と、それ以外で分ける場合のコードです。
/* 通常のCSS */
.logo-area
{
background-image: url(logo.png);
background-repeat: no-repeat;
background-position: left top;
}
/* IE 5.0, 5.5, 6.0の場合 */
.ua-ie-5 .logo-area,
.ua-ie-6 .logo-area
{
background-image: url(logo.gif);
}
ブラウザ毎の差を簡単に設定できますね。
興味のある方は以下のリンクからダウンロードしてみてください。
最新情報をお届けします
- Website: http://cssuseragent.org/
