search
LoginSignup
32

More than 3 years have passed since last update.

posted at

updated at

autoprefixer 基本

概要

  • 対象ブラウザを設定しておくと、必要/不要なベンダープリフィックスを付加/削除してくれる
  • 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 */ で、次の行が無視される

参考記事

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
32