Modernizr_html/css_WEB-ITnose を使用した HTML5+CSS3 の概要-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:44:01

オリジナル

1028 人が閲覧しました

現時点では従来のブラウザが完全に置き換えられるわけではないため、最新の 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; 　    }      };　} }

ログイン後にコピー