4种检测是否支持HTML5的方法，你知道几个？

[Howardch]

4种检测是否支持HTML5的方法，你知道几个？

1，检查特定的属性是否存在于全局的对象里面，比如说window或navigator.
比如geolocation，它是HTML5新加支持的新特性；它是由HTML5工作组以外的Geolocation工作组制定的。要检查浏览器是否支持它可以用一下方法。
function supports_geolocation() {
return !!navigator.geolocation;
}

2，创建一个元素，检查特定的属性是否存在。如检查是否支持Canvas.
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}

3，创建一个元素，看特定的方法是否存在于这个元素上。调用这个方法看是否有返回值。比如说检查video是否支持某种格式。
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

4，创建一个元素，为它的属性设置一个特定的值，看是否这个属性值被保留。
我们很熟悉Web表单控件，在HTML5里面又增加了一打这类控件。
<input type="search"> for search boxes
<input type="number"> for spinboxes
<input type="range"> for sliders
<input type="color"> for color pickers
<input type="tel"> for telephone numbers
<input type="url"> for web addresses
<input type="email"> for email addresses
<input type="date"> for calendar date pickers
<input type="month"> for months
<input type="week"> for weeks
<input type="time"> for timestamps
<input type="datetime"> for precise, absolute date+time stamps
<input type="datetime-local"> for local dates and times

为检测这些控件是否支持，我们可以用一下方法。
var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text"; //当浏览器不支持这个输入类型，将返回"text"。

最后介绍一个开源JS类库：Modernizr(http://www.modernizr.com/)，这就是用来封装检测HTML5和CSS3功能支持的。一定要使用最新的版本。有了这个类库，将减少我们很多的代码。
比如：
1, if (Modernizr.geolocation) //用于检测是否支持geolocation.
2, if (Modernizr.canvas) //用于检测是否支持canvas.
3, if (Modernizr.video) { //如果支持video，但需要检测支持哪种格式呢？
if (Modernizr.video.webm) {
// try WebM
} else if (Modernizr.video.ogg) {
// try Ogg Theora + Vorbis in an Ogg container
} else if (Modernizr.video.h264){
// try H.264 video + AAC audio in an MP4 container
}
}
4，if (Modernizr.inputtypes.date) //检测是否支持日期输入。

[MuBeiBei]

赞个~·······

[001007009]

围观。。。

[挨踢直男]

顶。。。不过不用html5，这东西虽然好，但按眼前的情况来看，没什么实际的用处

[Howardch]

规范还没定下来，但是国外已经有很多公司跟上了。主要应用其实不在web上，而是在移动设备上，加上IE9对HTML5某些特性的加速，已经苹果的专一，导致很多公司已经放弃了flash而转投HTML5的怀抱。大家可以去看看 MIX11里面对HTML5的专题，有2,3个小时，很不错。

[牧心]

顶个......

[xuexiaodong2009]

顶个.

[碧海情天-赵亮]

[Quote=引用 4 楼 godspeedch 的回复:]
规范还没定下来，但是国外已经有很多公司跟上了。主要应用其实不在web上，而是在移动设备上，加上IE9对HTML5某些特性的加速，已经苹果的专一，导致很多公司已经放弃了flash而转投HTML5的怀抱。大家可以去看看 MIX11里面对HTML5的专题，有2,3个小时，很不错。
[/Quote]
有几种方法也没用，因为现在不会去用。

目前最大的问题是什么？感觉就是没有类似FLASH那样的好的可视化的HTML5编辑器，这对于HTML5的推广使用才是大问题，否则使用它的热潮会更早来临，并加快全面规范的产生。长期有长期规划，可以先来个近期规范，毕竟在现在更新日新月异的时代，要说等到2020年才让HTML5规范全面敲定等于是一个天大笑话，难道是为了让IT界的人们拒绝2012末日恐惧症？

比如SVG来说，这技术出来这么久，也没个公益免费的编辑工具。

建议程序员联盟可以考虑提出倡议要求，以后任何一种技术出来，都应该由制订组织提供至少一个免费开源的编辑软件，可以做得没那么细，主要接口都留出来可以增加扩展就可以。

[碧海情天-赵亮]

其实号称支持HTML5的工具也出来一些，象几个大厂商的，DW的CS5扩展等。但都是收费的。

[碧海情天-赵亮]

maqetta那种所谓免费还开源的，就不用说了，不爱用。

[Howardch]

[Quote=引用 9 楼 theforever 的回复:]

maqetta那种所谓免费还开源的，就不用说了，不爱用。
[/Quote]

看来这个方面的编辑器还是一个市场哈，像Silverlight的blend或者android的droiddraw都是比较好的例子，而且很多人再用。

[开心的蛋蛋哥]

顶一下！~

[碧海情天-赵亮]

maqetta使用不便，好像没有离线版，不太清楚，因为我看一眼就没离开它了，不管是否错觉，它没有留人的地方。
[Quote=引用 10 楼 godspeedch 的回复:]
看来这个方面的编辑器还是一个市场哈，像Silverlight的blend或者android的droiddraw都是比较好的例子，而且很多人再用。
[/Quote]
blend和droiddraw依赖于特殊的软件或硬件环境，所以相对来说也只能说是小众软件。

如果用另一种不开源并收费的软件来替代FLASH，这有什么意义？说穿了不过是几个同领域大厂商之间出于市场份额竞争导致的利益冲突和斗争行为罢了。

[碧海情天-赵亮]

依赖于特殊的软件或硬件环境，即使不收费，内在意义和作用也是一样的。

[beyondhot]

学习了，逐步进步中。。。。。。

[q107770540]

路过。。。。。。。。。。。。。。

[bhbhxy]

if(ie) return false

[satans18]

不错~