［笔记12］JavaScript DOM编程艺术_HTML5

Modernizr

网址：https://modernizr.com/

Modernizr 是一个开源的JS库，利用它的富特性检测功能，可以对HTML5文档进行更好的控制。Modernize不会给你添加浏览器不支持的特性。Modernizr能做的是为你提供一些不同的CSS类名以及特性检测(feature-detection)属性。要想现在使用HTML5,Modernizr是必不可少的。

• 首先修改html的class属性。基于可用的HTML5特性添加额外的类名。要使用Modernizr编写文档，通常都要给html元素添加一个no-js类。

利用这个类，可以在浏览器不支持JS的情况下应用CSS样式。

.nojs selector{
 style properties
}

• 然后Modernizr会检测浏览器可能支持的各种特性，并相应地添加类名。
  实际情况是浏览器可能会支持部分特性，而不支持另一些特性。这时候，类名中就会间或出现feature和no-feature。
  根据这些类名，可以在CSS中定义相应的增强和退化版本，改善用户体验。如下所示：

.multiplebgs article p{
   /*为支持多背景浏览器编写的样式*/
}
.no-multiplebgs article p{
  /*为不支持多背景的浏览器编写的后备样式*/
}

类似地，Modernizr库也提供了JS特性检测对象，可以在DOM脚本中直接使用：如下

if(!Modernizr.inputtypes.date){
/*不支持本地数据，使用自定义的数据选择脚本*/
 createDatepicker(document.getElementById('birthday'));
}

Modernizr的例子参考链接如下：http://caibaojian.com/modernizr-js.html

视频

缺点：

• 也有混乱的时候，HTML5的video和audio元素标签很简单，有相应的属性用于显示播放控件或更改播发设置，但是它并未说明支持哪些视频格式。

在每个影片容器中，音频和视频轨道都使用不同的编解码器来编码。编解码器决定了浏览器在播放时应该如何解码音频和视频。编解码器的核心就是一个算法，用于压缩和存储视频，以减少原始文件的大小，可能会损失音频的品质。视频编解码器有很多：H.264、Theora和VP8。

自定义控件

浏览器在显示video元素时，会为其添加一些与浏览器样式统一的标准播放控件。要想自定义这些控件的外观或是添加新的控件，可以通过一些DOM属性来实现。
具体实现参考11章223页

表单

HTML5提供了新的输入控件类型：

• email，用于输入电子邮件地址
• url，用于输入URL
• date，用于输入日期和时间
• number，用于输入数值
• range，用于生成滑动条
• search，用于搜索框
• tel，用于输入电话号码
• color，用于选择颜色

增加了新的控件类型，相应的也就增加了新的属性。

我们关注的一个问题是，如果浏览器不支持新的类型和属性时怎么办呢？为了应对不兼容的浏览器，必须使用特性检测来准备另一个方案。

//某个输入类型的控件，可以使用inputtypes.type属性：
if(!Modernizr.inputtypes.date){
   //生成日期选择器的脚本
}
//要检查某个属性，则可以使用input.attribute属性
if(!Modernizr.input.placeholder){
   //生成占位符提示信息的脚本
}

要是没有Modernizer，可以使用inputSupportsType函数来检查。

function inputSupportsType(type) {
    if (!document.createElement) {return false;}
    var input=document.createElement('input');
    input.setAttribute('type',type);
    if(input.type=='text'&&type!='text'){
        return false;
    }else{
        return true;
    }
}
//使用的方式如下：
 if(!inputSupportsType('date')){
  //生成日期选择器的脚本
}

检查特定的属性，可以使用elementSupportsAttribute函数。

function elementSupportAttribute(elementName,attribute){
    if(!document.createElement)return false;
    var temp=document.createElement(elementName);
    return (attribute in test);
}
//使用的方式如下：
if(!elementSupportAttribute('input','placeholder')){
  //生成占位符提示信息的脚本
}

替代方案的主要问题是必须依赖于JS实现同样的功能，因此，还必须考虑到在JS不可用的情况下选择什么输入控件最合适。