Ajax,Javascript、様々な効果を発揮するスクリプトサンプル設置方法
CSS切り替え
css browser selector.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script src="css_browser_selector.js" type="text/javascript"></script> <noscript> <link rel="stylesheet" href="common.css" type="text/css"/> </noscript> <link rel="stylesheet" href="common2.css" type="text/css"/> </head> <body> <div> </div> </body> </html>
各ブラウザに対応した、CSSセレクタを実装するjavascript。
簡単に言えば、CSSハックのJavascript版。
ブラウザを判別して適用する外部CSSファイルを変更する、といったスクリプトとは異なり、「.クラス名」などのセレクタ名で各ブラウザに対応させたCSSの記述を行うことが出来るようになります。
使用方法はとても簡単で、スクリプトを読み込ませさえすれば、後はCSSファイルの記述でブラウザに対応させることが出来ます。
またOSを判別して、例えば「macのfirefox2」の様な指定でCSSを適用させることも可能です。
（サンプルではOS関係ナシに、開いているブラウザのロゴが背景で表示されるようにしています。）
まずサイトへ行きcss_browser_selectorをダウンロードします。
チュートリアルは、http://rafael.adm.br/css_browser_selector/で見ることが出来ます。
それを解凍し、できたフォルダを見るとrafaelp-css_browser_selectorというフォルダの中に、css_browser_selector.jsというファイルがあります。
これが、メインのスクリプトですので、こいつをアップロードしたら、適用させたいHTMLファイルのヘッダーに読み込ませます。
<script src="css_browser_selector.js" type="text/javascript"></script>
これで準備完了です。
CSSセレクタの記述によって、各ブラウザに対応させるスタイルを決定します。
.ie6 body{background-color:#FFF}
.ie7 body{background-color:#CCC}
例えばこのように記述することで、IE6では背景白。
IE7だと背景はグレーとなります。
.ブラウザの省略名 セレクタ{CSSのプロパティ}
上記が基本的な記述形式です。
OSごとに分けたい場合は、
.OSの省略名.ブラウザの省略名 セレクタ{CSSのプロパティ}
となります。
.mac.ff3 body{background-color:#000}
このように記述しますが、OSとブラウザ省略名の間にスペースを入れないように注意します。
以下は対応しているOSとブラウザの省略名です。
対応OS
対応ブラウザ
ブラウザごとにCSSを修正したいと思う箇所って、１箇所、２箇所とかポイントであることが多いので、このスクリプトはとても使いやすいと思います。
CSSハックも完璧とは言えないので、とても重宝しそうなスクリプトです。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
