質問: ### ▼実現したいこと タイトルの通りです。 現在、gulp-autoprefixerで自動的にプリフィックスをつけているのですが、 ふと実際に書きだされたCSSを見てみたところ、`transform`に`-webkit-`プリフィックスしかついていませんでした。 `-ms-`プリフィックスをつければ2D transformが機能することは分かっているので、できれば念のため`-ms-`もつけておきたいと考えています。 ### ▼現在のコード ``` gulp.task('sass', function () { return sass('./src/html/common/sass/*', {style: 'expanded'}) .on('error', sass.logError) .pipe(plumber()) .pipe(autoprefixer()) .pipe(plumber.stop()) .pipe(gulp.dest('./src/html/common/css/')) .pipe(browser.reload({stream:true})) }); ``` 上記のように、sassをコンパイルするtaskの中にautoprefixerを挟んで利用しています。 オプション指定無しでコンパイルした状態では`-ms-transform`は出力されませんでした。 ### ▼試したこと ``` .pipe(autoprefixer({ browsers: ['last 4 versions'] })) ``` とか ``` .pipe(autoprefixer({ browsers: ['last 2 versions', 'IE 9'] })) ``` のようにgulpfile.jsの中身を書き換えてみましたが、結果は変わりませんでした。 ### ▼アドバイス頂きたいこと どのようなオプション指定をすれば`-ms-transform`も出力されるようになるのか、 サンプル、もしくは参考情報が掲載されたブログ等のURLをご教授いただけないでしょうか。 あとはもし、gulp-autoprefixerに何らかのバグがあるとかが原因であれば、 何か情報をいただけますと助かります。 よろしくお願い申し上げます。
回答: 【GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use】 > > last 2 versions or > 5%. > > > 上記URLに書かれている要件ではIE9が対象にならないから付いていないのだと思います。 【Can I use... Support tables for HTML5, CSS3, etc】 (IE10はなかったんや...) gulpは使ったことがないのですが、下記2つのURLから多分こう書くのでは、というものを提示しておきます。参考になればよいのですが・・・。 ``` gulp.task('default', function () { return gulp.src('src/app.css') .pipe(autoprefixer({ browsers: [ 'last 2 versions', 'ie 9' ], cascade: false })) .pipe(gulp.dest('dist')); }); ``` 【gulp-autoprefixer】 【css - Gulp Autoprefixer Not Working - Stack Overflow】