[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS

複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量(2.3KB)スクリプトを紹介します。

サイトのキャプチャ

Head JS

[ad#ad-2]

下記に、Head JSでできることを簡単に説明します。
詳しい使い方は下記ページで解説されています。
Usage: Head JS

外部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

top of page

©2018 coliss