概要
- 対象ブラウザを設定しておくと、必要/不要なベンダープリフィックスを付加/削除してくれる
- CSSを処理。Sassを使う場合は変換後に使用
- PostCSS の一機能として動作
導入
gulp で Sass と併用するサンプル
インストール
npm install gulp gulp-sass gulp-postcss autoprefixer --save-dev
gulp
gulpfile.babel.js
import gulp from 'gulp';
import sass from 'gulp-sass';
import postcss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
// import cssMqpacker from 'css-mqpacker'; // Post-css の他パッケージを使う場合
const paths = {
css: {
src: '/src/style.scss', // ソースファイル
dest: '../' // 出力ファイル
}
};
export function css() {
return gulp.src(paths.css.src)
.pipe(sass({outputStyle: 'compressed'}))
.pipe(postcss([
autoprefixer({ grid: true }), // CSS-Grid を使うなら
// cssMqpacker() // PostCSS の他の処理があれば追記
]))
.pipe(gulp.dest(paths.css.dest));
}
css.description = '変換：SCSS → CSS'; // npx gulp --tasks で注釈を表示
対象ブラウザの設定
.browserslistrc、または package.json に記述する。
(対象ブラウザの抽出は Browserslist で実装されている)
gulpfile.babel.js と同じ場所に .browserslistrc を作成し、対象ブラウザを書く。
書き方は browserslist/browserslist を参照。
.browserslistrc
> 0.5% in JP
Firefox ESR
browserl.ist でテストでき、記述に対して該当するプラウザの一覧をチェックできる。
.browserslistrc の編集。なければ作成する。
autoprefixer 等を使っていれば、すでにあるはず。
browserl.ist でチェックできる
.browserslistrc
> 0.5% in JP
Firefox ESR
ちなみに上の設定だと、以下のブラウザをサポート。
日本で 94.43% をカバーしている。
- Chrome6725.38%
- Chrome6613.68%
- Chrome490.41%
- Edge170.55%
- Edge160.27%
- Firefox602.62%
- IE110.63%
- Safari11.10.77%
- Safari10.10.11%
- Firefox603.24%
- Firefox52
- Chrome for Android6737.51% (以下モバイル)
- Android Browser4.40.75%
- iOS Safari11.3-11.43.92%
- iOS Safari11.0-11.20.93%
- iOS Safari10.30.41%
- iOS Safari10.0-10.20.18%
- iOS Safari9.3
Tips
チェック
npx autoprefixer --info
現在の設定での対象ブラウザやプロパティ等を表示
IE を CSS-Grid に対応させたい場合
デフォルトではオフになっているので有効化する
autoprefixer({ grid: true })
grid-gap も対応してくれ、位置設定も適切に変換してくれる grid-template-areas で書くのが良さげ。
参考：CSS Grid Layout Module（IE対応) | CodeCode
特定の箇所には autoprefixer を通したくない場合
-
/* autoprefixer: off */で、次のブロックが無視される
Sass との併用時は、'compressed' にしている時に Sassがコメントを消さないよう/*! autoprefixer: off */とエクスクラメーションマークを付けとくと良い -
/* autoprefixer: ignore next */で、次の行が無視される