どうもこんにちは。中川です。
冬ですね。寒いですね。まもなく今年も終わりですが楽しい1年だったでしょうか。
そんな前置きはさておき、今回はgrunt-autoprefixerを紹介したいと思います。
※今回はgruntが使える状態を前提として書いています。
autoprefixer
Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use. Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
Can I useを見て、書いたcssのベンダープレフィックスを追加したり、外したりしてくれる便利なもの。
実際、ベンダープレフィックスが必要なのかそうでないのか、なかなか分からないものです。
ブラウザによってはいつの間にか必要ではなくなっているものがあったりしますしね。
そういう時、
「これってベンダープレフィックス必要なのかな」と思う」→Can I useを見る→必要ならば追加する
の作業を毎回してると、それだけで貴重な時間を使ってしまいます。
No more 時間泥棒！！
というわけで、そんな事で時間を使わないようにするのが、このautoprefixerです。
今回は、gurntのプラグインを使っています。
インストール
npm install grunt-autoprefixer --save-dev
Gruntfile.js
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
autoprefixer: {
options: {
browsers: ['last 2 version', 'ie 8'] // -> ブラウザの対応バージョンをオプションで決定できます。
},
file: {
expand: true,
flatten: true,
src: 'src/css/*.css', // -> 変更前のcss
dest: 'dest/css/' // -> 変更後のcss
},
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', ['autoprefixer']);
};
オプションで、ChromeやFirefoxといった各ブラウザ毎のバージョン選択や、AndroidやiOSなども選択することができます。
Browsers
実行
grunt
結果
※今回のcssは、SublimeTextのプラグインである「hayaku」とCSS3 Generatorを使用して書きました。僕のいつもの書き方です。
Before
.box-sizing{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
After
.box-sizing {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Before
.gradient{
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
}
After
.gradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -webkit-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
}
box-sizingやgradientについては、不要なベンダープレフィックスが削除されています。
Before
.flexbox {
display: flexbox;
}
After
.flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flexbox;
}
どうかけばいいのか困るランキングがあればきっとベスト3に入るフレックスボックスについては、
このようにベンダープレフィックスありとなしが追加れています。
Before
.border-radius{
-webkit-border-radius: 10px;
border-radius: 10px;
}
After
.border-radius {
border-radius: 10px;
}
border-radiusはもう必要ないですね。
いくつかのプロパティで見てみましたが、見事にベンダープレフィックスが外されたり追加されたりしています。
今まで特に気にせず書いていた、、、なんてこともこれでなくなりますね。
まとめ
数行cssの記述が減ったところで、ファイルの総量が減るのはそんなに無いのかもしれません。
しかし、ベンダープレフィックスが必要なのかそうでないのかの確認に関する時間や、そのわずかなcssファイルの削減が、ページの読み込み速度に貢献するのならぜひやるべきではないでしょうか。
しかしいくら余分なものが無くなったりしたところで、Sassのようなプリプロセッサを使って書いているとたとえautoprefixerを実行したところで、ネストの深い入り組んだcssを書いてしまっているようでは、ちょっと悲しいですね。。
なので、gruntを使った後のファイルのレビューを行い、誰が見ても理解できるファイルにするよう心がけることが大事かと思います。
せっかくgruntで自動化できるので、できることは自動化して余った時間で仕事を行い早く家に帰って家族と過ごすのが一番ですね！！
あ、家に帰っても1人だった！！＼(^o^)／
みなさま、年末年始はgruntで楽しい時間をお過ごしください。