［笔记12］JavaScript DOM编程艺术_HTML5
2017-02-21 本文已影响29人
fumier
Modernizr
Modernizr 是一个开源的JS库，利用它的富特性检测功能，可以对HTML5文档进行更好的控制。Modernize不会给你添加浏览器不支持的特性。Modernizr能做的是为你提供一些不同的CSS类名以及特性检测(feature-detection)属性。要想现在使用HTML5,Modernizr是必不可少的。
- 首先修改html的class属性。基于可用的HTML5特性添加额外的类名。要使用Modernizr编写文档，通常都要给html元素添加一个no-js类。
<html class="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不可用的情况下选择什么输入控件最合适。
