第一章 揭開CSS3的面紗
如果關注前端方面的技術，那么對CSS一定不會陌生，你肯定聽說過CSS3。在使用CSS3之前，應該對這個新一代語言樣式表語言的來龍去脈有個基本了解。
1.1 什么是CSS3
CSS3并不是一門新的語言。如果接觸過CSS就知道，CSS是創建網頁的另一個獨立但并非不重要的一部分。CSS是種層疊樣式表，是一種樣式語言，用來告訴瀏覽器如何渲染你的web頁面。
CSS3是CSS規范的最新版本
1.1.1 CSS3的新特性
CSS3新特性非常多，這里挑選一些被瀏覽器支持較為完美、更具實用性的新特性。
- 強大的CSS3選擇器
- 拋棄圖片的視覺效果
- 背景的變革
- 盒模型變化
- 陰影效果
- 多列布局與彈性盒模型布局
- Web字體和Web Font圖標
- 顏色和透明度
- 圓角與邊框的新法
- 盒容器的變形
- CSS3過渡與動畫交互效果
- 媒體特性與
Responsive布局
1.1.2 CSS3的發展狀況
CSS3的每一個模塊都有它自己的更新（進度表）時間。有興趣的可以到這里-（點我查看進度）查看到CSS3當前發展的詳細進度。
1.1.3 現在能使用CSS3嗎？
CSS3還在不斷完善中，很多功能還處于草稿階段，但部分模塊進入了"候選推薦"狀態，說明在Web設計中完全可以使用這些模塊。我一般都是通過can i use查看一個屬性的瀏覽器支持情況的。
1.1.4 使用CSS3有什么好處
與CSS比起來，使用CSS3有什么好處呢？最明顯的就是CSS3能讓頁面看起來非常炫、非常酷，使網站設計錦上添花，但是它的好處遠遠不止這些。在大多數情況下， 使用CSS3不僅有利于開發與維護，還能提高網站的性能。與此同時，還能增加網站的可訪問性、可用性，使網站能適配更多的設備，甚至還可以優化網站SEO，提高網站的搜索排名結果。下面介紹CSS3特有的好處。
- 減少開發與維護成本
- 提高頁面性能
1.2 瀏覽器對CSS3的支持情況
想知道用戶能夠體驗到那些CSS3的新特性，必須了解當前瀏覽器對CSS3特性的支持程度如何。我一般都是通過can i use查看一個屬性的瀏覽器支持情況的。
1.2.1 經典回顧：圖說瀏覽器大戰
略
1.2.2 瀏覽器的市場份額
- 瀏覽器國內市場份額
2016-1 到 2016-11 百度統計結果 查看最新份額
- 瀏覽器全球市場份額（略）
1.2.3 主流瀏覽器對CSS3支持情況
幸運的是，CSS3特性大部分都已經有了很好的瀏覽器支持度。各大主流瀏覽器對CSS3的支持越來越完善，曾經讓多少前端開發人員心碎的IE也開始挺近CSS3標準行列。當然，即使CSS3標準制定完成，現代瀏覽器要普及到大部分用戶也是一個相當漫長的過程。如果現在就要使用CSS3來美化你的站點，有必要對各大主流瀏覽器對其新技術的支持情況有一個全面的了解。
-
主流瀏覽器對CSS3屬性的支持情況（下圖數據來源findmebyIP）
-
主流瀏覽器對CSS3選擇器的支持情況（下圖數據來源findmebyIP）
1.3 漸進增強
漸進增強并不是一種技術，而是一種開發的方式，更是一種web設計理念。首先思考一個問題：“網站是否需要在每個瀏覽器中看起來都一樣？” 帶著這個問題來看漸進增強。
1.3.1 漸進增強與優雅降級
正如前面所言，漸進增強并不是一種技術，而是一種開發的方式，更是一種web設計理念。在編寫web頁面時，首先保證最核心的功能實現，讓任何低端的瀏覽器都能看到站點內容，然后考慮使用高級但非必要的CSS和JavaScript等增強功能，為當前和未來的瀏覽器提供更好的支持，給用戶帶來更好的體驗。
在設計的時候，先考慮低端設備用戶是否能夠看到所有的內容，然后在此基礎之上為高端用戶進行設計。不僅為高端設備用戶提供一個完美的應用，也要為不同性能級別設備的用戶設計不同級別的不那么完美的應用。這成為“優雅降級”。
1.3.2 漸進增強的優點
向盡可能多的用戶提供盡可能優質的用戶體驗
CSS的漸進增強有別于CSS的hack。hack是瀏覽器廠商的一種手法，用來增強自己的競爭，而漸進增強起到錦上添花之效。所以前者應該盡量避免使用，而后者應該適當使用。
1.4 CSS3的現狀及未來
1.4.1 誰在使用CSS3
國內外使用CSS3特性制作網站的案例越來越多，特別是一些優秀的個人站點，更是運用得出神入化。
1.4.2 CSS3的未來
CSS3無疑對web前端開發帶來質的飛躍。雖然目前CSS3還沒有完全普及，而且瀏覽器也不完全支持，但對于我們積極地去學習和實踐并不矛盾，掌握和學習CSS3將是大勢所趨。CSS3將是引導我們進入編寫網頁精彩世界的先驅技術。開發人員能夠更輕松地創建功能強大、易于維護網站。
隨著舊版瀏覽器所占市場份額逐漸減少，學習CSS3技術將更有價值。這是作為一個優秀前端開發人員所必須掌握的技術之一，也是前端開發人員的大勢所趨。
當然，學習一門新技術不能跟風，需要理性思考，這種理性思考并不表示對新技術的畏縮，同時也應該明白學習新技術可能會遇到的困難和風險。只有這樣，才能更好的駕馭CSS3。
1.5 本章小結
本章主要介紹了什么是CSS3、CSS3的發展狀況、新特性，以及瀏覽器對CSS3的支持情況；同時，引進了漸進增強的設計理念。通過本章的學習，可以對CSS3有一個初步的了解。學習CSS3的好處有很多，它能讓你始終處于web設計的前沿，增加你的職業技能和競爭力，還能幫助你縮短與頂級設計師或開發者的距離。
