国内双核浏览器兼容模式和极速模式

最近正在进行的新项目中,正好可以重新构建站点的前端。
旧项目的layout本想采用boilerplate,后来因为有人提出在双核浏览器“兼容模式”下,
IE hack class无效,便修正了IE hack class的位置,从<html>移到了<body>里。

boilerplate里html class:

在写新layout的时候我一直在考虑——为什么双核浏览器的兼容模式不能正确识别html里的class呢?

写好layout后,我再次打开各类双核浏览器检测兼容模式下的样式渲染正确与否,很凑巧的是我把ie自身的兼容模式也算在了测试范围内。这次测试让我恍然大悟,所有双核浏览器所谓的“兼容模式”,并不是“IE模式”,而是“IE浏览器的兼容模式”——样式渲染方式和IE自身的兼容模式一模一样。

IE8以后都带有兼容模式,所谓的兼容模式即在样式渲染上采用了IE7的规则,IE7是非标准浏览器,样式渲染各种奇葩我就不多说了。
双核浏览器的“兼容模式”既然是走IE7规则的话,我们也就没有必要考虑去兼容“兼容模式”了。

为了证实我的猜想,我随手google出了一个检测浏览器版本的页面,在各个浏览器里打开。
(这里可能有人会问为什么不用jquery的$.browser或者简单的document.documentMode。
这方法以前试过,检测出来的还是IE8,所以当时没发现这个问题。)
测试网页:http://www.quirksmode.org/js/detect.html
果然不出所料,确实开启兼容模式后,检测到的UA都是IE7。
自此我可以放心的用boilerplate默认的hack 方式,不用担心再被问及兼容模式下错位的问题了
——因为我们前端项目不需要兼容IE6/7。

这次很随意的测试还牵扯出了另外一个发现——国内双核浏览器的采用的chrome内核是不同的。

浏览器版本 chrome内核版本
360安全 6.2.1.148 21.0.1180.89
360极速 7.1.0.342 24.0.1312.57
搜狗 4.1.3.8974 24
遨游 4.1.0.4000 26
QQ 7.4.11785.400 beta ×
百度 4.6 26
淘宝 3.2.0.799 20
*以上浏览器基本为正式版,测试版有标注。

QQ浏览器7.4虽然号称新增支持html5特性,但其实还是IE内核,当然IE8本身也支持一些html5特性~
遨游不是双核浏览器,只有chrome内核。
360浏览器在“关于”里给出了内核详细信息,但其他浏览器都没给出,所以只能给个检测到的主版本号。
淘宝浏览器在“关于”里至少提到了chromium。
其他的么……就……咳咳……

从上表的数据再来看网站GA的chrome流量统计:

ele.me chrome visitors' versions

基本就可以分析出,在占了访问流量43.2%(顺便IE内核是38.9%)的chrome内核浏览器中:
第1位的是360安全浏览器,第2位是360极速浏览器(可能含有搜狗的份额?),
第4、8位的是原生chrome,第5、6位的是遨游或百度
排在第3、9位用chrome 27内核的就不知道是哪个浏览器了,有可能是原生chrome。
第7位的chrome 21莫非是淘宝浏览器beta或者什么版本的?

P.S.以上的排行份额和国内浏览器排行的份额相当接近。

以上这个结果中,chrome版本跨度之大实在出乎我的意料。
现在chrome stable的版本号是28.0.1500.95,从caniuse上可以看到20-28对html5,css3的支持还是相差很大的。
最典型的就是cs3 gradient,因为syntax变过一次,再加上webkit gradient的语法有两种(webkit私有, legacy),chrome从26才开始支持standard的gradient语法。
这样的话,如果不加webkit前缀会影响页面功能,我就必须重新考虑启用webkit前缀的样式(随着chrome的更新我已经去掉了很多-webkit前缀样式)。


写的我好累……orz

3 thoughts to “国内双核浏览器兼容模式和极速模式”

    1. 我以前用过,后来就基本没用过了。
      现在浏览器更新换代的速度很快,也许这个版本在用-webkit/-moz,下一个版本就不用了。
      个人觉得人为的跟踪浏览器版本变更对样式的支持度,去修改mixin比通过工具加前缀要好。
      chrome 28会先命中-webkit-linear-graident,再命中linear-gradient。
      但是为了浏览器渲染速度更快,在不影响功能的前提下,我只写bg-img: linear-gradeint供chrome 26+渲染渐变,chrome26-则直接读取bg-color。
      对待样式兼容性问题,我不打算做一把抓,基本上能渲染成什么样子就渲染成什么样子。
      对于不能读取的样式,我只提供fallback,不提供patch。
      (这也许是一种洁癖……)

Comments are closed.