IE开始支持部分webkit私有属性前端观察 | Front News | 前端观察

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

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

• 错误的浏览器检测方法没有能识别出来IE Mobile从而返回一个桌面版的网站
• 使用过时的webkit私有特性，而这些特性其实已经被W3C标准化了
• 使用未被标准化的webkit私有属性
• 使用一些IE不支持的特性而且没有提供优雅降级
• 产生互通性bug但IE实现的不一样

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

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

对Web开发者的启示：

• 使用标准方法来检测浏览器版本
• 样式不要只写-webkit-，使用跨浏览器的兼容方案，比如带上-moz-、-ms-等前缀以及标准的写法
• 提供完善的降级方案
• 做好多平台兼容测试

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

那么，IE 11到底支持哪些webkit属性呢？

根据MSDN的文档，简单梳理下：

• -webkit-appearance
• WebkitPoint、webkitConvertPointFromNodeToPage、webkitConvertPointFromPageToNode
• 动画相关属性以及webkitAnimationStart、webkitAnimationEnd、webkitAnimationIteration事件
• flexbox
• 渐变(gradient)
• 媒体查询：-webkit-device-pixel-ratio和devicePixelRatio属性
• -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