パフォーマンスからみるSass/Compass 番外編:MSは青かった

2回も続いてないのにまさかの番外編!ここぞ変化球!キエル消える魔球!!

ってことで、最近Androidの相手ばかりしていて、「IE… そんな女もいたよね」って感じでしたが、ちょっとハマったので忘備録。グラデーションを使ったデザインをCSSで再現しようとした話。ということでCSSグラデーションのスニペットをUltimate CSS Gradient Generatorで吐き出してみたんですわ。

/* CSS */
.gradient {
 background: -moz-linear-gradient(top, #000 0%, #595959 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#595959));
 background: -webkit-linear-gradient(top, #000 0%,#595959 100%);
 background: -o-linear-gradient(top, #000 0%,#595959 100%);
 background: -ms-linear-gradient(top, #000 0%,#595959 100%);
 background: linear-gradient(to bottom, #000 0%,#595959 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#000’, endColorstr=‘#595959’,GradientType=0 );
}

まぁ、こんな感じなのができますわな。で、意気揚々とIEでチェックしてみたらグラデーションが青かったんですよ!黒色のグラデーションが青かったんですよ!びっくりデスヨ!

同僚の@hilokiさん曰く、どうやら僕がstartColorstrの部分のHEXカラーを#000000ではなく、#000であとで修正したらからイケなかったらしいです。ちゃんと6バイトで記述したらイケました。どうやらこうゆうことらしいですよ↓

IE does recognize hex colors, but not the kind you’re using. Only those with 6 hexadecimals (#RRGGBB) or 8 hexadecimals (#AARRGGBB; only works in the gradient filter!) will work. It will also accept named colors.

Why does this CSS gradient show up with the wrong colours in IE 7? - Stack Overflow

短縮コード理解できないってどんだけ◯◯なんだよ!ったく!そんな!#000000とか見たら#000にしたくなっちゃうだろ!それが人の性ってもんでしょうに!って同僚に言ったら、そうでもないらしいですね….

まぁ今回は僕の手癖が悪かったからしょうが無いとしても、縮小化ツールによっては短縮しちゃうものもあるでしょ?というかSassの:compressedにしたら短縮してしまうやん(v3.1.20はしなかったけど)どーしたらいいですかね…

Compass: ie-hex-str()

まぁ同じような問題にぶち当たった人も多く、回避策としてはどうやらie-hex-str()ってCompassの関数を使えば良いとのこと。 これを使うと、#000やblackと指定しても
// SASS
@import “compass”;
.ms-gradient {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#{ie-hex-str(#000)}’, endColorstr=‘#595959’,GradientType=0 );
}
このようにコンパイルされます。
/* CSS */
.ms-gradient {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FF000000’, endColorstr=‘#595959’,GradientType=0 );
}
8バイトになってるのは、#AARRGGBBってことで、最初の2バイトはアルファ値でFFだから不透明度100%ってことですね。これはIEさん認識できるらしいです。いやしかしですよ、IEごときで、なにゆえCompassをインストールしなきゃならんのか!面倒くさい!ってことで、ブライトネス1%上げて短縮されないように#010101にしました。

そもそも画像でやれよ!って言うのは無しね!HTTPリクエスト減らしてなんぼだかんね!

んで、最初のバグに戻るけどなんで黒いのグラデーションが青色になったのかというと、startColorが#000で認識できなかったので、Default Color が青だからそれが適用されたんだね!

Default. Blue.

StartColorStr Property (Gradient) 

なるほど!バイバイ!