浏览器对HTML5特性检測工具Modernizr

时间 2019-11-13

标签浏览器 html5 html 特性工具 modernizr 栏目浏览器繁體版

原文原文链接

近期在作公司移动端运营的项目，需求中多处地方都会涉及动画。javascript

相信很是多前端开发都会有这样的感触，对CSS3中的动画属性很是熟悉，但是由于对动画运动过程的理解不深刻，常常仅仅能望而止步。CSS3中动画这在Web页面中具备点睛之笔，让人眼前一亮。这段时间我会抽出时间来整理关于动画这块的知识点。但愿能在总结的同一时候分享给有需要的朋友们。假设有什么好的建议和想法欢迎相互交流学习。无论是动画仍是别的CSS3的新特性在移动端都能获得很是好的支持。但是对于PC端来讲，有那么些不太友好的浏览器（比方万恶的IE9-）没法支持CSS3特性，为了可以更好的使用CSS3特性来实现更绚丽的页面效果，今天先介绍下浏览器的检測工具Modernizr。css

浏览器的支持状况和装机状况（分享两个站点）html

这边分享两个前端常常使用的检測站点，一个是检測浏览器的兼容性站点，对于HTML5和CSS3功能支持。并非取决于咱们。终于的决定权由浏览器的开发商说了算，因此了解每个浏览器对属性和标签的支持状况显得很是重要。另一个是检測各类浏览器的装机状况，这个站点可以告诉咱们有多少用户的浏览器支持咱们想使用的功能。前端

浏览器兼容性站点：Can I use (点击我试试) http://caniuse.com/java

浏览器装机状况统计站点：http://gs.statcounter.com/chrome

Modernizrcanvas

检測功能是应对浏览器支持差别的一个重要策略，假设咱们本身去编写一个检測HTML5新特性支持状况需要花费大量的时间，但假设不去检測又怕不一样浏览器对特性的支持存在差别，面对这个难题，咱们可以使用前人写好的检測工具Modernizr。Modernizr是怎样的一个工具。它是一个小巧、持续更新、专门用于測试浏览器对很是多HTML5及相关功能的支持状况。浏览器

Modernizr下载地址：https://modernizr.com/markdown

怎样选择Modernizrapp

由于Modernizr工具被不断的完整，因此它的JS库也变得愈来愈大。咱们需要的是有目的性的选择需要检測的特性，去Modernizr的站点点击 Add your detects button进入页面选择所需要检測的属性，再下载。

好比：我仅仅想使用canvas标签，但是又不清楚各大浏览器对它的支持状况，那么我仅仅需要在Modernizr中选择检測canvas属性打包下载就能够。

怎样使用Modernizr

Modernizr的用法很是easy，仅仅要直接在head区域引入就能够。

<head>
    <meta charset="UTF-8">
    <title>HTML5特性检測</title>
    <script src="modernizr-custom.js"></script>
</head>

怎样查看检測结果

我这边以完整的Modernizr检測工具为例。介绍怎样查看各大特性的兼容性支持状况。

查看特性的兼容性，咱们仅仅需要到对应的浏览器中。打开开发人员模式，查看html标签后面会加入一个class样式表。这个样式表就是对各个特性支持状况的统计。

特性仅仅有两个值：带前缀no的为不支持即false，不带前缀的为支持true。

好比：

no-canvas表示浏览器不支持该特性

canvas表示浏览器支持该特性

chrome浏览器：

IE8浏览器：

怎样使用Modernizr所检測的class

使用Modernizr检測了浏览器对所需HTML特性的支持状况后。咱们需要的是使用它，事实上咱们自身应该很是清楚，为何需要检測浏览器对特性的支持状况？很是多浏览器对于CSS3的特性不支持，假设咱们在网页表现上大量的使用这些新特性，那么可能会形成不支持该特性的浏览器对网页解析产生错误。从而致使页面布局、功能遭到破坏。而使用Modernizr检測出来浏览器对特性的支持状况，就能很是好的把控整个页面。

好比：在支持的浏览器中，你想要圆角边框。而在不支持的浏览器中。你想使用双线边框。那么此时在你使用了Modernizr脚步的页面，可以这样编写。

HTML：

<div class="header">button</div>

.header{ width: 80px; background-color: #ccc; padding: 10px; margin: 10px; text-align: center; }
        .borderradius .header{ border: thin #2DCB70 solid ; border-radius: 20px; }
        .no-borderradius .header{ border: 5px #2DCB70 double; }

支持border-radius的浏览器：

不支持border-radius的浏览器：

总结：今天分享和总结Modernizr检測浏览对HTML特性的支持状况，是为了更好的使用HTML5新特性，在支持新特性的浏览器中使用前沿的技术，在不支持的浏览器中使用成熟的技术。这样可以更好的实现网页的兼容性并且网页在不一样浏览器中呈现的视觉效果不会相差太大。使它平滑的过渡。