一、CSS3簡介
1、CSS3的現(xiàn)狀
(1)瀏覽器支持程度差，需要添加私有前綴
(2)移動(dòng)端支持優(yōu)于PC端
(3)不斷改進(jìn)中
(4)應(yīng)用相對(duì)廣泛,逐漸要取代JS動(dòng)態(tài)效果的趨勢
2、兼容性
IE9+
Chrome 46+
Firefox 42+
二、新增特性
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理(旋轉(zhuǎn)、縮放、傾斜、移動(dòng))、多欄布局、媒體查詢等。
三、優(yōu)勢評(píng)價(jià)
1、減少開發(fā)成本與維護(hù)成本
在CSS3出現(xiàn)之前，開發(fā)人員為了實(shí)現(xiàn)一個(gè)圓角效果，往往需要添加額外的HTML標(biāo)簽，使用一個(gè)或多個(gè)圖片來完成，而使用CSS3只需要一個(gè)標(biāo)簽，利用CSS3中的border-radius屬性就能完成。這樣，CSS3技術(shù)能把人員從繪圖、切圖和優(yōu)化圖片的工作中解放出來。如果后續(xù)需要調(diào)整這個(gè)圓角的弧度或者圓角的顏色，使用CSS2.1，需要從頭繪圖、切圖才能實(shí)現(xiàn)，使用CSS3只需修改border-radius屬性值就可快速完成修改。
CSS3提供的動(dòng)畫特性，可讓開發(fā)者在先實(shí)現(xiàn)一些動(dòng)態(tài)按鈕或者動(dòng)態(tài)導(dǎo)航時(shí)遠(yuǎn)離JavaScript，讓開發(fā)人員不需要花費(fèi)大量的時(shí)間去寫腳本或者尋找合適的腳本插件來適配一些動(dòng)態(tài)網(wǎng)站效果。
2、提高頁面性能
很多CSS3技術(shù)通過提供相同的視覺效果而成為圖片的"替代品"，換句話說，在進(jìn)行Web開發(fā)時(shí)，減少多余的標(biāo)簽嵌套以及圖片的使用數(shù)量，意味著用戶要下載的內(nèi)容將會(huì)更少，頁面加載也會(huì)更快。另外，更少的圖片、腳本和Flash文件能夠減少用戶訪問Web站點(diǎn)時(shí)的HTTP請(qǐng)求數(shù)，這是提升頁面加載速度的最佳方法之一。而使用CSS3制作圖形化網(wǎng)站無需任何圖片，極大地減少了HTTP的請(qǐng)求數(shù)量，并且提升了頁面的加載速度。例如CSS3的動(dòng)畫效果，能夠減少對(duì)JavaScript和Flash文件的HTTP請(qǐng)求，但可能會(huì)要求瀏覽器執(zhí)行很多的工作來完成這個(gè)動(dòng)畫效果的渲染，這有可能導(dǎo)致瀏覽器響應(yīng)緩慢致使用戶流失。因此，在使用一些復(fù)雜的特效時(shí)需要考慮清楚。其實(shí)很多CSS3技術(shù)能夠在任何情況下都大幅提高頁面的性能 。
CSS3將完全向后兼容，所以沒有必要修改的設(shè)計(jì)來讓它們繼續(xù)運(yùn)作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2 。
遠(yuǎn)近互聯(lián)前端小華整理發(fā)布，希望能對(duì)學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。
