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

CSS3的標準並沒有全部定稿，目前CSS3的標準分成了不同的模組，具體的標準由各個模組推動標準和定稿，標準制定的過程中，瀏覽器也在不斷的發新的版本來相容新的標準。
瀏覽器有時會給一些在試驗階段或非標準階段的css屬性新增字首, 這樣開發者就可以使用 瀏覽器行為的改變不會破壞標準. 開發人員應等待包含無字首屬性，直到瀏覽器行為標準化。

1. 主流瀏覽器引擎字首

-webkit- (谷歌, Safari, 新版Opera瀏覽器等)
-moz- (火狐瀏覽器)
-o- (舊版Opera瀏覽器等)
-ms- (IE瀏覽器 和 Edge瀏覽器)

只有在新的css3的實驗性的屬性前需要新增字首，目前大部分常用的css3新屬性都可以直接捨棄字首。檢視瀏覽器相容css3屬性情況請參考：caniuse網站

.wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

2. vscode外掛實現css3字首的自動化處理

由於新增字首工作都是否枯燥和沒有意義，這些工作可以直接交給開發工具或者第三方的工具來自動化的實現處理。而vscode也有對應的自動化的外掛進行自動化的新增程式碼字首。

vscode 自動化外掛: Autoprefixer，可以自動化的給css、less、sass檔案進行自動化的新增css3字首。

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

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

# 第一步： 安裝node
# 第二步：全域性安裝Autoprefixer外掛包
$ npm i -g autoprefixer 
# 第三步： 用vacode的外掛處理css檔案（html檔案不行）

3. js輔助指令碼解放手寫字首

為了解決手工書寫字首的問題，最早的一個解決方案是由Lea Verou提供的一個-prefix-free指令碼。

只需要在.html檔案中插入一個prefixfree.js檔案（可以是文件任何地方），建議把這個指令碼檔案放在樣式表之後。

新增這個指令碼之後，使用CSS3的屬性時，只需書寫標準樣式即可。但是這種做法將所有壓力交給了客戶端來處理。如此一來頁面解析壓力就大了，效能會打一定的折扣，並且一旦指令碼載入失敗，那麼就會出現瀏覽器無法正常渲染CSS3的樣式風格。

prefixfree指令碼僅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支援。

4. 自動化構建工具

自動化構建工具：webpack、gulp、grunt都可以實現css3屬性字首的自動化新增。在此我只演示一下gulp的應用。

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

第一步：安裝node環境（已安裝，略過)
第二步：安裝gulp的全域性的包

$ npm i -g gulp

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

var gulp = require(`gulp`); 
var autoprefix = require(`gulp-autoprefixer`);

gulp.task(`styles`, function() {
  gulp.src([`./src/css/*.css`])
    .pipe(autoprefix(`last 2 versions`))
    .pipe(gulp.dest(`./bulid/css`));
});

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

gulp styles

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

gulp 線上文件：地址

5. sass、less等預處理語言

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

6. 漸進增強和優雅降級

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

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