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

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

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

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

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

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

Modernizr

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

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

怎样选择Modernizr

因为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新特性，在支持新特性的浏览器中使用前沿的技术，在不支持的浏览器中使用成熟的技术。这样能够更好的实现网页的兼容性而且网页在不同浏览器中呈现的视觉效果不会相差太大。使它平滑的过渡。

浏览器对HTML5特性检測工具Modernizr的更多相关文章

  1. HTML5特性检測

    HTML5特性检測:    1.检測全局对象:诸如window或navigator是否拥有特定的属性    2.创建元素:检測该元素的DOM对象是否拥有特定的属性    3.创建元素:检測该元素的DO ...

  2. Visual C++ 2012/2013的内存溢出检測工具

    在过去,每次编写C/C++程序的时候,VLD差点儿是我的标配.有了它,就能够放心地敲代码,随时发现内存溢出. VLD最高可支持到Visual Studio 2012.不知道以后会不会支持Visual ...

  3. c++程序内存泄露检測工具

    功能: 用于检測c++程序的内存泄露. 原理: 事实上非常easy,就是通过函数的重载机制,捕获应用程序的new, new[] , delete , delete[], malloc,calloc,f ...

  4. Linux C 编程内存泄露检測工具(二)：memwatch

    Memwatch简单介绍 在三种检測工具其中,设置最简单的算是memwatch,和dmalloc一样,它能检測未释放的内存.同一段内存被释放多次.位址存取错误及不当使用未分配之内存区域.请往http: ...

  5. Xenu-web开发死链接检測工具应用

    Xenu 是一款深受业界好评,并被广泛使用的死链接检測工具. 时常检測站点并排除死链接,对站点的SEO 很重要,由于大量死链接存在会减少用户和搜索引擎对站点的信任,web程序开发者还可通过其找到死链接 ...

  6. Visual Studio内存泄露检測工具

    使用简单介绍     在敲代码的过程中.难免会遇到内存泄露的时候.这个时候假设手工查找内存泄露,不说方法没有通用的,就是真的要自己手工查找也是非常耗时间和精力的.诚然.我们能够借助一些工具,并且我们还 ...

  7. LeakCanary：简单粗暴的内存泄漏检測工具

    差点儿每一个程序猿在开发的过程中都会遇到内存泄漏.那么我们怎样检測到app是否哪里出现内存泄漏呢?square公司推出了一款简单粗暴的检測内存泄漏的工具-- LeakCanary 什么是内存泄漏? 内 ...

  8. cpu真实占用率检測工具

     windows任务管理器所示CPU占用,一直在不断的变动跳跃 ,并不能反应真实的平均CPU占用率.迅雷下载工具也是一样 ,有时这些知名软件,反倒是没有做的这么人性化,细致.或 许就是不想让人知道 ...

  9. Android内存泄漏检測与MAT使用

    公司相关项目须要进行内存优化.所以整理了一些分析内存泄漏的知识以及工作分析过程. 本文中不会刻意的编写一个内存泄漏的程序,然后利用工具去分析它.而是通过介绍相关概念,来分析怎样寻找内存泄漏.并附上自己 ...

随机推荐

  1. 【Java】 剑指offer(54) 二叉搜索树的第k个结点

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 给定一棵二叉搜索树,请找出其中的第k小的结点. 思路 设置全局变量 ...

  2. 如何修改 FastAdmin 弹窗大小？

    如何修改 FastAdmin 弹窗大小? 参考代码 1 如下: buttons: [ { name: 'start', , , , extend: 'data-area=\'["350px& ...

  3. 宇宙最强VisualStudio2017配置pyQt5用于python3.6的UI界面工具(转)

    宇宙最强VisualStudio2017配置pyQt5用于python3.6的UI界面工具 转载: https://blog.csdn.net/m0_37606112/article/details/ ...

  4. go语言学习-接口

    Go语言中虽然没有传统面向对象语言中类.集成的概念,不过提供了接口的支持,可以使用接口来使用一些面向对象的特性. 在 go 语言中,的接口有下面几个特点: 可以包含0个或多个方法的签名 只定义方法的签 ...

  5. FTP 学习笔记

    由于最近在跟LMS项目,前期的环境部署需要使用到FTP协议,所以在这里记录一下项目中学习到的知识,以作记录. FTP为基于TCP/IP网络传输协议的文件传输应用层协议. FTP协议在两台服务器中传输文 ...

  6. 洛谷.2596.[ZJOI2006]书架(Splay)

    题目链接 /* 五个操作: 1.将某元素置顶.删掉这个数,插入最左 2.将某元素置底.同样 3.旋到根后,直接将这个数与前驱/后继交换所有信息 不是左右子节点! 4.5.裸平衡树 ps:1.用pos[ ...

  7. 使用 P6Spy 来格式化 SQL 语句，支持 Hibernate 和 iBATIS

    事情起因 在处理一个查询小功能的时候,自认为 SQL 语句和传参均正确,然而查询结果无匹配数据,在查看 Hibernate 自带 SQL 语句输出的时候带着问好感觉有点不爽,特别是想复制 SQL 语句 ...

  8. 支付宝集成遇到"_EVP_DecodeBlock",referenced from:报错

    遇到问题报错如下: 调试了好多遍,始终不行,检测各种依赖库,发现并没有少什么.后来发现支付宝demo里比文档讲解里面多两个.a文件 直接加上就好了

  9. 绘图 Painter转接口封装的方式

        记录下思想 适用于业务逻辑相对单纯的一些画法,比如画背景(颜色,背景,边框等) 一个Draw方法中如果绘制比较复杂的话,就会导致代码混乱,而不灵活,每次需求更改就得重新画过,可重用性差. 以接 ...

  10. 【转】大数据分析中Redis怎么做到220万ops

    原文:http://www.cnblogs.com/nnhy/archive/2018/01/16/Redis220.html 大数据时代,海量数据分析就像吃饭一样,成为了我们每天的工作.为了更好的为 ...