CSSのベンダープリフィックスを自動で追加するテクニックまとめ
Posted on 2012-01-18 by kohashiこんにちわ！GTEエンジニアのkohashiです。
みなさん、CSS3してますか？CSS3によって表現は大幅に広がりましたが、一方で対応状況はブラウザによって様々…。
CSSでベンダープリフィックス(-mozとか、-webkitとか…)を複数記述するのはめんどくさいですよね？
というわけで、何とかしてくれる手法をまとめてみました。
Prefixr
Prefixr : http://prefixr.com/index.php
入力したCSSに、ベンダープリフィックスを付与してくれるWebサービスです。
こういうCSSを記述すると…
#test {
border:5px #222 solid;
border-radius:10px;
transform:skew(5deg,5deg);
background: linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
}
こんな形に変換してくれます！
#test {
border: 5px #222 solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transform: skew(5deg,5deg);
-moz-transform: skew(5deg,5deg);
-o-transform: skew(5deg,5deg);
-ms-transform: skew(5deg,5deg);
transform: skew(5deg,5deg);
background: -webkit-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: -moz-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: -o-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: -ms-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
}
また、Prefixrにはcssをワンライナーに圧縮する機能もついています。（”Compress My Code”のチェックを入れるだけ）
Webサービスでココまでやってくれるのは嬉しいですね。
vim用のプラグインも有るみたいなので、『CSSはvimで書く！』という人には良いですね。
-prefix-my css
-prefix-my css : http://prefixmycss.com/
Prefixrと同じような感じの、ウェブサービス型。
#test{
border:5px #222 solid;
/*border-radius*/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
/*transform*/
-webkit-transform:skew(5deg,5deg);
-moz-transform:skew(5deg,5deg);
-ms-transform:skew(5deg,5deg);
-o-transform:skew(5deg,5deg);
transform:skew(5deg,5deg);
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,color-stop(#e1ffff,0),color-stop(#e1ffff,0.07),color-stop(#e1ffff,0.12),color-stop(#fdffff,0.12),color-stop(#e6f8fd,0.3),color-stop(#c8eefb,0.54),color-stop(#bee4f8,0.75),color-stop(#b1d8f5,1));
background:-webkit-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: -moz-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: -o-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
}
インデント付けてくれるのでPrefixrと比べて見やすい方をお好みで、でしょうか。
※ background:-webkit-gradient の変換などに差異があり、-webkit-gradientのものはうまく動かないですね。
-prefix-free
-prefix-free : http://leaverou.github.com/prefixfree/
javascriptベースでCSSを書き換えてくれます。
<script src="prefixfree.js"></script>
このようにjsファイルを読み込むだけで、で書いたcssやで読み込んだcss、DOMエレメントのstyle要素に記述したcssはもちろん、javascript経由で設定するcssまで適用してくれます！
ファイルサイズは5KBと軽量なうえ、jQuery等のライブラリに依存することもありません。
なによりすごいのは、javascript経由で設定したstyleまでベンダープリフィックスをつけた形で適用してくれること。
・・・もっとも、この機能はchromeとoperaで正常に動作しないそうです。
そのため、-prefix-free の jQueryプラグインを導入して、 $('#obj').css('transform', 'rotate(30deg)') などとするほうが良いようですね。
compass
compass: http://compass-style.org/
これがベンダープリフィックス追加も含めた本命になると思います。
Rubyベースの、CSS構築フレームワークです。『CSSを生成するためのメタ記述が可能な言語』というところでしょうか。
同じシンプルな記述からCSSを生成することで有名なSassの拡張として作られています。
.scssというファイルに記述したCSSっぽい内容のものを、変換（コンパイル）して使います。
導入は、Rubyが導入されていれば簡単です。（winの人は適当に導入しておきましょう）
$ gem update --system
$ gem install compass
たったこれだけで導入完了！
■はじめて使う
## 基本ファイル作成
$ compass create
## 変更監視して、自動コンパイル
$ compass watch
■Railsプロジェクトに導入
$ rails new
$ compass init rails
先ほどと同じCSSを変換してみましょう。
compass create を実行して出来たファイル /sass/screen.scss を編集します。
記述がちょっと違うので注意が必要ですね。
@import "compass/css3/";
#test {
border:5px #222 solid;
@include border-radius(10px); /* 記述がだいぶ違うので注意です */
@include skew(5deg,5deg); /* "transform"が不要です */
@include background(linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%));
}
編集が終わったら、 compass compile です。
@charset "Windows-31J";
/* line 3, ../sass/screen.scss */
#test {
border: 5px #222 solid;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* 記述がだいぶ違うので注意です */
-moz-transform: skew(5deg, 5deg);
-webkit-transform: skew(5deg, 5deg);
-o-transform: skew(5deg, 5deg);
-ms-transform: skew(5deg, 5deg);
transform: skew(5deg, 5deg);
/* "transform"が不要です */
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e1ffff), color-stop(7%, #e1ffff), color-stop(12%, #e1ffff), color-stop(12%, #fdffff), color-stop(30%, #e6f8fd), color-stop(54%, #c8eefb), color-stop(75%, #bee4f8), color-stop(100%, #b1d8f5));
background: -webkit-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
background: -moz-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
background: -o-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
background: -ms-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
background: linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
}
出力結果もだいぶ違いますね！
普通にコンパイルすると、このcssは、.scssファイルの何行目か…という情報がコメントとしてついてきます。
なお、圧縮コンパイルするには compass compile -s compressed sass/* を使います。
#test{border:5px #222 solid;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;-moz-transform:skew(5deg, 5deg);-webkit-transform:skew(5deg, 5deg);-o-transform:skew(5deg, 5deg);-ms-transform:skew(5deg, 5deg);transform:skew(5deg, 5deg);background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e1ffff), color-stop(7%, #e1ffff), color-stop(12%, #e1ffff), color-stop(12%, #fdffff), color-stop(30%, #e6f8fd), color-stop(54%, #c8eefb), color-stop(75%, #bee4f8), color-stop(100%, #b1d8f5));background:-webkit-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);background:-moz-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);background:-o-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);background:-ms-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);background:linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%)}
compassには、css3のレイアウトフレームワーク：Blueprintが使えたり、変数などを使ってcssを記述できるscss記法が使えたりと色々高機能ですね！
compass watch を使えば、毎回コンパイルする必要なくファイル変更時に自動コンパイルしてくれるのも、開発効率が上がりそうで良い感じです。
また、コマンドラインが面倒くさい！という人のために、アプリ版がオススメ。
http://mhs.github.com/scout-app/
こちらはwin版/Mac版があり、Ruby実行環境も不要！
デザイナーさん向けにはこちらが良いかもしれませんね。