Modernizr – Mach3.laBlog

head要素に読み込むべき唯一のスクリプト「headjs」

mach3 — Thu, 10 Mar 2011 01:10:46 +0000

「Modernizr」や「html5.js」等、モダンな環境の為の便利なスクリプトは多々ありますが、
「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。

使い方

Head JS :: The only script in your HEAD

謳い文句はhead要素に読み込む唯一のスクリプト
ダウンロードして読み込むだけ。おしまい。

<script type="text/javascript" src="head.js">script>

その多彩な機能

環境の判別

CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を
Modernizrと同じ手法でHTML要素のクラスに出力してくれます。
こんな感じに…

"ja" id="test-page" class=" webkit root-section js  gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions fontface domloaded w-1100 lt-1280 lt-1440 lt-1680 lt-1920">

また、JavaScriptでheadオブジェクトを辿っても判別結果が得られます。

console.log( head.csstransitions ); // Transition対応のブラウザならtrue
console.log( head.browser.webkit ); // Webkitならtrue
console.dir( head ); // とりあえず全部覗いてみたらいいと思う

IEのHTML5対応の補助

html5shiv同様、IEでのHTML5の新要素の使用をサポートしてくれます。
（IEさんはHTML5の要素を置いても、そのままではスタイルをあててくれないので…）

html5shiv – Project Hosting on Google Code

スクリプトローダー

動的にJavaScriptファイルをロードする機能を備えています。
読み込むスクリプトファイルは復数指定でき、ロード完了時のコールバックも登録可能です。

head.js(
    "hoge.js",
    "fuga.js",
    "foo.js",
    "bar.js",
    function(){
        console.log( "All Script Loaded." );
    }
);

パフォーマンスに疑問が残るので多用は禁物ですが、便利ですね。
競合としてはrequire.jsとかでしょうか。

RequireJS

まとめ

一本読み込むだけでこれだけのことが出来る。
まさにheadjsの名に恥じない素晴らしいスクリプトだと思います。

BrowserDetect.jsと子孫セレクタによるシンプルなクロスブラウザCSS

mach3 — Thu, 16 Sep 2010 02:55:42 +0000

BrowserDetect.jsは、閲覧環境を判別する為のJSライブラリです。
今回はこれを使用して、Modernizrのような手法で
クロスブラウザCSSを書く実験を試みてみます。

BrowserDetect.js

JavaScript – Browser detect

ダウンロードリンクはどうやら無いようなので、
ページ内に書かれたソースをコピー&ペーストします。
使い方は簡単で、スクリプトをロードして
BrowserDetectオブジェクトのプロパティを参照するだけ。

var browser = BrowserDetect.browser; //ブラウザ名の取得
var version = BrowserDetect.version; //ブラウザバージョンの取得
var os = BrowserDetect.OS; // OS名の取得

クロスブラウザCSSを書く準備

もしModernizrを使用した事があればご想像の通りですが、
HTML要素にブラウザ名とバージョンを添えたクラス名を動的に追加してやります。

$("html").addClass( BrowserDetect.browser );
$("html").addClass( BrowserDetect.browser + BrowserDetect.version );

例えばIE6でアクセスすると、HTML要素には次のようにクラスが追加されます。

"ja" class="Explorer Explorer6">

CSSを書く

あとは子孫クラスタを使ってCSS内で条件分岐をしてやれば良いです。
ハック等に頼らないクリーンなCSSが出来上がりますね。

#Box{
    /* デフォルトのスタイル */
    width:290px;
    height:210px;
    border:5px solid #666;
    padding:10px;
}
.Explorer6 #Box{
    /* IE6用のスタイル */
    width:320px;
    height:240px;
}

この方法の問題点

JSが働かないとだめ

当たり前ですが、JavaScriptが動かない環境ではデザインが崩れる事が予想されます。
（Modernizr使ってる時点で今更何を言ってるのって感じですが…）

HTML4ではHTML要素のclass属性はInvalidである

class属性が使用出来る要素について、
HTML5では「The Every HTML Element」と言及している事から問題はなさそうですが、
どうやらHTML4ではInvalidになる様子。
これもまた、Modernizrも同様に孕んでいる問題点です。
（一体誰が気にするのか、とも思いますが）

以上の問題を踏まえて、
プロジェクトの趣旨/性格に基づいて使用を判断したいですね。

「Modernizr」モダンなクロスブラウザCSSの為の支援スクリプト

mach3 — Wed, 21 Jul 2010 22:54:00 +0000

HTML5/CSS3で新たに使える機能がブワッと増えたわけですが、
新機能に対応している環境というのはまだまだごくわずかです。
ということは、機能が使えるor使えない場合に処理を分けたりしなければいけないわけで。
「Modernizr」は、それを支援してくれるJavaScriptライブラリです。

Modernizr

「Modernizer」ではなく、「Modernizr」。
eが欠けている点に注意。Flickrみたいな感じ。

Modernizrがしてくれる事は、ただ一つの単純な処理です。
閲覧しているブラウザが、或る機能に対応しているかどうかをJavaScriptで判別し、
その結果をhtml要素のclassという形で教えてくれます。

例えば、box-shadowに対応しているかどうかを知りたい場合。
Modernizrを読み込んだ上でhtml要素を調べると、
「boxshadow」または「no-boxshadow」というクラスがhtml要素に付加されています。
あとは子孫セレクタ等を使えば…この先は予想がつくかと思います。

簡単な使い方

スクリプトをダウンロードして読み込みます。

<script type="text/javascript" src="modernizr.js">script>

例えば、boxhadowに対応している場合とそうでない場合のスタイルを書き分けます。

/* デフォルトのスタイル */
#box{
    width:220px;
    height:100px;
    padding:10px;
    background-color:#eee;
    border-right:2px solid #ccc;
    border-bottom:2px solid #999;
}
/* boxshadowが使える場合のスタイル */
.boxshadow #box{
    border:none;
    -moz-box-shadow:#666 1px 1px 3px;
    -webkit-box-shadow:#666 1px 1px 3px;
    box-shadow:#666 1px 1px 3px;
}

JavaScriptでの判別にも役立つ

JavaScriptで新要素の対応状況を調べるスクリプトは以前ご紹介しましたが、
cf) HTML5の新機能が使用可能かどうかを判別するJSコード一覧
Modernizrは一括して調べておいてくれるので、問い合わせればすぐに教えてくれます。

var bs = Modernizr.boxshadow;

boxShadowが使用可能であればtrueが格納されます。

CSSのプロパティに関わらずストレージ関係やSVG等々、
様々な要素に対応している模様です。
cf) Modernizr Documentation …これは便利！

非常にシンプルなライブラリですが、それだけに様々なシーンでの活用が期待できます。
HTML5への過渡期を戦うために、頼もしい戦力となるのではないでしょうか。