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

時間 2019-11-10

標籤移動開發教程 css3 css 兼容處理欄目無線简体版

原文原文鏈接

CSS3的標準並無所有定稿，目前CSS3的標準分紅了不一樣的模塊，具體的標準由各個模塊推進標準和定稿，標準制定的過程當中，瀏覽器也在不斷的發新的版原本兼容新的標準。
瀏覽器有時會給一些在試驗階段或非標準階段的css屬性添加前綴, 這樣開發者就可使用瀏覽器行爲的改變不會破壞標準. 開發人員應等待包含無前綴屬性，直到瀏覽器行爲標準化。javascript

1. 主流瀏覽器引擎前綴

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

只有在新的css3的實驗性的屬性前須要添加前綴，目前大部分經常使用的css3新屬性均可以直接捨棄前綴。查看瀏覽器兼容css3屬性狀況請參考：caniuse網站html

.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也有對應的自動化的插件進行自動化的添加代碼前綴。java

vscode 自動化插件: Autoprefixer，能夠自動化的給css、less、sass文件進行自動化的添加css3前綴。node

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

因爲此插件是對npm包：Autoprefixer的封裝，因此若是使用此插件對css進行預處理須要安裝好node和安裝上Autoprefixer包。css3

# 第一步： 安裝node  # 第二步：全局安裝Autoprefixer插件包 $ npm i -g autoprefixer # 第三步： 用vacode的插件處理css文件（html文件不行）  # 若是npm安裝很慢或者老是失敗，請設置淘寶的npm包鏡像。直接在node安裝完了後執行以下命令。而後就能夠happy的安裝npm的第三方包了。 $ npm config set registry https://registry.npm.taobao.org

nodejs下載地址：下載
淘寶鏡像地址：地址git

3. js輔助腳本解放手寫前綴

爲了解決手工書寫前綴的問題，最先的一個解決方案是由Lea Verou提供的一個-prefix-free腳本。github

只須要在.html文件中插入一個prefixfree.js文件（能夠是文檔任何地方），建議把這個腳本文件放在樣式表以後。web

添加這個腳本以後，使用CSS3的屬性時，只需書寫標準樣式便可。可是這種作法將全部壓力交給了客戶端來處理。如此一來頁面解析壓力就大了，性能會打必定的折扣，而且一旦腳本加載失敗，那麼就會出現瀏覽器沒法正常渲染CSS3的樣式風格。

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

4. 自動化構建工具

自動化構建工具：webpack、gulp、grunt均可以實現css3屬性前綴的自動化添加。在此我只演示一下gulp的應用。

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

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

$ npm i -g gulp

第三步：初始化項目的npm配置文件和初始化安裝要gulp和gulp的插件的項目本地插件包。

$ npm init -y # 初始化項目的npm配置文件 $ npm i -S gulp # 安裝gulp到本地項目（僅開發時使用，S大寫） $ npm i -S gulp-autoprefixer # 安裝gulp-autoprefixer插件（爲css3屬性添加前綴） $ npm i -S gulp-rename # gulp的重命名插件

第四步：在項目根目錄下建立一個名爲 gulpfile.js 的文件

var gulp = require('gulp'), // 引用gulp autoprefixer = require('gulp-autoprefixer'), // 添加引用前綴的gulp插件 rename = require("gulp-rename"); // 引用重命名的gulp插件 gulp.task('t1', function () { gulp.src('./css/**/*.css') // 設置要處理的原始的文件位置 .pipe(autoprefixer()) .pipe(rename({ suffix: ".min", // 添加後綴 extname: ".css" // 文件擴展名 })) .pipe(gulp.dest('./css/')); // 最終文件輸出的位置 });