Autoprefixerをpostcss-cliで使ってみます。
postcss-cliの環境作成については以前投稿した記事を参照ください。
PostCSSを使ってみる
使い方
postcss-cliの環境を用意して、Autoprefixerをインストールします。
1 | npm install autoprefixer --save-dev |
設定ファイルを用意して、Autoprefixerが使えるようにします。
postcss.config.js
1 2 3 4 5 | module.exports = { plugins: [ require('autoprefixer')() ]} |
devディレクトリを作成して、CSSを用意します。
input.css
1 2 3 4 5 6 | .hoge { display: flex; transform: scale(0.5); -webkit-border-radius: 5px; border-radius: 5px;} |
下記コマンドを実行します。
1 | node_modules\.bin\postcss -c postcss.config.js dev/input.css -o public/output.css |
publicディレクトリに下記ファイルが生成されました。
output.css
1 2 3 4 5 6 | .hoge { display: flex; -webkit-transform: scale(0.5); transform: scale(0.5); border-radius: 3px;} |
transformにベンダープレフィックスが追加され、border-radiusに付けていたベンダープレフィックスが削除されました。
postcss.config.jsに設定を追加することで、対象ブラウザを指定できます。
postcss.config.js
1 2 3 4 5 6 7 8 9 | module.exports = { plugins: [ require('autoprefixer')({ "browsers": [ "last 2 versions" ] }) ]} |
再度コマンドを実行します。
1 | node_modules\.bin\postcss -c postcss.config.js dev/input.css -o public/output.css |
output.cssが以下のように変更されました。
output.css
1 2 3 4 5 6 7 8 | .hoge { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: scale(0.5); transform: scale(0.5); border-radius: 3px;} |
対象ブラウザで設定できる内容についてはこちらをご確認ください。
【参考サイト】
- autoprefixer – npm
- GitHub – browserslist/browserslist:
Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
コメントが承認されるまで時間がかかります。