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

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

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

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

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

CSS3测试工具

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

浏览器名称得分

Google Chrome浏览器574

IE9浏览器574

Firefox浏览器574

Opera浏览器574

Safari浏览器574

搜狗浏览器574

QQ浏览器327

傲游浏览器574

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

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

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支持效果进行了最直观的对比。从测试结果中可以看出，实例测试的效果与数据测试之间还是存在较大差异的，这除了与浏览器自身性能有关之外，与网页本身的代码编写也有一定关系，因为网页开发者并不一定会在所有浏览器中进行测试。