Modernizr_html/css_WEB-ITnose を使用した HTML5+CSS3 の概要

現時点では従来のブラウザが完全に置き換えられるわけではないため、最新の CSS3 または HTML5 機能を Web サイトに埋め込むことが困難になります。 Modernizr は、オープン ソースの JavaScript ライブラリとして、ブラウザによる CSS3 または HTML5 関数のサポートを検出するために登場しました。 Modernizr では、古いブラウザーがサポートしていない機能を追加するのではなく、オプションのスタイル構成を作成してページ デザインを変更できます。 また、カスタマイズされたスクリプトをロードして、古いブラウザがサポートしていない機能をシミュレートすることもできます。

Modernizr のダウンロード アドレス: http://modernizr.com/download/

1. Modernizr を使用するための前提条件:
1. 参照の追加:
2. "no-js" クラスを 要素に追加します

2. Modernizr を使用して検出しますブラウザー CSS3 をサポートするかどうか:
div コードを追加:

<div class="boxshadow"><div id="MyContainer" style=" width:150px;">测试CSS3样式</div></div>

css スタイル:

.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;} 

.no-boxshadow #MyContainer { border: 2px solid black;}

ブラウザーが box-shadow 属性をサポートしていない場合は、次のスタイルを呼び出します

3. Modernizr を使用して HTML5 の必須フォームフィールドを確認します
div コードを追加:
search:

JS コード:

window.onload = function() {   // 获取表单input标签元素　　  var form = document.forms[0], inputs = form.elements; 　　  if (!Modernizr.input.autofocus) {      //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 　　　　      inputs[0].focus();    }　    if (!Modernizr.input.required) { 　　　form.onsubmit = function() { 　　　var required = [], att, val;　　  // loop through input elements looking for required  　　　　　　　　      for (var i = 0; i < inputs.length; i++) {　　　　att = inputs[i].getAttribute('required'); 　　　　　　　　　　        // if required, get the value and trim whitespace  　　　　　　　　　　　　        if (att != null) { 　　　　　val = inputs[i].value;           // if the value is empty, add to required array  　　　　　　　　　　　　　　　　          if (val.replace(/^\s+|\s+$/g, '') == '') { 　　　　　　　required.push(inputs[i].name);　　　　  } 　　  　}　    }       // show alert if required array contains any elements  　　　　       if (required.length > 0) { 　　　  alert('以下字段是必须的: ' + required.join(', ')); 　　　　// prevent the form from being submitted  　　　　　　        return false; 　    }      };　} }