05-移動端開發教程-CSS3相容處理

CSS3的标準并沒有全部定稿，目前CSS3的标準分成了不同的子產品，具體的标準由各個子產品推動标準和定稿，标準制定的過程中，浏覽器也在不斷的發新的版本來相容新的标準。

浏覽器有時會給一些在試驗階段或非标準階段的css屬性添加字首, 這樣開發者就可以使用 浏覽器行為的改變不會破壞标準. 開發人員應等待包含無字首屬性，直到浏覽器行為标準化。

-webkit- (谷歌, Safari, 新版Opera浏覽器等)

-moz- (火狐浏覽器)

-o- (舊版Opera浏覽器等)

-ms- (IE浏覽器 和 Edge浏覽器)

由于添加字首工作都是否枯燥和沒有意義，這些工作可以直接交給開發工具或者第三方的工具來自動化的實作處理。而vscode也有對應的自動化的插件進行自動化的添加代碼字首。

vscode 自動化插件: Autoprefixer，可以自動化的給css、less、sass檔案進行自動化的添加css3字首。

使用方法：ctrl + shift + p 然後輸入 autoprefixer 選擇回車執行指令。

由于此插件是對npm包：Autoprefixer的封裝，是以如果使用此插件對css進行預處理需要安裝好node和安裝上Autoprefixer包。

隻需要在<code>.html</code>檔案中插入一個<code>prefixfree.js</code>檔案（可以是文檔任何地方），建議把這個腳本檔案放在樣式表之後。

添加這個腳本之後，使用CSS3的屬性時，隻需書寫标準樣式即可。但是這種做法将所有壓力交給了用戶端來處理。如此一來頁面解析壓力就大了，性能會打一定的折扣，并且一旦腳本加載失敗，那麼就會出現浏覽器無法正常渲染CSS3的樣式風格。

prefixfree腳本僅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支援。

自動化建構工具：webpack、gulp、grunt都可以實作css3屬性字首的自動化添加。在此我隻示範一下gulp的應用。

gulp自動化配置和安裝示範：

第一步：安裝node環境（已安裝，略過)

第二步：安裝gulp的全局的包

第三步：在項目根目錄下建立一個名為 gulpfile.js 的檔案

第四步：接下來在指令終端進入gulpfile.js檔案的目錄執行

可以在項目中看到新生成的檔案了。

sass和less等css的預處理語言配合響應的編譯工具也可以實作對css3中的新屬性的自動化加字首處理。後續文章會有介紹，在此不贅述。

漸進增強（Progressive Enhancement）：一開始就針對低版本浏覽器進行建構頁面，完成基本的功能，然後再針對進階浏覽器進行效果、互動、追加功能達到更好的體驗。

優雅降級（Graceful Degradation）：一開始就建構站點的完整功能，然後針對浏覽器測試和修複。比如一開始使用 CSS3 的特性建構了一個應用，然後逐漸針對各大浏覽器進行 hack 使其可以在低版本浏覽器上正常浏覽。