一、CSS3簡介

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






