试用Opera11.10 build2053 版本的speed dial功能

背景

实验网站：奇团网Qeetuan.com

如果你想看下效果，安装Opera11.10版本，在快速拨号（speed dial）面板上加一下http://qeetuan.com即可！新打开一个tab默认显示的东东就是传说中的快速拨号了～

下面分享下本次制作speed dial的体验。

首先，参考官方文档 http://www.operachina.com/explore/2011/03/18/dont-like-screenshot-hi-site-owner-make-a-beautiful-picture-in-opera-speed-dial-for-your-site/

过程

我采用的是X-Purpose的方式。

按步就班(详见上面的文档)，

1，在qeetuan.com网站根目录下建一个preview.html

2，在apache上做rewrite

3，定制preview.html的内容

opera11.10 speed dial的一些经验和遇到的问题

1，官网上推荐的speed dial内容的宽为260px，高度195。

但实际上speed dial面板的标题占用了大约28像素的高度！最终比较合适的推荐高度应该是155像素
 

2，对于使用view-mode:minimized控制speed dial内容的样式

官网上说可以使用外联css文件

<link rel=stylesheet type="text/css" href="minimizedstyles.css" 
　　media="(view-mode:minimized)">

但实际上如果使用外联css文件，对speed dial内容的渲染不起作用，就跟不指定media="(view-mode:minimized)" 一样！

所以如果使用view-mode:minimized进行css渲染，需要直接使用style标签写在页面内！

另外，使用X-Purpose的方式，preview.html里面不要有html的注释标签“<!---->”，否则speed dial渲染时可能会有问题！

3，preview.html要结合view-mode:minimized才能完美地实现效果

如果你使用preview.html，但是css样式没有指定view-mode:minimized，那么speed dial在获取preview.html的快照时会将它当成普通的html页面获取，就是说会缩放你的内容。

4，speed dial一个比较严重的bug，

当你将speed dial的刷新频率由never改成别的频率后，手工刷新一下speed dial的内容，

你会发现“整个speed dial的内容被缩放了N倍”！有图为证，有木有！有木有！

改之前，

改之后，=悲剧发生了。。。

关于opera11

总的来说，opera11还是很给力地，无轮从UI还是速度上来说都比以前的版本有了长足改进，新增的speed dial功能很新鲜，至少chrome没有，有木有！ff也没有，有木有！

期待正式版的发布。