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」»