Chrome 28正式发布:采用全新引擎Blink

Chrome 28正式发布:采用全新引擎Blink
Chrome 28今天正式发布,Windows、Mac和Chrome浏览器框架用户均可升级至28.0.1500.71。该版本不同于以往版本,它放弃了一直以来使用的WebKit,而采用Google自主研发的浏览器引擎Blink。
目前为止,Webkit和Blink看起来几乎一模一样,但随着时间的推移,我们相信Google会加入更多自己需要的内容,二者才会有一些区别。

Blink引擎的百科:

Google 宣布将在未来的 Google Chrome/Chromium 中使用基于 WebKit 的 fork Web 渲染引擎:Blink。同时 Opera 表示也将跟进 Google Chrome/Chromium 的步伐。

Google Chrome/Chromium 从创始至今一直使用 WebKit(WebCore) 作为 HTML/CSS 渲染引擎。WebKit 早先由 Apple 由 KHTML 项目 fork 出来,用于 Safari 浏览器的 Web 引擎。由于宽松的协议、轻量级的设计和便捷的应用程序内嵌 API,WebKit 逐渐变得流行起来,除了 Google Chrome/Chromium 和 Safari,它在移动终端( Symbian S60,Android,iOS)到 Toolkit 集成(GTK+, Qt4) 都有不错的收获。

尽管上面一众经常被统称为 WebKit,实际上各自都使用了自己的 WebKit 分支或者编译时选项,使得最终的渲染结果也是存在一定的差异的。不过大体上 WebKit 社区内部还是比较和谐的,各个成员之间也为维持兼容性作出了努力,直到 2010 年随着 OS X Lion 一起面世的 WebKit2。由于 WebKit2 在 WebCore 层面上实现的进程隔离在一定程度上与 Google Chrome/Chromium 自己的沙箱设计存在冲突,故 Google Chrome/Chromium 一直停留在 WebKit,使用 Backport 的方式实现和主线 WebKit2 的兼容。显而易见这增加了 WebKit 和 Chromium 的复杂性,且在一定程度上影响了 Chromium 的架构移植工作。

基于以上原因,Google 决定从 WebKit fork 出自己的 Blink Web 引擎:
现阶段以精简内部结构为主,将删除大约 7000 个文件和 450 万行 WebKit2 兼容代码。
未来将着重改善 DOM 架构,将使用 JavaScript 实现 DOM。
提升安全性,实现进程外 iframes 。

对于今年初宣布放弃自有渲染引擎跟随 Chromium 的 Opera 来说,其开发者也立刻发布博客公告 Opera 亦将切换至 Blink 引擎。

谷歌Blink的横空出世将使它和其他的WebKit浏览器开发商包括——苹果、诺基亚和黑莓——更彻底地分道扬镳。

这一举措意味着,现在有四大渲染引擎在线:WebKit、Blink、Trident 和Gecko。对于用户来说,渲染引擎的差异化意味着他们在使用不同浏览器打开同一网页时将得到不同的结果——在移动设备上尤其如此。

谷歌并在一篇博客文章里写道:“我们知道,新的渲染引擎的出现将对网页浏览产生重大影响。”但谷歌补充说,它认为多个渲染引擎 “能够推动创新,并增进整个网络生态系统的健康。”

谷歌此举有很大风险。根据NetMarketShare的数据,Chrome 浏览器目前是台式机最常用的浏览器之一。而根据Statcounter的统计,Chrome 浏览器目前是台式机最常用的浏览器。NetMarketShare统计的是访客数量,而Statcounter只统计点击量。如果谷歌的新战略不成功,Chrome 浏览器的统治地位或将不保。

Chrome 28开发版本的版本说明中还在使用WebKit,而最新的Chrome 28.0.1469.0中已经替换为Blink。

CSS自定义滚动条样式

早在IE5.5时代IE浏览器就可以自定义滚动条样式了,但是也只是自定义颜色而已。时至今日,在标准浏览器时代,自定义滚动条样式又回来了。只不过目前还是WebKit的一个私有属性(e.g. ::-webkit-scrollbar),没有一个CSS标准,也没有得到浏览器的统一。不过相对于IE浏览器已经很不错了,支持定义滚动条的宽度,背景颜色,背景渐变,背景图片,圆角,阴影等。其实该属性早在几年前(2009)就提出了,只是还不为人熟知。
IE的专有属性

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/

CSS自定义滚动条样式
由于这并不是一个CSS标准,目前只有WebKit核心的浏览器支持,所以需要加-webkit-前缀。
webkit自定义滚动条样式不再是用简单的几个CSS属性,而是一些CSS伪元素:

::-webkit-scrollbar /*滚动条 1*/
::-webkit-scrollbar-button /*滚动条按钮 2*/
::-webkit-scrollbar-track /*滚动条外层轨道 3*/
::-webkit-scrollbar-track-piece /*滚动条内层轨道 3*/
::-webkit-scrollbar-thumb /*滚动条滑块 4*/
::-webkit-scrollbar-corner /*滚动条边角 5*/
::-webkit-resizer /*滚动条缩放 6*/

通过下图对比具体认识一下这些部位。

通过这些伪元素,可以完全的重写一个网站的滚动条样式。
当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:

:horizontal – 应用于水平方向的滚动条
:vertical – 应用于竖直方向的滚动条
:decrement – 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
:increment – 和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
:start – 应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end – 类似于start伪类,标识对象是否放到滑块的后面。
:double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
:single-button – 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一端。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
:no-button – 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。
:corner-present – 用于所有滚动条块,指示滚动条圆角是否显示。
:window-inactive – 用于所有的滚动条块,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
另外,:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

演示