Chrome for Android的部分特性：

• 支持CSS 3D transform
• 支持CSS3 动画(animation)
• 支持SVG
• 支持WebSockets
• 支持专用web worker
• 支持HTML5表单的时间选择器
• 支持HTML 媒体捕获API (media capture APIs)
• 支持IndexedDB
• 支持离线缓存（Aapplication Cache）
• 支持File APIs
• 支持Geolocation
• 支持position:fixed和overflow:scroll
• 支持canvas的GPU加速
• 支持omnibox
• 不支持Flash插件（adobe也自己放弃移动版本的开发了）
• 不支持sandbox
• 暂不支持扩展

可以看到，桌面端的特性，这个版本也大部分都支持了，当然移动终端有自己的特性和硬件限制，所以体验和功能上也一定不尽相同。

想要吐槽的是，Flash真是耗电大户啊，笔记本只上网或coding的话，电池用9个小时没问题，玩网页游戏竟然只够玩1个多小时，比看电影玩网游都耗电啊。。。

PS:目前chrome for andriod只是beta版本，将来可以像桌面版那样分dev、beta、stable版本演进，支持market自动升级。可是，好过粪的是，Google竟然学起了微软了啊，只支持ICS(android 4.0)版本，让我这等买不起支持ICS设备+手上的机器不支持升级到ICS的人情何以堪啊。。。

Update:目前国内的帐号无法从android market中安装，需要安装的话需要费点儿周折：

1. 进入飞行模式。
2. 打开 Wifi 及连上位于 USA 的 VPN。
3. 在 Android Market 中安装 Chrome for Android 。

因为这还是个进行中的项目，实际的资料也不是很多，我这里也只是简单的介绍下，详细的内容等今年Q1或者Q2吧，预计到时候会有实质性的进展。

简介：

• 设备启动后直接进入浏览器(Firefox的内核Gecko)
• 完全支持HTML5
• 基于Android底层，嗯，Linux 内核+驱动层，仅此而已
• UI和所有功能都用Gecko实现
• 也就是说，浏览器可以完全访问和控制设备的硬件！
• 基于上一点，Mozilla在和W3C device APIs工作组编写一些需要用到的api，比如：电池状态、短信、联系人、电话、媒体捕获(摄像头、话筒等)、网络信息、处理器、各种传感器等。

也就是说，B2G是一个基于浏览器的操作系统，你可以在它上面打电话、发短信、视频聊天、玩各种游戏，而这些功能，都是用HTML5来实现的。。。

显然，这是一个类似Chrome OS的项目，只是B2G针对移动终端，而Chrome OS目前还只是在上网本。。。

展望：

是的，最关键的是W3C的各种Device APIs，它们是B2G的基础，但是，也可能会让B2G死掉，因为，后面很容易就会有Boot to Webkit、Boot to Trident、Boot to Presto，甚至会有Boot to QQ。。。真的这样的话，Mozilla就又成先驱先烈了，悲催～～

当然，即便没有这些 Boot to xxx，我们也可以在移动终端的浏览器中实现所有B2G中的功能，你可以在浏览器里面打开Google contact然后直接打电话发短信，打开web QQ直接和好友视频(现在webqq的视频聊天功能还需要插件支持，而且不支持mobile)。。。

web app真正的春天，就要来了吗？

这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。

现在规范中支持的效果有：

• grayscale 灰度
• sepia 褐色
• saturate 饱和度
• hue-rotate 色相旋转
• invert 反色
• opacity 透明度
• brightness 亮度
• contrast 对比度
• blur 模糊
• drop-shadow 阴影

嗯，有些和CSS3重复了，不过，具体要怎么用还要看具体情况，至少我们可以用不同的方法实现同样的效果——比如透明度。

用法是标准的CSS写法：

-webkit-filter: blur(2px);

然后，Eric Bidelman写了一个demo，可以很方便的查看各种效果。但是考虑到某网站因为不明原因在国内无法访问，我将该demo页面简单的翻译了下，放到这边给大家预览，请猛击查看。

请注意，改滤镜目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持，所以你需要下载一个最新的版本来体验～～我用的是webkit nightly。

现在，让我们看一下一些简单的效果吧：

原图

模糊

50%灰度

100%灰度

50%褐色

100%褐色

50%亮度

100%亮度

色相

反色

饱和度

对比度

嗯，我们在手机端的各种特效如lomo、日系等，也可以在页面简单实现一些了，配合css3内阴影、遮罩、渐变等，相信不必instagram等差多少。

ps:sepia的翻译貌似有点儿问题，求专业指点。

活动时间：2012年1月7日（下午1:30pm – 5:00pm）

活动地点：深圳市南山区高薪中一路腾讯大厦2楼多功能厅

活动内容：

• Firefox 及移动版新特性演示
• HTML 5特性介绍
• Javascript 开发技巧

另外，据说这次还会有专门介绍Mozilla最新的B2G技术，这个好期待～～

总之，作为前端和针对移动设备的开发者，能够直接听到/看到Firefox官方的技术介绍和讲座，是个很不错的机会吧，貌似会上会有各种礼物赠送大家不要错过哦～～

报名传送门：新版 Firefox 体验活动[深圳站]

• HTML5 parser

  Opera 11.60采用了名为Ragnarök 的解释器，能够更好的渲染错误的标签，据说可以解决20%的网站兼容问题。

• HTML custom protocol和content handler

  支持HTML自定义协议和内容处理，比如mailto和tel属性以及特定的MIME类型。具体看这里。

• 完整支持ES 5.1
• 更好的支持HTML5 video

  支持muted、preload、buffered和seekable属性。

• 支持发散渐变

  终于支持css3 radial gradient了

• 支持rem单位
• box-shadow修正

  开始支持box-shadow的inset参数，用来实现内阴影的效果。

• 开始支持CSS4 image-rendering属性

  是的，你没有看错，是css4，其实webkit和gecko早支持了。。。用来优化图片的渲染

• 终于支持microdata了

其实这些特性是计划在12.0中发布的，但是据说硬件加速功能可能会比较耗时间，于是11.60仅仅是一个过渡版本。。。

好吧，我个人一直没有用Opera的原因是，龙飞真的太慢太慢太慢了——opera的调试器Dragonfly，是谁开始喊它龙飞的？

上周写了个简单的ppt在组内大概介绍了下，感兴趣的话可以先看下这个PPT。

移动互联网的现状和未来

在说到这个话题前，我们先看下网页设计和前端开发的现状：

1. 全球有超过53亿手机用户（包括传统手机）
2. 国内3G用户超过1亿
3. iPhone4手机在2010年出货量超过3000万部；
4. iPhone 4S上市前3天卖掉400万部；
5. Android手机每天激活超过50万部；
6. iPad出货量已经超过2.5亿部；
7. 预计到2015年，移动互联网的数据流量将超越桌面端的流量。
8. 。。。

嗯，大家也许已经开始注意到，自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临，现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么，什么是响应式网页设计？

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！

或许大家之前会注意到，有很多知名网站都推出了iPhone或针对智能手机的专门网站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗？来让网站在每个设备中得到相应的视觉风格和操作体验？

这样势必就要增加很多的工作量，而且很多还是重复的。

我们在做页面的时候，一般很强调模块化的概念，我们要求一个合格的模块要能够“可扩展、无侵染”，它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配，而不用为每个设备单独做个子网站！

但是，产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样，甚至要像素还原——WTF！不同的浏览器本身的功能、行为和处理方式都不一样，为什么要表现完全一样？！

let the browser flow…

怎么做？

其实响应式网页的实现很简单，都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和media query技术实现网站的响应性：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

当然依靠屏幕宽度来进行适配是最简单的方法，media query有很多参数可以使用比如orientation、aspect-ratio等，不太了解的可以查看这篇详细的介绍。

其实，media query是响应式网页设计中被用到最多的技术。

fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格)，前几年960.gs很流行，但是随着屏幕分辨率的普遍提升，它已经不太适合当前需求了，于是最近几年fluid grid开始逐渐多了起来，这种技术其实也很简单，只是将格栅的单位由px变成%，用百分比来控制页面每列的宽度，从而实现宽度的自适应。

使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面的完整展现和基本功能。这也是一种不错的方法。

flex box

flex box是css3中的新技术，它很强大，可以实现很多我们之前无法想象的自适应布局。

有时我们希望网站能够以webapp的外观呈现给手机用户，flexbox是个不二的选择。

比如，要实现这样的简单结构：

它很像一个app的结构，头部和底部固定，中间高度自适应，用flexbox可以简单实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.flex_wrap{
	height:100%;
	display: box;  
	display: -moz-box;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex_bd{
	box-flex: 1;
	-moz-box-flex: 1; 
	-webkit-box-flex:1;
	background:#E7E7E7;
	overflow-y:auto;
}
.flex_hd{
	background:#16364C;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-weight:700;
	font-family:14px;
}
.flex_ft{
	background:green;
	height:30px;
	line-height:30px;
	text-align:right;
}

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12

<div class="flex_wrap">
	<div class="flex_hd">前端观察</div>
	<div class="flex_bd">
		<p>这里是主内容区</p>
		<p>这里是主内容区</p>
	</div>
	<div class="flex_ft">
		<a href="http://www.qianduan.net/about" title="关于我们">关于我们</a>
		<a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a>
		<a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a>
	</div>
</div>

虽然这里还会有点儿问题，比如主内容区域内容太多会被隐藏掉，因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性，但是这个问题还是很好解决的，比如在里面嵌套一个子容器，用js来给定个高度并使用定位来实现滚动条从而完整展示内容，或者直接使用iscroll等js库来实现。好消息是，iOS5中safari开始支持overflow:scroll了。

不足之处

如果你关注网站性能之类的话，可能已经发现了一些问题：

• 加载很多不需要的资源，比如多余的图片和样式内容
• 带宽限制
• 移动终端的内存和CPU限制
• 图片大小和屏幕大小不匹配

嗯，任何一个方案都不是完美的，但也不会很糟糕。下面我们会提到一些可行的优化方案：

HTML5本地存储

对于支持HTML5 appcache /manifest特性的浏览器，我们可以将一些不常改动的静态资源存储到本地，比如css文件，css中用到的图片，以及一些js文件等：

1
2
3
4
5
6
7
8
9
10

CACHE MANIFEST
NETWORK:
/*
 
CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

然后将文件保存为manifest格式，并在HTML标签中引入即可：

<html manifest="responsive.manifest">

这样，用户在第一次访问的时候会慢一点儿，但是后续访问会很快，3G网络中也能为用户节省带宽。

移动设备优先

一种新的设计流程是，先为移动设备设计界面，然后将PC端作为一个扩展。

这样做的好处是显而易见的，移动终端不会加载多余的资源，也不会因为PC端的样式而重绘页面，同时也不会影响PC端的表现。

流体图片(fluid image)

页面中的图片有时会比手机/平板的屏幕（viewport）宽，这样会将页面容器撑开，但是移动浏览器又不能scroll，结果图片被切掉一部分，然后还会有一部分内容被隐藏掉，用户看不到。

解决这个问题的方法很简单，将img的最大宽度设置成100%就可以了：

img{max-width:100%}

嗯，这里的前提是，没有给img标签设置宽度和高度，否则显示会有问题。另外不建议直接设置width=”100%”，因为会把小图拉大，模糊显示。

同理，video标签和iframe标签的宽度也可以这样做，而且最好不要使用iframe，宽度是个问题，性能也是一个方面吧。

CSS3 image

这个方法有些惊艳

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：

<img src="image.jpg" 
	data-src-600px="image-600px.jpg" 
	data-src-800px="image-800px.jpg" alt="">

然后用media query来动态赋值：

1
2
3
4
5
6
7
8
9
10

@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

当然，这种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等。

pre标签

有的网站，比如，像前端观察这样的技术博客，会用pre来显示源代码，而浏览器对pre标签默认设置white-space:pre，这样，代码就不会换行，从而撑开子容器，造成内容被隐藏的问题：

右边的文字被隐藏掉了。

解决方法很简单：

pre{
	white-space:pre-wrap
	word-wrap: break-word;
	word-break: break-all;/*如果要兼容IE，可以加上这句，连续字母断行的问题伤不起啊。。。。*/
}

当然，不只是pre标签，关键是white-space和word-break属性的值。

嗯，主要的技术和技巧其实就这些，大家不会陌生。下面是一些比较有用的工具什么的：

响应式网页设计工具与资源

国外在响应式网页设计上已经走的很远了，已经有很多工具和资源供我们参考和使用：

CSS 框架

• 320 and Up
• Mobile Boilerplate
• Golden Grid System
• Gridless
• Less Framework
• 1140 CSS Grid System
• Fluid 960 Grid System
• SimpleGrid
• Skeleton

实用工具

• Respond.js，让IE6-8支持meidia query
• Responsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现
• Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器
• Media Query Bookmarklet 顾名思义，这是一个关于media query的书签工具
• ProtoFluid 在线查看和调试网站对移动终端兼容性的工具，很赞
• ScreenFly 和ProtoFluid类似
• responsivepx 更直观的测试网站对不同分辨率的适配性

争论和总结

响应式网页设计被提出以来，争论就不断，其实核心问题只有两个个：太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面，而后者纠结响应式网站不像手机网站。

我的想法是，具体问题具体分析，比如，强内容的网站，完全可以尝试响应式网站，而重视觉和功能的网站，则可以尝试建立一个独立的移动网站。

另外，显然，响应式网页设计的大部分技术，是可以用在WebApp开发中的。

最后，欢迎各种吐槽、各种批评、各种建议、各种发散、以及各种新观点新技术～～欢迎发表评论～～

PS：如果你手上有android/iPhone，可以直接访问下前端观察。 :)

参考文章：

• Responsive Web Design Techniques, Tools and Design Strategies
• Responsive Web Design
• The ultimate responsive web design roundup

iPhone 4S硬件主要升级CPU和GPU，而这些给升级也为浏览器性能带来了很大的提升：

JavaScript 性能

硬件升级带来的直接结果就是，在SunSpider测试中，iPhone 4S性能提升很大：

嗯，最大的亮点还是Home-Screen Page，也就是webapp，提升了4倍多。。。而UIWebView真的限制很大，其实，android上的WebView组件也很搓。。。

渲染性能

iOS5的GPU加速功能很给力，加上GPU硬件本身的提升，在iPhone 4S上表现很赞：

有没有HTML5/CSS3能力被解放的感觉？我们可以尝试更丰富的视觉表现了。

页面加载时间

测试人员在iPhone4/iPhone4+iOS5和iPhone4S上测试了Alexa中排名前500的网站的页面加载时间，反复测试，发现iPhone 4S平均加载速度提高了13%，而只有60%的页面速度有明显提升，其它到没有太大的差异。这可能是因为JavaScript性能的提升，而页面中用到的JS越多，提升越明显，而用的少的则表现并不明显。

结语

这里我想说的和上一篇文章《iOS 5中safari带来的新特性》是一致的，WebApp会带来更好的性能，基于UIWebView的Native APP则继续承受各种限制。虽然现在说WebApp的春天来了可能为时尚早，但是显然是一个很大的鼓舞。

内容整理自：iPhone 4S Browser Performance Review

CSS

• 终于支持position:fixed了；
• 支持overflow:scroll了，通过-webkit-overflow-scrolling: touch;来实现：

  1 2 3 4

  selector{ overflow:scroll; -webkit-overflow-scrolling: touch; }

• CSS3 gradient语法更新，将-webkit-gradient(linear|radial)拆分为，-webkit-linear-gradient和-webkit-radial-gradient。PS，年初发表过一篇关于《webkit对于CSS3渐变样式语法的更新》的文章，看来现在就剩下android的webkit了。

HTML5

1. 新的兼容HTML5的解释器(parser)
2. 表单增强新增时间类型date, datetime, month, time和range支持，好赞：

   

   

   

   

   

   同时iOS5中safari也增强了number类型的input的验证功能。

• 支持web workers ，传说iOS3中短暂出现过web workers，不过后来消失了，现在又回来了。。。
• 增强ECMAScript5，测试结果显示支持情况跟上PC版的Safari 5.1了。
• 终于支持contenteditable属性
• 支持async script

其它特性：

• HTTP Pipelining支持，Android中webkit和Opera都支持了，Mobile Safari也跟进了。想要具体了解的可以看下这里和这里。
• inline SVG
• UIWebView 和主屏幕webapp升级到Nitro引擎(看下面的测试数据)
• 支持MathML
• CSS和其它文件不再并行下载，这貌似挺悲剧的，不过我很感兴趣这和HTTP Pipelining的关系。。。
• GPU硬件加速，虽然这个之前也有，但是效果并不是很显著，现在，在微软用于标榜IE9硬件加速的测试中，iOS达到了40FPS，而Windows Phone 7是24FPS，Nexus 2则只有可怜的10FPS——iOS4中只有2FPS。。。

一些测试数据

• HTMLTest：267分，iOS 4.3中是206分
• Sunspider JS Benchmark，JS性能测试：

  

  可见首页webapp是用上Nitro引擎了，但是悲剧的是UIWebView的性能却下降了。

  PS:中间的home screen page，@Jeanne 美女说是主屏幕，不过我的理解就是webapp，如有更好的翻译欢迎讨论。

总结

可以看出iOS 5中Safari改进还是蛮大的，而从最后webapp和UIWebView的性能测试来看，或许苹果更加重视了webapp，而不太赞成UIWebView+webapp的这种混搭的方式，虽然很多流行的app都是这种实现，比如著名的PhoneGap框架和Facebook/twitter等流行的在国内不能用的APP。。

参考资源：

• iOS 5 Top 10 Browser Performance Changes
• New Mobile Safari stuff in iOS5
• Safari on iOS 5, HTML5 evolution for iPhone and iPad

IE开发者中心给到了一份详细的针对前端开发者的文档，列出了IE10支持的HTML5和CSS3新特性。嗯，它终于跟上了：

CSS3

• css region
• css3多列
• Flexbox
• grid
• 定位浮动(positioned float)
• 3D变换(3D transfrom)
• 动画(animation)
• 渐变(gradient)
• text-shadow
• 去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。

HTML5

其它

嗯，新东西很多，看起来还是很给力的。

需要注意的是，IE10对CSS3新特性的支持，大部分还是需要-ms-前缀的。

今年在4个城市召开，深圳是首站，8月20日召开，时间不多了，在深圳的同学迅速报名吧。

深圳站的嘉宾有三位，都是相当期待的：

报名传送门：http://webrebuild.org/shenzhen/