- 1つ1つ手で記述している
- Emmetで展開した時、自動で出力されるのを利用している
.test{
-webkit-box-shadow: ;
-moz-box-shadow: ;
box-shadow: ;
}
- Compassのmixinを利用している
.test{
@include box-shadow(0 0 3px #ccc);
}
- プロパティを記述する際に、ベンダープリフィックスが必要か否かを判断しなければならない
- よく例に上げられる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の場合）ミックスインを覚えなければならないし、ぱっと見よく分からない。
- ミックスインが古くなっている場合も…。
Can I use...（HTML5/CSS3のブラウザ別互換表）のデータを基に、CSSファイル内のプロパティにベンダープリフィックスを付けたり取ったりしてくれる
配布元 = github ai / autoprefixer
.button{
box-sizing: border-box;
}
.button{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
- autoprefixerコマンドを実行
- Sublime Textプラグイン https://github.com/sindresorhus/sublime-autoprefixer
- Brackets/Edge Codeエクステンション https://github.com/mikaeljorhult/brackets-autoprefixer
- Compassに組み込む
- Prepros App
- Grunt(grunt-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
- 編集する度にAutoprefixerを自動実行してくれる
- 編集元のファイルにはベンダープリフィックスの記述がなく、ベンダープリフィックスに悩まされることがない。
- ベンダープリフィックスを付けず、Sass/Lessを書く
- GruntでSass/Lessのコンパイルを行う
- autoprefixerタスクでベンダープリフィックスの処理を行う
- link要素でCSSを読み込む
- ベンダープリフィックスを付けず、CSSを書く
- autoprefixerタスクでベンダープリフィックスの処理を行い、新しいCSSを出力する
- link要素でベンダープリフィックスが付いた方のCSSを読み込む
https://raw.github.com/hideki-a/generator-skyward/master/app/templates/Gruntfile.coffee
ベンダープリフィックスを付けたり取ったりする処理が行われても、CSS/Sassの記述位置が問題なく表示されるようになった
（メモ：※grunt-autoprefixerはv0.6.0で対応。12/23か24にはリリースの見込み）