autoprefixerのブラウザのバージョンを指定する

Gulpのautoprefixerでブラウザのバージョンを指定する方法をメモ。

指定方法

gulp-sassとgulp-autoprefixerをインストールします。

gulpfile.jsの設定を行います。

gulpfile.js

var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
  gulp.src('./develop/scss/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(gulp.dest('./develop/css'));
});

sassファイルの記述を行います。

style.scss

.flex {
	display: flex;
}
.transform {
	transform: scale(1.5);
}

gulp sassでコンパイルを実行します。

style.css

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.transform {
  -webkit-transform: scale(1.5);
          transform: scale(1.5); }

ベンダープレフィックスが付いた状態でCSSが出力されたのが確認できました。
　

ベンダープレフィックスをつけるブラウザのバージョンを指定します。
主要ブラウザの最後の2バージョンを対象にしてみます。

gulpfile.js

var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
  gulp.src('./develop/scss/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer({
    browsers: ['last 2 versions']
  }))
  .pipe(gulp.dest('./develop/css'));
});

コンパイルを実行すると、以下の内容で出力されました。

style.css

.flex {
  display: -ms-flexbox;
  display: flex; }

.transform {
  transform: scale(1.5); }

IE9以上を対象にしてみます。

gulpfile.js

var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
  gulp.src('./develop/scss/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer({
    browsers: ['ie >= 9']
  }))
  .pipe(gulp.dest('./develop/css'));
});

コンパイルを実行すると、以下の内容で出力されました。

style.css

.flex {
  display: -ms-flexbox;
  display: flex; }

.transform {
  -ms-transform: scale(1.5);
      transform: scale(1.5); }

複数を指定することもできます。

gulpfile.js

var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
  gulp.src('./develop/scss/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer({
    browsers: ['last 2 versions', 'ie >= 9', 'iOS >= 7', 'Android >= 4.2']
  }))
  .pipe(gulp.dest('./develop/css'));
});

コンパイルを実行すると、以下の内容で出力されました。

style.css

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.transform {
  -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
          transform: scale(1.5); }

対象ブラウザの指定方法について詳しくは下記をご確認ください。
GitHub – ai/browserslist: Get browsers versions that matches given criterias like in Autoprefixer
　

【参考サイト】

• GitHub – postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use
• GitHub – ai/browserslist: Get browsers versions that matches given criterias like in Autoprefixer