箱猫日和

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

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

boilerplate里html class：

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--

在写新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

gssxgss

, , ,

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

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