CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」
grunt-autoprefixerはベンダープリフィックスを後付けする為のGruntモジュールです。
たとえば次のようなCSSがあったとします。
.foo{
box-sizing: border-box;
}
ただしFirefoxなど一部のブラウザでbox-sizingを利用するにはベンダープリフィックスが必要です
そういった場合にgrunt-autoprefixerを実行することで以下の様に必要なベンダープリフィックスを追加してくれます。
.foo{
-moz-box-sizing:border-box;
box-sizing:border-box
}
さらに次のようなベンダープリフィックスを指定している場合も、
.foo{
-webkit-box-sizing:border-box;
box-sizing: border-box;
}
grunt-autoprefixerを実行することで不要なベンダープリフィックスを取り除き必要なベンダープリフィックスを追加してくれます。
.foo{
-moz-box-sizing:border-box;
box-sizing:border-box
}
grunt-autoprefixerは利用するブラウザのバージョンの簡単に指定できるのが特徴です。
たとえば次のようにoptionsを指定すると各ブラウザの最新2バージョンとIE8、IE9で利用するのに必要なベンダープリフィックスを後付けしてくれます。
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
}
利用方法
Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。
grunt-autoprefixerのインストールは以下のコマンドです。
npm install grunt-autoprefixer --save-dev
Gruntfile.jsの内容は以下のようにします。optionsで利用するブラウザのバージョンをsrcでターゲットのCSSファイルを指定できます。
module.exports = function(grunt) {
//グラントタスクの設定
grunt.initConfig({
autoprefixer: {
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
},
dist:{
src: './css/*.css',
}
}
});
//プラグインの読み込み
grunt.loadNpmTasks('grunt-autoprefixer');
};
上記のように指定しておけば以下のコマンドでgrunt-autoprefixerを実行することができます。
grunt autoprefixer:dist
grunt-autoprefixerを利用してベンダープリフィックスをつけておけば案件途中で対応ブラウザのバージョンが変わっても設定をかえるだけで簡単に対応が可能です。
関連エントリー
grunt-webfontで書き出されるwebフォントの文字列を変更
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」
今どきのCSS3グラデーションの指定方法
Compassで書き出すCSSファイルを軽量化する
Stylus入門
スポンサードリンク
«Google Chromeのブレークポイント | メイン | CSSスプライトを生成する「grunt-spritesmith」»