Edited at

autoprefixer 基本

More than 1 year has passed since last update.


概要


  • 対象ブラウザを設定しておくと、必要/不要なベンダープリフィックスを付加/削除してくれる

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

> 0.5% in JP

Firefox ESR

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

browserlist

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


参考記事