ベンダープレフィックスを良い感じにしてくれる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;

linear-gradientの記述を極限まで減らす

Compassで@include linear-gradientすると

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dd8099), color-stop(100%, #d86c89));
background-image: -webkit-linear-gradient(#dd8099 0%, #d86c89 100%);
background-image: -moz-linear-gradient(#dd8099 0%, #d86c89 100%);
background-image: -o-linear-gradient(#dd8099 0%, #d86c89 100%);
background-image: linear-gradient(#dd8099 0%, #d86c89 100%);

みたくベンダーだらけな挙句に古い記述まで混ざっててうんざりする。

これをもっと減らせないかなーと思ってブラウザの対応状況を調べてみたところ、PC版のSafariとAndroid Browser以外はベンダーなしに対応してた。AndroidはAndroid Browserしか調べてないけど。

ということは、

background-image: -webkit-linear-gradient(top, #f00, #fff);
background-image: linear-gradient(to bottom, #f00, #fff);

だけでいけちゃうっぽい。

これをSCSSのmixinにしたいんだけど、プレフィックス有りと無しで角度の基準位置と進行方向が違うみたいで（有りは水平から90度の位置から時計回り、無しは0度の位置から反時計回り）、プレフィックス無しの角度をθ（単位はdeg）だとしたらプレフィックス有りの角度は

θ * (-1) + 90deg

となる。

以上を踏まえてこんな感じになった。str-index使ってるのでSass 3.3から対応。

gist6623270

$startの形式は 135deg, to bottom right, top left (非推奨) のいずれか。 deg以外の単位はめんどくさくて対応してない。

Safariの開発版がどうなってるか気になるけど、対応してても正式リリース後の数ヶ月は待ったほうがいいかなと思う。もし対応してたら来年の春には一行で記述できるようになる幸せな未来が待ってると思う。

gruntでテンプレート変数に基づいたconcat

HTMLをパーツごとに分割して開発して、最後にconcatして１つのファイルに統合したい状況になったのでサクッと書いてみました。

gist6596364

設定

template_concat:
  'html/dest/index.html': 'html/src/index.html'
  'html/dest/page-1.html': 'html/src/page-1.html'

各種HTMLファイル (page-1.htmlは割愛)

html/src/index.html

<%= module/header.html %>
<%= module/content.html %>
<%= module/footer.html %>

html/src/module/header.html

<html>
<head>
<title>My Home Page</title>
</head>
<body>

html/src/module/content.html

<p>Hello, World!</p>

html/src/module/footer.html

</body>
</html>

出力

html/dest/index.html

<html>
<head>
<title>My Home Page</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

KeyRemap4MacBookでキー配置変更してみた

シングルクォートが打ちにくすぎてめんどくさくなってダブルクォートを入力しちゃうのでアンダースコア+Shiftにもシングルクォートを割り当てようと思って KeyRemap4MacBookでキー配置を変更してみました。名前にMacBookとか入ってるけど普通にiMacでも使えた。

インストールして再起動したら、公式ドキュメントに従ってprivate.xmlを変更してChange Keyの項でチェック入れるだけでOK。

gist6591922

ただ、private.xmlを書いてるときにキーコードの名前の一覧的なのがオンラインになくて困ったのでパッケージ内を探してみたら

KeyRemap4MacBook.app/Contents/Resources/symbol_map.xml

にありました。

あと、BACKQUOTEはJIS_ATMARK, VK_SHIFTといった具合にキーボードがJIS配列の場合はJIS配列用に書き換えないと不具合が出るものもあるので注意が必要。