Help us understand the problem. What is going on with this article?

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

参考記事

oreo3@github
日々勉強しつつ、できる範囲でWeb制作等をしています。 デザイン、SEO、マーケティング、WordPress
https://nagaishouten.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした