[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS
Post on:2010年12月2日
sponsors
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。
[ad#ad-2]
下記に、Head JSでできることを簡単に説明します。
詳しい使い方は下記ページで解説されています。
Usage: Head JS
- 外部JSファイルの読み込み
- JavaScriptの管理
- CSSのサポートが異なるブラウザへの対応
- HTML5非対応ブラウザへの対応
- スクリーンサイズに合わせた表示
- Dynamic CSS
- CSSを特定のページのみに
- CSSをブラウザごとに指定
外部JSファイルの読み込み
通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。
そのブロッキング解消し複数のファイルを並列にロードさせて、且つ順に実行させます。
JavaScript
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done
});
JavaScriptの管理
外部ファイルを</body>（ページの下部）に配置した際に、スクリプトの実行のタイミングを「head.ready()」で管理できます。
JavaScript
// use jQuery on the body of the page even though it is not included yet
head.ready(function() {
$("#my").jquery_plugin();
});
// load jQuery on bottom of the page
head.js("/path/to/jquery.js");
CSSのサポートが異なるブラウザへの対応
CSS3など各ブラウザごとに異なるCSSのサポートに対応するため、使用するプロパティが非対応のブラウザには接頭辞「no-」を自動でつけます。
CSS
.borderimage .box {
/* style for browsers that support border images */
}
.no-borderimage .box {
/* style for browsers that does not support border images */
}
対応プロパティ
- borderimage
- borderradius
- boxshadow
- multiplebgs
- opacity
- reflections
- rgba
- textshadow
- transforms
- transitions
[ad#ad-2]
HTML5非対応ブラウザへの対応
HTML5非対応のブラウザでも表示可能にします。
HTML
<style>
article { text-shadow:0 0 1px #ccc; }
</style>
<!-- works in IE too -->
<article>
<header></header>
<section></section>
<footer></footer>
</html>
スクリーンサイズに合わせた表示
スクリーンサイズを自動で取得しているため、スクリーンサイズに合わせてスタイルシートで表示を変更することができます。ブラウザのサイズを変更した際にも対応しています。
CSS
/* screen size less than 1024 pixels */
.lt-1024 #hero { background-image:(medium.jpg); }
/* fine tune for mobile phone */
.lt-640 #hero { background-image:(small.jpg); }
対応スクリーンサイズ
- 320
- 480
- 640
- 768
- 800
- 1024
- 1280
- 1440
- 1680
- 1920
主要デバイスのモニターサイズ
- iPhone3: 480 x 320
- iPhone4: 960 x 640
- iPad: 1024 x 768
Dynamic CSS
CSSをダイナミックに生成することができます。
「head.feature()」でスタイルシートを呼び出します。
HTML
<script>
/* test if user is logged in by cheking out an existence of a cookie */
head.feature("logged", get_cookie("auth_token"));
</script>
<style>
/* .. and write CSS accordingly */
.logged #login-box { display: none; }
</style>
CSSを特定のページのみに
CSSのターゲットを特定のパスとページのみにします。
CSS
/* CSS targeted for home page only */
.root-section #index-page
/* make sidebar visible under /plugins */
.plugins-section #sidebar { display: block; }
CSSをブラウザごとに指定
ブラウザとそのバージョンを自動検出しclassを割り当てているため、スタイルシートでブラウザごとの指定が簡単にできます。
CSS
/* older than IE9 */
.lt-ie9 .box { padding: 10px; }
/* CSS fixes for IE6 */
.ie6 ul { list-style: none; }
ブラウザごとのclass名
- Internet Explorer
- ie
- Chrome, Safari（Webkit系のブラウザ）
- webkit
- Firefox（Mozilla系のブラウザ）
- mozilla
- Opera
- opera
バージョンで未満（less than）を使用する場合は「lt-」をつけます。
sponsors
