0 Comments

主流浏览器支持状况

发布于:2012-12-06  |   作者:广州网站建设  |   已聚集:人围观

          幸运的是,大部分我们想要使用的CSS3特性都已经有了很好的浏览器支持度。在讲解每一个CSS3属性、特性或选择器时,我都会提及相应的浏览器支持度,但一份总的浏览器支持度概览也会相当实用。下面我就为各浏览器对CSS3新特性的总体支持程度做一个评级。

           说明 浏览器支持度信息见附录。

            Safari 5、Safari for iOS4和Chrome 5:B+。虽然Safari和Chrome是不同的浏览器,渲染CSS3属性所用的方法也不尽相同,但是它们都使用相同的Webkit渲染引擎,并且对CSS3的支持程度也几乎一致。它们支持大部分的CSS3新特性,甚至包括其他浏览器所不支持的"动画"特性。Safari 5是唯一支持"3D变形"的浏览器。它们主要的问题是其"渐变"特性的语法是非标准的,而"多列布局"和"弹性盒容器布局"模块的实现也是不完整且存在缺陷的。它们同样不支持"模板布局"和"网格定位"的模块,但目前也没有其他浏览器能做到这一点。

           Safari 4、Safari for iOS3:B。iOS是Apple的移动操作系统,在iPad、旧版iPhone和iPod Touch以及尚未更新系统的新版iPhone和iPod Touch上运行的是它的第3版。iOS3里的Safari与桌面版Safari 4的功能基本一致。Safari 4和Safari 5对CSS3的支持度基本处于同一个级别,只是不支持"3D变形",另外还有一些属性存在细微的语法问题。

          Firefox 4:B+。除了不支持"动画"和"3D变形"之外,Firefox 4的支持度与Safari 5几近相同,但它用更符合标准的"渐变"语法、更好的"多列布局"模块的实现以及独家支持的"calc函数"弥补了"不足"。然而它对"弹性盒容器布局"模块的实现同样不完整且存在缺陷。

Firefox 3.6:B。Firefox 3.6的支持度和Firefox 4大体一致,但不支持"过渡"和"calc函数"。

Opera 10.6:B。Opera 10.6能够支持Firefox 3.6所能支持的绝大部分特性,除了"渐变"和"弹性盒容器布局"。但它支持"过渡",这是Firefox 3.6所不支持的。

Opera 10.5、Opera Mobile 10.1:B-。Opera Mobile 10对应于桌面版的10.5,它们的支持度与Opera 10.6总体一致,但在一些属性上缺陷略多。

IE9:C+。在本书完稿之时IE 9尚处于beta阶段 ,它大概只支持其他主流浏览器所支持的特性的一半。其优点是对所支持的特性实现度非常好,且不需要使用浏览器前缀(稍后在本章你将会了解到浏览器前缀的相关内容)。

          IE 8、IE 7和IE 6:D-。不用说,由于这些浏览器都发布于CSS3完善发展之前,因此它们几乎完全不支持CSS3。然而它们全都支持@font-face和word-wrap特性。其中IE 7和IE 8还支持CSS3的属性选择器。除此之外IE 8还支持box-sizing。

           其他浏览器支持信息资源

         在本书中我会提供很多详细的浏览器支持度信息,但CSS3的浏览器支持度一直在持续变化之中。本书无意成为关于CSS3属性、值、函数、规则和选择器的百科全书,所以你可能需要到其他地方查阅CSS3某个特性的浏览器支持度。

         Mozilla、Opera和Safari为它们所支持的特性维护着非常实用的列表:

https://developer.mozilla.org/en/Mozilla_CSS_support_chart

http://www.opera.com/docs/specs

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef

        其他关于浏览器支持度的网站如下所示。

         维基百科的"Comparison of layout engines (Cascading Style Sheets) "(http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS))页面提供了如你所想的那般全面而翔实的内容。

        FindMeByIP(www.?ndmebyip.com/litmus)整理了许多浏览器对一些主要的CSS3属性和选择器的支持情况,此外也包括HTML5的特性。

       "When can I use..."(http://caniuse.com/#cats=CSS3)列举了五大浏览器在当前、过去以及未来版本中对若干个广受欢迎的CSS3属性和特性的支持度信息。

        Standardista(www.standardista.com/css3)目前包含了对borders、backgrounds、columns、@font-face和选择器等特性的详细支持图表。更多模块将被定期添加进去。

         QuirksMode 在"CSS contents and browser compatibility"(CSS内容和浏览器的兼容性)页面(www.quirksmode.org/css/contents.html)里罗列了各种CSS3和CSS2.1选择器和属性的支持度信息,其中每一条都有独立页面来详细地介绍它的工作原理,而实际上浏览器又是如何去处理它的。

          CSS Infos维护着一张-moz-和-webkit-的私有属性列表,它展示了每个属性诞生时的浏览器版本。请参阅http://css-infos.net/properties/?refox.phphttp://css-infos.net/properties/webkit.php

         Campaign Monitor则提供了一份电子邮件客户端对CSS的支持度指南,其中也包含CSS3的属性,这样一来你就能知道在HTML格式的电子邮件时事通讯里什么可用什么不可用了。请参阅:www.campaignmonitor.com/css

          这些级别各异的浏览器支持度意味着你的页面在不同的浏览器中可能看起来不太一样。这没什么,而且坦白讲,无论你是否使用CSS3,这种情况都将不可避免地存在。因为终端媒体天生就具备用户可控的性质,所以Web页面从来都无法保证在任何地方都表现一致。而且在如今这个时代,设备、屏幕、浏览器的形态越来越丰富,人们的惯用设置也不尽相同,因此想要创造一个在任何地方都表现一致的页面就更加不可能了。

      只要你关注于向所有人提供实用且易用的页面,那么表现上的差异就没那么重要。而这就是"渐进增强"哲学的思想所在。

标签:
飞机