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

﹏ヽ暗。殇╰゛Y 2022-07-28 10:57 216阅读 0赞

最近在做公司移动端运营的项目，需求中多处地方都会涉及动画。相信很多前端开发都会有这种感触，对CSS3中的动画属性很熟悉，但是由于对动画运动过程的理解不深入，经常只能望而止步。CSS3中动画这在Web页面中具有点睛之笔，让人眼前一亮，这段时间我会抽空来整理关于动画这块的知识点，希望能在总结的同时分享给有需要的朋友们，如果有什么好的建议和想法欢迎相互交流学习。无论是动画还是别的CSS3的新特性在移动端都能得到很好的支持，可是对于PC端来说，有那么些不太友好的浏览器（比如万恶的IE9-）无法支持CSS3特性，为了能够更好的使用CSS3特性来实现更绚丽的页面效果，今天先介绍下浏览器的检测工具Modernizr。

> **浏览器的支持情况 和 装机情况（分享两个网站）**

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

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

![这里写图片描述][20160414203037782]

浏览器装机情况统计网站：[http://gs.statcounter.com/][http_gs.statcounter.com]

![这里写图片描述][20160414203122392]

> **Modernizr**

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

Modernizr下载地址：[https://modernizr.com/][https_modernizr.com]

![这里写图片描述][20160414204316663]

> **如何选择Modernizr**

由于Modernizr工具被不断的完整，所以它的JS库也变得越来越大，我们需要的是有目的性的选择需要检测的特性，去Modernizr的网站点击 Add your detects 按钮进入页面选择所需要检测的属性，再下载。

例如：我只想使用canvas标签，但是又不清楚各大浏览器对它的支持情况，那么我只需要在Modernizr中选择检测canvas属性打包下载即可。

![这里写图片描述][20160414205631043]

![这里写图片描述][20160414205755440]

> **如何使用Modernizr**

Modernizr的使用方法很简单，只要直接在head区域引入即可。

> **如何查看检测结果**

我这边以完整的Modernizr检测工具为例，介绍如何查看各大特性的兼容性支持情况。查看特性的兼容性，我们只需要到相应的浏览器中，打开开发者模式，查看html标签 后面会添加一个class样式表，这个样式表就是对各个特性支持情况的统计。特性只有两个值：带前缀no的为不支持即false，不带前缀的为支持true。

例如：

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

**canvas表示浏览器支持该特性**

chrome浏览器：

![这里写图片描述][20160414210703920]

IE8浏览器：

![这里写图片描述][20160414210726516]

> **如何使用Modernizr所检测的class**

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

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

HTML：

.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的浏览器：

![这里写图片描述][20160414212325817]

不支持border-radius的浏览器：

![这里写图片描述][20160414212404913]

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

[Can I use]: http://caniuse.com/
[20160414203037782]: /images/20220724/cc006492dcbe4c89acc34ab964296b4c.png
[http_gs.statcounter.com]: http://gs.statcounter.com/
[20160414203122392]: /images/20220724/03ed2c602b0c43668997fe8d001c54fe.png
[https_modernizr.com]: https://modernizr.com/
[20160414204316663]: /images/20220724/ce2ae5499e5b44b59460890b08ca6f16.png
[20160414205631043]: /images/20220724/ee107b5ef61b47399473506fd0817830.png
[20160414205755440]: /images/20220724/411c2d426c984de2849faa530a461724.png
[20160414210703920]: /images/20220724/79c3caa27a1147ca8619105d426b8521.png
[20160414210726516]: /images/20220724/6ba06b89d0c444489ce19de5f1c30c94.png
[20160414212325817]: /images/20220724/67d879c9ccde44fb952516e089e53cb3.png
[20160414212404913]: /images/20220724/234b5eccea39439db54565ceaa1e0902.png