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

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 703 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