让效果说话 8款主流浏览器网页特效实测

    如果现在还有哪款浏览器不支持HTML5，那真的可以说是弱爆了！HTML5作为当前最热门的网页技术，已经成为多数网页开发人员的首选，各大浏览器厂商也都对HTML5相当重视。虽然现在大部分浏览器都已经支持HTML5，但由于所使用的内核引擎不同，所以每款产品对HTML5的支持程度也会有所不同。

    除HTML5之外，CSS3同样是网页制作中非常重要的一项技术，虽然可以实现的功能不及HTML5那么丰富，但CSS样式表是最基本的网页CSS3的应用范围更广、使用率更高。因此，对CSS3的支持程度，同样可以看出一款浏览器的性能优劣。

让效果说话 8款主流浏览器网页特效实测

    为了让大家更直观的了解到究竟哪款浏览器对HTML5和CSS3有更好的支持，本次测试我们除了使用传统的测试工具进行跑分对比之外，还会通过两个网页实例，对当前主流的8款PC浏览器进行测试，效果好不好，一看就知道！

●参评软件下载

●评测环境

●测试项目说明

什么是HTML5

    HTML5是用于取代1999年所制定的HTML4.01和XHTML 1.0标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

什么是CSS3

    CSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。

HTML5工具测试：QQ浏览器胜出

    html5test是被业界承认的一款浏览器HTML5性能测试工具，通过它可以测试出浏览器对各种HTML5标记的支持程度，包括文字、视频、音频、元素、表单、用户交互等等，并对每个项目进行打分，最后给出浏览器整体得分。

HTML5测试工具打分

    8款浏览器HTML5工具测试结果（满分500）：

    从HTML5工具测试的得分结果可以看出，在满分为500的测试中，IE和Safari都没能突破及格线，Firefox和搜狗勉强过关，Chrome、Opera和傲游实力相当，QQ浏览器比较意外地获得了最好成绩476分。

    那么，在接下来的实例测试中，这8款浏览器又会有怎样的表现？是否与测试工具中的得分情况一致呢？

HTML5实例测试：Chrome和IE9完胜

    HTML5实例测试我们选择的是一个Web版钢琴应用，主要测试浏览器对HTML5声音、动态效果、用户交互的处理情况。用户可以从下拉列表中选择曲目播放，在播放的同时下方会有像劲乐团等弹奏游戏那样的条形音符向上滚动，也可以用鼠标点击钢琴键盘自己弹奏。

HTML5钢琴实例

    需要说明的是，在钢琴实例中测试交互能力时，我们采用的方法是用鼠标先从左到右，再从右到左从钢琴键盘上快速滑过，检查鼠标滑过时琴键动作是否流畅，是否每个音阶都能来得及发出声音。因为如果浏览器处理得不好，就会出现琴键动作的速度赶不上鼠标操作速度，从而出现动作和声音滞后的问题。

    为了保证测试结果的公平性，在测试过程中所有浏览器选择的都是第64首曲目。

    8款浏览器HTML5实例测试结果：

    经测试，除了Safari一直处于读取状态，无法打开页面之外，其余7款浏览器都可以正常打开，但搜狗和QQ浏览器播放音乐时没有声音。在动态效果方面，Chrome和IE9的音符滚动最流畅，其余6款浏览器都会有不同程度的卡顿现象。而在进行交互时，Chrome、IE9、搜狗和QQ浏览器的操作都很流畅，只可惜搜狗和QQ浏览器没有声音；而Firefox、Opera和傲游浏览器，鼠标滑过琴键时的动作和声音就不够连续。

    感兴趣的用户也可以打开HTML5钢琴实例测试一下自己的浏览器。

CSS3工具测试：7款满分通关

    CSS3 Selectors Test是一款专业的CSS3测试工具，启动它会自动运行一个小的测试，共包含574个测试项。点击结果中列出的每个项目，可以查看相应代码。另外，由于CSS3 Selectors Test不能模拟用户操作，所以测试项目中不包括选择、悬停等需要交互的项目。

CSS3测试工具

    8款浏览器CSS3工具测试结果（满分574）：

    CSS3用工具测试的结果比较令人欣慰，仅QQ浏览器没有拿到满分，另外7款浏览器全部满分通关。那么，在CSS3实例测试中，8款浏览器表现又会如何呢？

CSS3实例测试：水平差距较大

    CSS3实例测试我们选择的是多啦A梦测试，页面左侧看到的多啦A梦并不是一张图片，而是用纯CSS代码构建的图形，没有一张图片，专门用于测试各浏览器对CSS3的支持效果。在这项测试中，如果浏览器对CSS3的处理效果好，页面上就会出现一个有立体效果，且眼球每隔10秒会动一下的多啦A梦。

CSS3多啦A梦实例测试参考标准

    如果浏览器对CSS3的支持效果不好，你看到的多啦A梦就会有效果上的缺失。比如眼球不会动、斜线变直线、没有阴影等等。下面就是几个对CSS3支持不够好的浏览器显示效果：

CSS3多啦A梦测试结果示例

    8款浏览器CSS3实例测试结果：

    在显示效果上，Chrome、Safari、QQ浏览器、傲游浏览器和搜狗浏览器能够完整的显示多啦A梦所有特效，包括眼球的动态效果；Firefox和Opera的图形显示没有问题，但多啦A梦的眼球不会动。

IE9多啦A梦测试结果

    只有IE9的结果比较令人失望，眼球的动态效果和阴影部分都没有显示出来。

    同样，感兴趣的用户也可以在自己的浏览器中打开CSS3多啦A梦实例测试一下。

评测总结：

    总体来说，Google Chrome浏览器无论跑数据还是测实例，在HTML5和CSS3这两方面都有不错的表现；IE9在HTML5的数据测试中分数较低，但实例测试效果很好，在CSS3测试中则正好相反；Firefox、Opera和Safari浏览器在两项测试中都没有表现出太多优势；搜狗和QQ浏览器对HTML5声音标记处理有所缺失，因此在HTML5实例测试中表现不佳，但在CSS3实例测试中的表现不错，图形显示和动态效果都能很好的表现出来；傲游浏览器在这次测试中的成绩则处于中等水平。

    本次测试虽然项目不多，但摆脱了以往单纯“堆数据”的测试方法，通过两个实例对8款主流浏览器的HTML5和CSS3支持效果进行了最直观的对比。从测试结果中可以看出，实例测试的效果与数据测试之间还是存在较大差异的，这除了与浏览器自身性能有关之外，与网页本身的代码编写也有一定关系，因为网页开发者并不一定会在所有浏览器中进行测试。