Modernizr学習ノート

1.General
1.1 Modernizrとは?
Modernizrは、ブラウザでの実装が統一されていないHTML 5やCSS 3などの次世代Webテクノロジーのローカル実装を検出するJavaScriptクラスライブラリです.Modernizrは、ブラウザが何らかの特性を実装しているかどうかを示します.
UAを利用して検出するのとは異なり、UA検出は信頼できません.UAはブラウザメーカーが独自に定義しているため、特性と一つ一つ対応することはできません.プロパティ検出は相対的に信頼性があり、ブラウザがこのプロパティを実装した場合は自然に良いです.そうしないと、ダウングレード処理を行います.Modernizrは、この特性の検出を容易にし、次の機能をサポートします.
1)40種類以上の特性を検出できる
2)Modernizrというオブジェクトには,ある特性がサポートされているかどうかを反応させるブール値が含まれている.
3)htmlに追加されたスタイルは、ある特性がサポートされているかどうかを直感的に表すことができます.
4)リソース・ローダを提供するため、ダウングレード処理されたリソース・ファイルをロードできます.
1.2 Modernizrのインストール
IE 8以前のバージョンのHTML 5実装を考慮する場合は、Modernizrの導入をbodyラベルの前に置くことをお勧めします.
1.3 PolyfillsとModernizr
Modernizrの目的は開発を統一することであり、ブラウザがこの特性をサポートしない場合でも、標準的なAPI、例えばJSON特性に対するjsonを使用することができる.js.json.jsはpolyfill(代替品)です.
良いニュースは、今では様々なHTML 5の特性の代替品があります。
1.4 Modernizr.load()
Modernizr.loadはjsとcssをロードできるリソースローダです.文法は分かりやすいです.
 
 

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

 
この例では、デバイスがgeolocationをサポートしているかどうかを実行することによって、異なるjsファイルをロードします.
Modernizr.loadはパフォーマンスに影響しません.
次の例は、より多くの特性を検出し、より多くのファイルをロードし、できるだけ多くの代替品を1つのファイルに圧縮することで、ダウンロード時間を節約できます.
 
 

// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
  // Presentational polyfills
  {
    // Logical list of things we would normally need
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load loads css and javascript by default
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // Functional polyfills
  {
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // You can also give arrays of resources to load.
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Run this after everything in this group has downloaded
      // and executed, as well everything in all previous groups
      myApp.init();
    }
  },
  // Run your analytics after you've already kicked off all the rest
  // of your app.
  'post-analytics.js'
]);

 
 
Modernizrでload私たちは多くのことをすることができて、単独でyepnope.jsで説明します.
1.5 Modernizrの動作原理
ほとんどの実装原理は同じです.まず要素を作成し、特殊なスタイルを設定してから要素を取得し、最後にブラウザがその属性を理解できるかどうかによって特性をサポートするかどうかを決定します.
1.6 IEのHTML 5要素
IEでは、HTML 5の要素、例えばsection、header、footerを使用することができ、Modernizrは、追加のスタイルによって表示される動作を制御する.詳細については、HTML5 Boilerplate CSSを参照してください.
1.7サポートされているブラウザ
IE 6+,Firefox 3をサポートする.5+,Opera9.6+,Chrome,Safari 2+,携帯電話でサポート,iosのsafari,AndroidのWebkitカーネルのブラウザ,Opera Mobile,Firefox Mobile.
2.Modernizrの特性検出
2.1 CSS検出http://modernizr.com/docs/#features-css
2.2 HTML 5検出http://modernizr.com/docs/#features-html5
3.Modernizr Methods
Modernizr.prefixed(str);//Css接頭辞を検出します.たとえば、Modernizr.prefixed('boxSizing');MozBoxSizingが返されます.パラメータの形式は、コネクタ付きの形式ではなく、アルパカの命名法でなければなりません.
コネクタ付きの結果を得るには、次のコードで変換します.
 

str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

各ブラウザに一致するには、次のようにします.
 
 

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

 
検出Dom接頭辞:Modernizr.prefixed(str,obj[,scope]);例:Modernizr.prefixed('requestAnimationFrame',window);//fn
名前だけ欲しいならModernizr.prefixed(str,window,false);//webkitRequestAnimationFrame
 
mq() media query testing
Modernizr.mq(str);
1.media queryがサポートされていない場合はfalseを返します.
2.Modernizr.mq('only all and(max-width:400 px)')では、できるだけ特殊なmedia typeを指定します
3.max-widthとorientation queryは現在の状態によって再測定されますが、これは少し待ってから変わるかもしれません.
4.Modernizr.mq('(min-width:0 px)')は、min-widthがサポートされているかどうかを検出することができる.
4.拡張http://modernizr.com/docs/#s3
4.1 addTest plugin
4.2 testStyles()
4.3 testProp()
4.4 testAllProps()
4.5 hasEvent()
4.6_prefixes&_domPrefixes