Skip to content

Instantly share code, notes, and snippets.

@hideki-a
Last active January 19, 2016 01:21
Show Gist options
  • Save hideki-a/8093155 to your computer and use it in GitHub Desktop.
Save hideki-a/8093155 to your computer and use it in GitHub Desktop.
Autoprefixerの紹介

Autoprefixerの紹介


CSS3を記述する時、ベンダープリフィックスはどうしていますか?

  • 1つ1つ手で記述している
  • Emmetで展開した時、自動で出力されるのを利用している
.test{
    -webkit-box-shadow: ;
    -moz-box-shadow: ;
    box-shadow: ;
}
  • Compassのmixinを利用している
.test{
    @include box-shadow(0 0 3px #ccc);
}

CSSやSassファイルにベンダープリフィックス付きのプロパティを記述した時の問題点

  • プロパティを記述する際に、ベンダープリフィックスが必要か否かを判断しなければならない
    • よく例に上げられるborder-radiusはもはやベンダープリフィックスが必要ない
  • ベンダープリフィックス付きのプロパティが並ぶと見づらい
/* Emmetで入力した例 */
.test{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px #ccc;
    -moz-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
}
  • ブラウザのバージョンアップによってベンダープリフィックスが不必要になった場合に、1つ1つ消していかなければならない
  • (Compassの場合)ミックスインを覚えなければならないし、ぱっと見よく分からない。
    • ミックスインが古くなっている場合も…。

Autoprefixerとは?

Can I use...(HTML5/CSS3のブラウザ別互換表)のデータを基に、CSSファイル内のプロパティにベンダープリフィックスを付けたり取ったりしてくれる

配布元 = github ai / autoprefixer


Autoprefixerの動作イメージ

実行前のCSS

.button{
    box-sizing: border-box;
}

実行後のCSS

.button{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Autoprefixerの使い方


Autoprefixerコマンドの実行例

$ autoprefixer *.css

ターゲットブラウザの指定も簡単

デフォルト("> 1%", "last 2 versions", "firefox 24", "opera 12.1") : 世界の統計においてシェア1%以上・最新と1つ前のバージョン・Firefox 24(ESR)・Opera 12.1

"last 1 versions", "ff 24", "ie 10", "ie 9", "ie 8" : 最新バージョンのブラウザ・Firefox 24(ESR)・IE8〜10


Grunt + Autoprefixerの組み合わせがベター?

  • 編集する度にAutoprefixerを自動実行してくれる
  • 編集元のファイルにはベンダープリフィックスの記述がなく、ベンダープリフィックスに悩まされることがない。

Sass/Lessの場合

  1. ベンダープリフィックスを付けず、Sass/Lessを書く
  2. GruntでSass/Lessのコンパイルを行う
  3. autoprefixerタスクでベンダープリフィックスの処理を行う
  4. link要素でCSSを読み込む

CSSの場合

  1. ベンダープリフィックスを付けず、CSSを書く
  2. autoprefixerタスクでベンダープリフィックスの処理を行い、新しいCSSを出力する
  3. link要素でベンダープリフィックスが付いた方のCSSを読み込む

Gruntfileの例

https://raw.github.com/hideki-a/generator-skyward/master/app/templates/Gruntfile.coffee


Sourcemapにも対応した(2013年12月21日)

ベンダープリフィックスを付けたり取ったりする処理が行われても、CSS/Sassの記述位置が問題なく表示されるようになった

(メモ:※grunt-autoprefixerはv0.6.0で対応。12/23か24にはリリースの見込み)


今後はベンダープリフィックスが消えていく流れ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment