第一章 揭開CSS3的面紗
如果關(guān)注前端方面的技術(shù)，那么對CSS一定不會陌生，你肯定聽說過CSS3攻晒。在使用CSS3之前，應(yīng)該對這個新一代語言樣式表語言的來龍去脈有個基本了解班挖。
1.1 什么是CSS3
CSS3并不是一門新的語言鲁捏。如果接觸過CSS就知道，CSS是創(chuàng)建網(wǎng)頁的另一個獨立但并非不重要的一部分萧芙。CSS是種層疊樣式表给梅，是一種樣式語言，用來告訴瀏覽器如何渲染你的web頁面双揪。
CSS3是CSS規(guī)范的最新版本
1.1.1 CSS3的新特性
CSS3新特性非常多动羽，這里挑選一些被瀏覽器支持較為完美、更具實用性的新特性渔期。
- 強大的CSS3選擇器
- 拋棄圖片的視覺效果
- 背景的變革
- 盒模型變化
- 陰影效果
- 多列布局與彈性盒模型布局
- Web字體和Web Font圖標(biāo)
- 顏色和透明度
- 圓角與邊框的新法
- 盒容器的變形
- CSS3過渡與動畫交互效果
- 媒體特性與
Responsive布局
1.1.2 CSS3的發(fā)展?fàn)顩r
CSS3的每一個模塊都有它自己的更新（進度表）時間运吓。有興趣的可以到這里-（點我查看進度）查看到CSS3當(dāng)前發(fā)展的詳細進度。
1.1.3 現(xiàn)在能使用CSS3嗎疯趟？
CSS3還在不斷完善中拘哨，很多功能還處于草稿階段，但部分模塊進入了"候選推薦"狀態(tài)迅办，說明在Web設(shè)計中完全可以使用這些模塊宅静。我一般都是通過can i use查看一個屬性的瀏覽器支持情況的。
1.1.4 使用CSS3有什么好處
與CSS比起來站欺，使用CSS3有什么好處呢姨夹？最明顯的就是CSS3能讓頁面看起來非常炫、非撤撸酷磷账，使網(wǎng)站設(shè)計錦上添花，但是它的好處遠遠不止這些贾虽。在大多數(shù)情況下逃糟， 使用CSS3不僅有利于開發(fā)與維護，還能提高網(wǎng)站的性能蓬豁。與此同時绰咽，還能增加網(wǎng)站的可訪問性、可用性地粪，使網(wǎng)站能適配更多的設(shè)備取募，甚至還可以優(yōu)化網(wǎng)站SEO，提高網(wǎng)站的搜索排名結(jié)果蟆技。下面介紹CSS3特有的好處玩敏。
- 減少開發(fā)與維護成本
- 提高頁面性能
1.2 瀏覽器對CSS3的支持情況
想知道用戶能夠體驗到那些CSS3的新特性斗忌，必須了解當(dāng)前瀏覽器對CSS3特性的支持程度如何。我一般都是通過can i use查看一個屬性的瀏覽器支持情況的旺聚。
1.2.1 經(jīng)典回顧：圖說瀏覽器大戰(zhàn)
略
1.2.2 瀏覽器的市場份額
- 瀏覽器國內(nèi)市場份額
2016-1 到 2016-11 百度統(tǒng)計結(jié)果 查看最新份額
- 瀏覽器全球市場份額（略）
1.2.3 主流瀏覽器對CSS3支持情況
幸運的是织阳，CSS3特性大部分都已經(jīng)有了很好的瀏覽器支持度。各大主流瀏覽器對CSS3的支持越來越完善砰粹，曾經(jīng)讓多少前端開發(fā)人員心碎的IE也開始挺近CSS3標(biāo)準(zhǔn)行列唧躲。當(dāng)然，即使CSS3標(biāo)準(zhǔn)制定完成伸眶，現(xiàn)代瀏覽器要普及到大部分用戶也是一個相當(dāng)漫長的過程惊窖。如果現(xiàn)在就要使用CSS3來美化你的站點刽宪，有必要對各大主流瀏覽器對其新技術(shù)的支持情況有一個全面的了解厘贼。
-
主流瀏覽器對CSS3屬性的支持情況（下圖數(shù)據(jù)來源findmebyIP）
-
主流瀏覽器對CSS3選擇器的支持情況（下圖數(shù)據(jù)來源findmebyIP）
1.3 漸進增強
漸進增強并不是一種技術(shù)，而是一種開發(fā)的方式圣拄，更是一種web設(shè)計理念嘴秸。首先思考一個問題：“網(wǎng)站是否需要在每個瀏覽器中看起來都一樣？” 帶著這個問題來看漸進增強庇谆。
1.3.1 漸進增強與優(yōu)雅降級
正如前面所言岳掐，漸進增強并不是一種技術(shù)，而是一種開發(fā)的方式饭耳，更是一種web設(shè)計理念串述。在編寫web頁面時，首先保證最核心的功能實現(xiàn)寞肖，讓任何低端的瀏覽器都能看到站點內(nèi)容纲酗，然后考慮使用高級但非必要的CSS和JavaScript等增強功能，為當(dāng)前和未來的瀏覽器提供更好的支持新蟆，給用戶帶來更好的體驗觅赊。
在設(shè)計的時候，先考慮低端設(shè)備用戶是否能夠看到所有的內(nèi)容琼稻，然后在此基礎(chǔ)之上為高端用戶進行設(shè)計吮螺。不僅為高端設(shè)備用戶提供一個完美的應(yīng)用，也要為不同性能級別設(shè)備的用戶設(shè)計不同級別的不那么完美的應(yīng)用帕翻。這成為“優(yōu)雅降級”鸠补。
1.3.2 漸進增強的優(yōu)點
向盡可能多的用戶提供盡可能優(yōu)質(zhì)的用戶體驗
CSS的漸進增強有別于CSS的hack。hack是瀏覽器廠商的一種手法嘀掸，用來增強自己的競爭紫岩，而漸進增強起到錦上添花之效。所以前者應(yīng)該盡量避免使用横殴，而后者應(yīng)該適當(dāng)使用被因。
1.4 CSS3的現(xiàn)狀及未來
1.4.1 誰在使用CSS3
國內(nèi)外使用CSS3特性制作網(wǎng)站的案例越來越多卿拴，特別是一些優(yōu)秀的個人站點，更是運用得出神入化梨与。
1.4.2 CSS3的未來
CSS3無疑對web前端開發(fā)帶來質(zhì)的飛躍堕花。雖然目前CSS3還沒有完全普及，而且瀏覽器也不完全支持粥鞋，但對于我們積極地去學(xué)習(xí)和實踐并不矛盾缘挽，掌握和學(xué)習(xí)CSS3將是大勢所趨。CSS3將是引導(dǎo)我們進入編寫網(wǎng)頁精彩世界的先驅(qū)技術(shù)呻粹。開發(fā)人員能夠更輕松地創(chuàng)建功能強大壕曼、易于維護網(wǎng)站。
隨著舊版瀏覽器所占市場份額逐漸減少等浊，學(xué)習(xí)CSS3技術(shù)將更有價值腮郊。這是作為一個優(yōu)秀前端開發(fā)人員所必須掌握的技術(shù)之一，也是前端開發(fā)人員的大勢所趨筹燕。
當(dāng)然轧飞，學(xué)習(xí)一門新技術(shù)不能跟風(fēng)，需要理性思考撒踪，這種理性思考并不表示對新技術(shù)的畏縮过咬，同時也應(yīng)該明白學(xué)習(xí)新技術(shù)可能會遇到的困難和風(fēng)險。只有這樣制妄，才能更好的駕馭CSS3掸绞。
1.5 本章小結(jié)
本章主要介紹了什么是CSS3、CSS3的發(fā)展?fàn)顩r耕捞、新特性衔掸，以及瀏覽器對CSS3的支持情況；同時砸脊，引進了漸進增強的設(shè)計理念具篇。通過本章的學(xué)習(xí)，可以對CSS3有一個初步的了解凌埂。學(xué)習(xí)CSS3的好處有很多驱显，它能讓你始終處于web設(shè)計的前沿，增加你的職業(yè)技能和競爭力瞳抓，還能幫助你縮短與頂級設(shè)計師或開發(fā)者的距離埃疫。
