如何更好的处理兼容性的方法,你知道几个?

1. CSS hack 方法

Browserhacks网站里有各个浏览器hack的写法

http://browserhacks.com/

 

 

2. polyfill 和 shiv

都是依靠旧的环境中的一些手段来支持一些的新的API或者特性,从而可以获得一些新的特性。让这些新的特性在旧的浏览器里也可以正常使用。

 

经常用到解决兼容性的shiv:

1)html5shiv

作用: 在IE6,IE7,IE8这些老的浏览器中,他们是不支持html5的标签。引入这样一个库就会让老的浏览器支持这些标签。(通过IE表达式引入)

https://github.com/aFarkas/html5shiv

 

 

2)Respond是一个很有名的polyfill

因为IE6-8不支持CSS3的媒体查询。通过IE条件表达式引入这个库。这个库就是为了让IE6-8支持媒体查询其中的两个特性min/max-width。

https://github.com/scottjehl/Respond

 

 

3)modernizr是一个JS库--可以理解为是一个检测程序,会检测浏览器对CSS3、HTML5等等的一些功能性的支持情况,如果浏览器支持某个属性或者某个特性那么它就会向HTML元素添加相应的类,如果不支持他就会添加一个no开头的同名的一个类。这是一种主动去检测兼容性的方式。对于一些实验性的或者不确定兼容性情况的一些新的特性建议都来使用这种主动性检测的一种方式来解决兼容性问题。这样可以让我们主动提供完善的支持和不支持的一个方案,不用等到测试发现有兼容性的问题才去解决。这类属于防御性编程,事先为一些可能发生的兼容性问题做一些防御。这样编程方式会安全可靠。

https://modernizr.com/

可以自己去定义检测的特性

 

点击你要检测的属性,然后点击BUILD

 

复制或者下载到自己JS文件目录下----》在自己的html页面引入你刚才复制过去的JS

然后刷新页面

 

可以在控制台中看到,引入一个叫borderradius的类名,说明这个浏览器支持这个样式,如果不兼容的话就会在同一类名前加一个no--->no-borderradius,我们可以针对这个类不同写不同的样式。

 

 

我们可以提前查看一下属性兼容性,然后根据不同情况选用不同的解决方案。

MIn晓天个人博客原创:转账请注明出处:http://minxtblog.com/

posted @ 2016-09-14 13:11  MIn晓天  阅读(1003)  评论(0编辑  收藏  举报