autoprefixer 基本

概要

• 対象ブラウザを設定しておくと、必要/不要なベンダープリフィックスを付加/削除してくれる
• CSSを処理。Sassを使う場合は変換後に使用
• PostCSS の一機能として動作

導入

gulp で Sass と併用するサンプル

インストール

npm install gulp gulp-sass gulp-postcss autoprefixer --save-dev

gulp

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 を参照。

> 0.5% in JP
Firefox ESR

browserl.ist でテストでき、記述に対して該当するプラウザの一覧をチェックできる。

.browserslistrc の編集。なければ作成する。

autoprefixer 等を使っていれば、すでにあるはず。
browserl.ist でチェックできる

> 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 */ で、次の行が無視される

参考記事

• autoprefixer - npm
• browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
• CSS Grid Layout Module（IE対応) | CodeCode