资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/怎么对HTML 5的特性做检测？

怎么对HTML 5的特性做检测？

Betta / 933人阅读

摘要：是一个非常好的库，它可以完成对和的特性检测。关于其介绍，请戳到目前为止，这是我收集的特性检测的代码列表。

随着HTML 5的流行，现在HTML 5占据了主要的市场份额，HTML 5增加了很多的新功能，这些新功能可以让Web体验变得更好。大多数特性在现代的主流浏览器中获得了支持，因此我们可以放心使用这些新特性来增加Web体验。但是，当有新版本的浏览器发布时，我们不要忘记一些旧版本或者老的浏览器。

目前的另外一个事实是，用户想用旧版本的浏览器来支持新特性。因此建立的产品必须是跨浏览器的，而我们唯一能做的就是HTML5特性检测，来确保指定特性被浏览器支持时才执行代码。

Modernizr是一个非常好的JS库，它可以完成对HTML 5和CSS 3的特性检测。默认情况下，modernizr会对所有特性进行检测（当然可以自定义），但如果你只想检测某一个特定功能而不像引入整个JS库，那你就得把代码放在正确的位置。在这篇文章中，我们将会看到如何使用原生的js和modernizr来检测HTML 5 的特性。

Canvas 
</>复制代码 
  1. // JS
  2. return !!document.createElement("canvas").getContext;
  3. // Modernizr
  4. if (Modernizr.canvas) {
  5. }
Video 
</>复制代码 
  1. // JS
  2. return !!document.createElement("video").canPlayType;
  3. // Modernizr
  4. if (Modernizr.video) {
  5. }
Local Storage 
</>复制代码 
  1. // JS
  2. return "localStorage" in window && window["localStorage"] !== null;
  3. // Modernizr
  4. if (Modernizr.localstorage) {
  5. }
Web Workers 
</>复制代码 
  1. // JS
  2. return !!window.Worker;
  3. // Modernizr
  4. if (Modernizr.webworkers) {
  5. }
Offline Web Application 
</>复制代码 
  1. // JS
  2. return !!window.applicationCache;
  3. // Modernizr
  4. if (Modernizr.applicationcache) {
  5. }
Geolocation 
</>复制代码 
  1. // JS
  2. return "geolocation" in navigator;
  3. // Modernizr
  4. if (Modernizr.geolocation) {
  5. }
Placeholder Text 
</>复制代码 
  1. // JS
  2. var i = document.createElement("input");
  3. return "placeholder" in i;
  4. // Modernizr
  5. if (Modernizr.input.placeholder) {
  6. }
Form Autofocus 
</>复制代码 
  1. // JS
  2. var i = document.createElement("input");
  3. return "autofocus" in i;
  4. // Modernizr
  5. if (Modernizr.input.autofocus) {
  6. }
Microdata 
</>复制代码 
  1. // JS
  2. return !!document.getItems;
  3. // Modernizr does not provide support to detect Microdata
History API

(关于其介绍，请戳：http://www.ido321.com/1069.html)

</>复制代码 
  1. // JS
  2. return !!(window.history && history.pushState);
  3. // Modernizr
  4. if (Modernizr.history) {
  5. }

到目前为止，这是我收集的特性检测的代码列表。如果你有特性检测的代码想要在列表中分享，也可以告诉我。

原文首发：http://www.ido321.com/1116.html

云服务器 GPU云服务器 html的标题怎么做 特性检测 html5对浏览器的支持 html怎么做

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49552.html

相关文章

  • 《编写可维护的 JavaScript》读书笔记

    摘要：最近阅读了编写可维护的，在这里记录一下读书笔记。禁止使用，，，的字符串形式。避免使用级事件处理函数。让事件处理程序成为接触到对象的唯一函数。检测函数是检测检测函数的最佳选择。为特定浏览器的特性进行测试，并仅当特性存在时即可应用特性检测。 最近阅读了《编写可维护的 JavaScript》，在这里记录一下读书笔记。书中主要基于三个方向来讲解怎么增加代码的可维护性：编程风格、编程实践、自动化...

    tuniutech 评论0 收藏0

  • Front-end-Developer-Interview-Questions

    摘要：前端工作面试问题备注本包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题那需要好几个小时。列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。选择器字符串，字符串，回调函数，元素，对象，数组，元素数组，对象等。 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions 前端工作面...

    array_huang 评论0 收藏0

  • Front-end-Developer-Interview-Questions

    摘要：前端工作面试问题备注本包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题那需要好几个小时。列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。选择器字符串，字符串，回调函数，元素，对象，数组，元素数组，对象等。 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions 前端工作面...

    shadajin 评论0 收藏0

  • Front-end-Developer-Interview-Questions

    摘要：前端工作面试问题备注本包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题那需要好几个小时。列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。选择器字符串，字符串，回调函数，元素，对象，数组，元素数组，对象等。 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions 前端工作面...

    13651657101 评论0 收藏0

发表评论

登陆后可评论

0条评论

Betta

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<