圖解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完善之前。

差别各異的浏覽器緻使頁面在不同的浏覽器之中渲染并不一緻。特别是在當今這個資訊發達的時代，裝置、螢幕、浏覽器的形态越來越豐富，人們的習慣設定也不盡相同，是以想再創造一個在任何地方都表現一緻的頁面就更加的不可能。隻要你關注如何提供實用、易用、好用的頁面，這點表面上的差異就顯得不重要。而這種想法就是接下來要介紹的“漸進增強”。