簡単にブラウザ別CSSを導入するJavaScript （CSS Browser Selector）
2007年4月12日(木) 10:30
特定のブラウザで表示したときにレイアウトが崩れたりする場合がある。CSS-Hack手法で回避する方法もあるが、万能ではない。また、OS＋ブラウザの組み合わせでスタイル指定を変えたい場合などはお手上げになる。
OS、ブラウザ別のスタイル指定を簡単にできるようにしてくれるJavaScriptライブラリがcss_browser_selector.js。非常にシンプルなJavaScriptだが、必要な事を簡単に実現してくれる。導入するとスタイルシート記述にOS別、ブラウザ別で記述する事が可能になる。
CSSは以下のように記述できるようになる
.ie .example {
background-color: yellow
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.opera .example {
background-color: green
}CSSを必要に応じて修正を加えたら、あとはJavaScriptファイルをヘッダなどで呼出すだけで良い。アクセスするブラウザに応じて<html にclass=""が追加される。非常にシンプルに作られているので動作も早い。既存のサイトに導入するのも可能なので、是非試してみてください。
関連する記事
- マウス操作で写真にズームするギャラリーswf（PostcardViewer）
- CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）
- 透明感のあるデザインをJavaScriptで実装する（glassbox.js）
- MP4、FLVなど再生するFlashプレーヤーswf （JW FLV MEDIA PLAYER）
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript（shadowbox）
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript （JSValidate）
- CSSデザインレイアウトをオンラインで簡単に作成する （YAML）
- ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）
- フォームボタンCSSデザインするテクニック （Rediscovering Button Element）
- 半透明の角まるツールチップを表示するJavaScript （CoolTips）
- JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）
- JavaScriptコード圧縮して盗用から守る （packer）
- iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）
- 画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）
- Ajaxでサクサク動くWebファイルマネージャ （Relay）
- アンカータグを利用してスムーススクロールを実装する （df Smooth Scroll）
- MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）
- HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）
- 使いやすいYUIライブラリのWYSIWYGエディタ （Rich Text Editor）
