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 使其可以在低版本瀏覽器上正常瀏覽。

總結

以上是生活随笔為你收集整理的05-移动端开发教程-CSS3兼容处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。