IT技术博客大学习 共学习 共进步

IE开始支持部分webkit私有属性

前端观察 2014-09-17 12:31:35 浏览 1,903 次

IE团队博客上个月发文称,新发布的windows Phone 8.1 update开始解析部分webkit私有属性了。这。。。真的有些令人震惊呢!!!

不过,微软说的很对,他们这样做主要是因为要为用户提供一致的体验,而现在的问题是,很多网站在WP上表现很烂:

  • 错误的浏览器检测方法没有能识别出来IE Mobile从而返回一个桌面版的网站

  • 使用过时的webkit私有特性,而这些特性其实已经被W3C标准化了

  • 使用未被标准化的webkit私有属性

  • 使用一些IE不支持的特性而且没有提供优雅降级

  • 产生互通性bug但IE实现的不一样

例如,百度网站在iOS Safari、IE 11 Mobile、Firefox OS中的表现分别是:

2352.baidu-iphone

8713.baidu-firefox

2845.baidu-before

所以这也是一件很无奈的事情——Windows Phone的市场份额太小了,根本不能引起开发者的重视,而这些网站又严重影响WP用户的体验,微软不得不妥协了吧?——个人猜测未必正确,微软的同学或者忠实粉丝不要打我。。。

对Web开发者的启示:

  • 使用标准方法来检测浏览器版本

  • 样式不要只写-webkit-,使用跨浏览器的兼容方案,比如带上-moz-、-ms-等前缀以及标准的写法

  • 提供完善的降级方案

  • 做好多平台兼容测试

因为不爽的不只是WP手机用户,也是你自己的用户

那么,IE 11到底支持哪些webkit属性呢?

根据MSDN的文档,简单梳理下:

  • -webkit-appearance

  • WebkitPointwebkitConvertPointFromNodeToPagewebkitConvertPointFromPageToNode

  • 动画相关属性以及webkitAnimationStartwebkitAnimationEndwebkitAnimationIteration事件

  • flexbox

  • 渐变(gradient)

  • 媒体查询:-webkit-device-pixel-ratiodevicePixelRatio属性

  • -webkit-text-size-adjust——类似-ms-text-size-adjust

  • 变换(transition),所有相关属性及webkitTransitionEnd事件

  • 变形(transform),包括-webkit-backface-visibility-webkit-transform-webkit-transform-origin,以及WeKitCSSMatrix

  • -webkit-user-select,同-ms-user-select

  • UA变更:

    Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11; IEMobile/11.0) like Android 4.1.2; compatible) like iPhone OS 7_0_3 Mac OS X WebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari /537.36

需要注意的是,以上变更仅针对IE 11 for Windows phone 8.1 update ,不包括桌面版IE 11,具体详情可以参阅:http://msdn.microsoft.com/en-us/library/ie/dn736066(v=vs.85).aspx

建议继续学习

  1. 程序员眼里IE浏览器是什么样的 (阅读 7,864)
  2. IE BUG相关文章集合 (阅读 4,803)
  3. 用 javascript 判断 IE 版本号 (阅读 4,703)
  4. 一个IE6下重复加载的BUG (阅读 3,887)
  5. CSS实现HTML元素透明的那些事 (阅读 3,824)
  6. 反webkit之战 (阅读 3,741)
  7. IE8开发人员工具如何嵌入浏览器 (阅读 3,522)
  8. IE下json格式的一小点需要注意的地方 (阅读 3,344)
  9. IE之短 (阅读 3,124)
  10. 从IE 9的广告说起 (阅读 3,043)