图解css5：核心技术与案例实战. 1.2 浏览器对CSS3的支持状况

<b>1.2　浏览器对css3的支持状况</b>

css3给我们带来众多全新的设计体验，但有一个问题值得考虑——浏览器对css3特性的支持情况如何？因为页面最终离不开浏览器来渲染，并不是所有浏览器都完全支持css3的特性。有时候花时间写的效果只能在特定的浏览器下有效，意味着只有部分用户能欣赏到，这样的工作变得没有什么意义。例如，使用css3制作背景仅在webkit内核的浏览器下有效果。

想知道用户能够体验到哪些css3的新特性，必须了解当前浏览器对css3特性的支持程度如何。

<b>1.2.1　经典回顾：图说浏览器大战</b>

“浏览器大战”一词在20世纪末产生，网景（netscape）与微软展开了第一次互联网大战，结果是网景以失败告终，微软荣登冠军宝座。

2004年11月firefox 1.0诞生，浏览器开始了历史上的第二次大战，ie的地位受到了以firefox为首的其他浏览器的挑战。2008年12月google chrome的诞生，向市场投放了一颗重磅炸弹。此时的ie也开始了版本的升级，虽然ie将版本更新到了ie 8，但面对firefox和google chrome两个强劲的对手，其更新的步伐依然显得太慢，在2010年ie的市场份额跌至50%。而后，chrome不断更新，其市场份额快速上升。2012年5月，终于夺得浏览器的霸主之位。

这不是浏览器大战的结束，仅仅是ie时代在落幕而已。随着移动设备的风靡，移动版本safari的市场份额在一年的时间里迅速增长。也许，第三次浏览器大战的战场并不在桌面领域，而是在移动领域。

市面上浏览器品种繁多，从而引发浏览器的市场大战，这场战争持续了近二十年，但从未有结束战争的趋势。浏览器之争提示了web浏览器的影响，比如chrome和firefox对浏览器霸主ie发起的挑战，随着移动终端的出现，另一个强有力的竞争者——移动safari网络浏览器也加入这场无休止的浏览器之战。下面一起来看看monetate.com绘制的浏览器战争图，如图1-2所示。

<b>1.2.2　浏览器的市场份额</b>

图1-2所示只是主流浏览器的市场之争，国内还有许多国产的浏览器，例如qq浏览器、奇虎360浏览器、移动端的uc浏览器等。用户在使用什么样的浏览器，这个使用率始终无法准确地掌握，因为这个概率始终都在变化，下面详细看看国内和全球浏览器的市场份额。

1．浏览器国内市场份额

首先关注国内浏览器的市场份额，一起来看百度统计的浏览器市场份额图，如图1-3所示。

国内浏览器市场位列三甲的分别是ie 6.0、奇虎360和ie 7.0，三个版本的浏览器流量份额占据总市场份额的61.1%左右，但ie 6～8在国内依然处于绝对领先态势，但相比两年前，ie浏览器在国内也步入下滑的态势，这给前端开发人员带来一丝的希望。更值得庆幸的是，360浏览器在5月发起了狙击ie 6浏览器的活动，并开始在最新版本的360安全浏览器中内置了ie 8内核，这无疑给国内的前端工程师带来了一丝清凉。

2.      浏览器全球市场份额

2012年5月可以说是浏览器厂商激烈竞争的一个月，一度报出google chrome浏览器全球份额首次超越ie浏览器，夺得浏览器全球霸主之位。全球浏览器市场份额发生了哪些变化呢？首先看statcounter的统计数据，如图1-4所示。

图1-4中数据显示，在2012年5月，ie浏览器已失去了浏览器的霸主之位，被chrome取代，firefox也在市场上位居第三。如果将其他版本的firefox、chrome、safari和opera加在一起计算，ie所占的市场份额确实已少于这些符合标准的现代浏览器。通常，我在自己站点上发布一个新的css3技巧时，很多朋友会问：“它在ie浏览器上能运行吗？效果又是什么样？”根据图1-4的显示结构，是不是应该换一种思维，是不是询问“这个效果在firefox上看起来怎么样”更有意义呢？

那么是不是可以忽略ie 呢？其实不然，ie虽然在全球市场份额不再是霸主，但在国内它依然是主流，特别是ie 6依然占有半壁江山，这也致使我们不能不考虑使用ie的用户群。

图1-4　主流浏览器市场份额（2012年1月～2012年6月）

制作一个网站，其内容应该在任何浏览器上都是可用的，不应该忽略或抛弃某些用户。虽然制作一个令人满意的web页面不是一件难事，但是为了一个渐渐消失的用户群体花费大量的时间与成本确实不是一个明智之举。

正如前面所讲，css3对网站意义何在，应该是由用户群体来确定，而不是由浏览器的市场份额所决定。换而言之，除非网站统计结果与这个结果有很大的出入，否则就不应该继续认为非ie用户仅仅是个不需要特别关注的边缘化群体。在非ie浏览器与ie浏览器上花费的时间同样重要。而css3能很容易地让网站在非ie浏览器下更棒，而且少数情况之下这些css3属性也适合ie浏览器。

<b>1.2.3　主流浏览器对css3支持状况</b>

幸运的是，css3特性大部分都已经有了很好的浏览器支持度（后面在讲每个css3特性之时，会列出各浏览器对其支持情况）。各大主流浏览器对css3的支持越来越完善，曾经让多少前端开发人员心碎的ie也开始挺进css3标准行列。当然，即使css3标准制定完成，现代浏览器要普及到大部分用户也是一个相当漫长的过程。如果现在就要使用css3来美化你的站点，有必要对各大主流浏览器对其新技术的支持情况有一个全面的了解。

本节分别在mac和windows两个平台介绍chrome、firefox、safari、opera和ie五大主流浏览器对css3新特性和css3选择器的支持情况。

1．主流浏览器对css3属性的支持状况

图1-5所示是findmebyip为五大主流浏览器对css3属性支持状况的统计图。

从图中可以看出，css3中的overf?low scrolling属性还没有浏览器支持，其他属性在mac系统下，chrome、safari都支持，其次支持较好的是firefox和opera。而在windows系统下，webkit内核浏览器表现的非常优秀，其次是firefox和opera。同时ie也迎头追赶，在ie 9中支持部分css3特性。据说，ie 10将会更完美地支持css3。

图1-5　主流浏览器对css3属性支持状况

2．主浏览浏览器对css3选择器的支持状况

图1-6所示是findmebyip为五大主流浏览器对css3选择器的支持状况统计图。值得高兴的是，图中除了ie 6～8有“×”之外，其他浏览器都是“√”，全部支持css3选择器。

从图1-5和图1-6中可以清楚地知道，无论是在mac系统下还是在windows系统下，google chrome和safari对css3特性的支持度是最好的，而ie系列是最差的，特别是ie 6～8。原因很简单，ie 6～8发布于css3完善之前。

差别各异的浏览器致使页面在不同的浏览器之中渲染并不一致。特别是在当今这个信息发达的时代，设备、屏幕、浏览器的形态越来越丰富，人们的习惯设置也不尽相同，因此想再创造一个在任何地方都表现一致的页面就更加的不可能。只要你关注如何提供实用、易用、好用的页面，这点表面上的差异就显得不重要。而这种想法就是接下来要介绍的“渐进增强”。