ベンダープレフィックスを良い感じにしてくれるautoprefixerを試した

autoprefixerが良さそげだったので試してみた。 検証にはgruntで使えるgrunt-autoprefixerを使った。

普通に試してみる

.box {
  background-size: cover;
}

まずはオプションなしで↑を変換すると試してみると次のようになった。

.box {
  -webkit-background-size: cover;
  background-size: cover;
}

Can I useの通り-webkitのみ追加された。

次にオプションでブラウザを絞ってみる。

browsers: ['last 2 version']

期待通り正式プロパティのみが残った。

.box {
  background-size: cover;
}

いらないベンダーを削除させてみる

いらないベンダーが記述されている場合は削除してくれるみたいなので試してみる。 この機能のおかげで元ファイルに手を加えずに軽量化が図れるはず。

検証用コードは次のコード。

.boxA {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -khtml-background-size: cover;
  background-size: cover;
}

.boxB {
  -webkit-background-size: cover;
  -moz-background-size: 32px 32px;
  -o-background-size: cover;
  -ms-background-size: cover;
  -khtml-background-size: cover;
  background-size: cover;
}

オプションは

browsers: ['last 2 version']

これを変換してみると

.boxA {
  -ms-background-size: cover;
  -khtml-background-size: cover;
  background-size: cover;
}

.boxB {
  -ms-background-size: cover;
  -khtml-background-size: cover;
  background-size: cover;
}

んんんんんん？

-ms-と-khtml-が残った…。
ただ単にこのプロパティーだからだとは思うけど少し納得がいかない。

あと、.boxBで意地悪して-moz-だけ値を変えてみたんだけど、見事に削除されましたｗｗ まぁ普通は１つのベンダーだけ他の値を設定するなんて状況にはならないと思います。

グラデーションの検証をしてみる

厄介なグラデーションもきちんと変換されるか調べてみる。 検証には次のようなCSSを使用する。

.boxA {
  background-image: linear-gradient(to top left, red, blue);
}

.boxB {
  background-image: linear-gradient(90deg, red, blue);
}

.boxC {
  background-image: -webkit-linear-gradient(top right, red, blue);
}

.boxD {
  background-image: -webkit-linear-gradient(90deg, red, blue);
}

オプションは

browsers: ['last 2 version']

としておく。これできちんと変換されれば前の記事で書いたmixinと同じような出力を吐くはず…！

.boxA {
  background-image: -webkit-linear-gradient(bottom right, #ff0000, #0000ff);
  background-image: linear-gradient(to top left, #ff0000, #0000ff);
}

.boxB {
  background-image: -webkit-linear-gradient(0deg, #ff0000, #0000ff);
  background-image: linear-gradient(90deg, #ff0000, #0000ff);
}

.boxC {
  background-image: -webkit-linear-gradient(top right, red, blue);
}

.boxD {
  background-image: -webkit-linear-gradient(90deg, red, blue);
}

おおおおおおお！！

まさに前の記事で書いたとおりに綺麗にダイエットされました。角度もきちんと変換されてます。

.boxC, .boxDに関してはベンダーのみの記述に対してはあえて変換しないような仕様になってるんだなと判断しました。

総評

全体的にすごく良い。 おかしな挙動をする部分もあるけど、普通に使う分には問題ないと思う。

とにかくブラウザの設定が細かくできるのがありがたい。

とりあえず数日前に自前でCan I Useを参考に作ったCompass用のCSS3 Mixinが早くも要らない子になったのは確か。

追記

grunt-autoprefixerではtransitionにbox-shadowなどのCSS3のプロパティを指定したいときにベンダーを自動で付けてくれるかとおもいきや付けてくれませんでした…。しかも手動で書いても消される…。でもCompass用のほうは大丈夫でした。

-webkit-transtion: -webkit-box-shadow ease-out .2s;
transiton: box-shadow ease-out .2s;