• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 检测浏览器对HTML5和CSS3支持度的方法

检测浏览器对HTML5和CSS3支持度的方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,CSS3,兼容等相关知识,佚名 希望在学习及工作中可以帮助到您

 HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。尽管 HTML5 承诺很多,但现实中对 HTML5 支持的浏览器以及 HTML5 标准本身的完善程度都还没有到一个很成熟的程度。现在完全不担心浏览器支持是不现实的,还需要时间,因此当我们决定要采用 HTML5 技术开发 Web 应用的时候,我们需要对浏览器所支持的特性进行检测。

而 Modernizr 就可以帮助你完成对浏览器所支持 HTML5 特性的检查。

下面代码检测浏览器是否支持 Canvas:
 

下面代码检测浏览器是否支持本地存储:
 

上面的两个例子中我们可以很直观的对浏览器的特性进行检查以确保我们在对应的浏览器上应用的功能能否正常运作。


而使用 Modernizr 的好处还在于你不需要这样一项项去检查,还有更简单的方法,下面我们开始:

当我第一次听到 Moderizr 这个项目时,我以为这是一个让一些老的浏览器能支持 HTML5 的 JS 库,事实上不是,它主要是检测的功能。

Modernizr 可以通过网址 http://modernizr.com 来访问,该网站同时还提供一个定制脚本的功能,你可以确定你需要检测什么特性,并依此来生成相应的 JS 文件,这样可以减少不必要的 JS 代码。 
2015625153003697.png (690×533)

 一旦下载了 Modernizr 的 JS 文件后,就可以通过 <script> 标签引入到网页中。
 

检测 HTML 元素

一旦我们在页面上引入了 Modernizr 后就可以立即使用,我们可以在 <html> 元素中声明不同的 CSS 类,这些类定义了所需要支持或者不支持的特性,不支持的特性其类名一般是 no-FeatureName,例如 no-flexbox。下面是一个在 chrome 上可运行的例子:

 

还可以这样来判断浏览器是否启用了 JavaScript 支持:
 

你可以在 HTML5 Boilerplate (http://html5boilerplate.com) 或者是 Initializr (http://initializr.com) 看到一些入门的例子,根据上面的步骤,增加 no-js 类可以判断浏览器是否启用了 JavaScript 支持。
 
使用 HTML5 和 CSS3 特性

你为 <html> 标签增加的 CSS 属性,可以直接在 CSS 中定义所需要的样式,例如:
 

如果浏览器支持 box-shadows 的话,将会为 <html> 元素增加 boxshadow 这个 CSS 类,否则的话就使用 no-boxshadow 这个类。这样假设浏览器不支持 box-shadow 的话,我们可以使用其他的样式来进行定义。


另外我们也可以使用 Modernizr 的对象来操作这个行为,例如下面的代码用来检测浏览器是否支持 Canvas 和 本地存储:

 

全局的 Modernizr 对象同样可用于测试 CSS3 特性是否支持:
 


使用Modernizr加载脚本

在出现了浏览器不支持某些功能的的情况下,你不仅可以提供一个不错的备用方案,还可以加载shim/polyfill脚本在适当情况下填补缺失的功能 (想了解更多关于shims/polyfills的信息,请查看 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr拥有一个内置的脚本加载器,可以用来测试一个功能,并在功能无效的时候加载另一个脚本. 脚本加载器是内置在Modernizr中的,并且是有效的独立yepnope(http://yepnopejs.com)脚本. 脚本加载器非常容易上手,它根据特定浏览器功能的可用性,真的会简化加载脚本的过程.

你可以使用Modernizr的load()方法来动态加载脚本,该方法接受定义被测功能的属性(test属性), 如测试成功后要加载的脚本(yep属性), 如测试失败后要加载的脚本(nope属性), 和无论测试成功还是失败都要加载的脚本(both属性). 使用load()及其属性的示例如下:
 


在这个例子中Modernizr在加载脚本时还会测试是否支持canvas功能 . 如果目标浏览器支持HTML5 canvas就会加载html5CanvasAvailable.js脚本及 myCustomScript.js脚本 (在这个例子中使用yep属性有点牵强  – 这只是为了演示load()方法中的属性如何使用 ). 否则的话, 就会加载 excanvas.js这个 polyfill脚本来为IE9之前版本的浏览器添加功能支持 . 一旦excanvas.js被加载,myCustomScript.js也会接着被加载.

由于Mo

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2017-08-06HTML5几个设计和修改的页面范例分享
  • 2018-12-03实现页面跳转并能传值的实例详解
  • 2017-08-06HTML5+CSS3绘制锯齿状的矩形
  • 2018-12-03html5 section标签是什么意思?html5 section标签的用法总结
  • 2018-12-03SVG进阶|SVG过滤器(SVG Filters)
  • 2018-12-03html5 canvas标签是什么意思?canvas标签使用方法介绍
  • 2018-12-03ios/andriod开发和web前端选择哪个?
  • 2018-12-03关于localStorage、sessionStorage的文章推荐
  • 2017-08-06用HTML5制作烟火效果的教程
  • 2018-12-03HTML5 Web Workers之网站也能多线程的实现_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5中如何调用手机重力感应的接口
    • 20个为前端开发者准备的文档和指南(1)
    • HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
    • H5移动端各种各样的列表的制作方法详解(三)
    • 小程序学习之如何获取地理定位并显示城市名称
    • Html5实现如何在两个div元素之间拖放图像
    • Html5中Canvas画线有毛边如何解决
    • 基于HTML标签marquee实现滚动效果的简单方法
    • HTML5&Flash之粗知浅见
    • H5做视频直播

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有