说起transform 的浏览器兼容的问题,大家基本都是知道属性前面要加个浏览器的前缀之类,之前做基于微信的微官网时,就踩过手机浏览器的兼容很多的坑。就说国内大多数用户在手机移动端端的浏览器基本是微信、QQ、UC、百度浏览器、360、Safari、安卓自带浏览器(很少人用),而在PC端的浏览器则是Chrome、IE、QQ、360、FF。这些浏览器在处理transform的时候,到底哪些是需要加浏览器前缀,加怎样的前缀呢?自己花了一点时间整理了浏览器 transform 支持情况:
注意:前缀属性的大小写,webkitTransform=WebkitTransform 其中W大小写是没关系的,但是T一定要大写! MozTransform中M一定要写,msTransform属性中的ms一定要小写!否则浏览器将不识别!
所以如果要让用户得到好的体验而保证浏览器不出现bug,我们最可靠的方式就是获取浏览器的前缀,然后通过前缀的方式来执行事件!那怎么得到浏览器的前缀!怎么获取呢?通过getVendorPrefix来获取:
function getVendorPrefix() { var body, i, style, transition, vendor; body = document.body || document.documentElement; style = body.style; transition = "transition"; vendor = ["Moz", "Webkit", "Khtml", "O", "ms"]; transition = transition.charAt(0).toUpperCase() + transition.substr(1); i = 0; while (i < vendor.length) { if (typeof style[vendor[i] + transition] === "string") { return vendor[i]; } i++; } return false; }
执行的结果如下:
相比pc端,移动端的浏览器明显都是webkit的天下,所以移动端基本可以毫无顾虑使用css3属性!所以我们可以简单的处理一下浏览器的兼容的问题:
//value可以是 translate|rotate|scale|matrix|perspective|skew function setTransform(elem,value){ elem.style[getVendorPrefix()+"Transform"]=value }
关于transform的兼容的介绍就到这里,这个时候你会想到那么transition的属性transitionProperty,transitionDuration,transitionTimingFunction的属性前缀的,还有animation 的属性animationName等…的前缀支持情况,自己分别拿了其中的一个属性进行了测试,结果如下:
transitionDuration检测结果:
animationName检测结果:
现在各个浏览器对于animation和transition的属性支持基本了解,接下来就是要基于对于以上的理解,就要写统一的方案来实现各浏览器的兼容!当然在写方案之前,你还是需要对于animationend和transitionend的事件作进一步的了解
了解transtionend 与animationend 直接查看解决方案
上一篇: HTML5 reset