HTML5+CSS3使用Modernizr介绍

当前位置 : 首页 > 网页制作 > html5 > HTML5+CSS3使用Modernizr介绍

HTML5+CSS3使用Modernizr介绍

来源: 作者: 时间:2016-01-30 08:53
传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或

传统目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生,作为一个开源的 Script 库,Modernizr 检测浏览器对 3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能,而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。

 

一.使用Modernizr前提条件:
1.添加引用:<script src=modernizr-latest.js type=text/javascript > </script>
2.向

元素添加“no-js”的类

二.使用Modernizr检测浏览器是否支持CSS3:
添加div代码:


测试CSS3样式
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属性则调用下面的样式

 

三.使用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; 
     } 
     };
 } 
}

 

Tag:

相关文章

网友评论

<