CSS3の-ms-linear-gradientが、いつの間にかいらない子になってた

最近はCSS3のlinear-gradientをよく使うようになってきたこともあり、
今linear-gradientはどう書くのが適切なのかを調べてみました。

今までは、毎回コツコツ書いてられないので、ColorZillaのCSS Gradient Generatorを使ってたのですが、いかんせん長い！
このサイトでグラデーション作るとこんな感じのコードになります↓

.gradient {
  background: url(bg_sample-gradient.png) 0 0 repeat-x;/* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#dddddd 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}

長すぎ。。。コピペじゃないとやってられないです。

ということで、実はもういらないものがあるんじゃないかと思って調べたら、
結果的にはこんな感じに短くできました。
"-ms-linear-gradient"が必要なくなったというのが大きいです。

.gradient {
  background: url(bg_sample-gradient.png) 0 0 repeat-x;/* IE6-9, other old browsers */
  background: -moz-linear-gradient(top, #fff, #ddd);/* FF3.6+ */
  background: -webkit-linear-gradient(top, #fff, #ddd);/* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(top, #fff, #ddd);/* Opera 11.10+ */
  background: linear-gradient(to bottom, #fff, #ddd);/* IE10+, W3C */
}

以下に実際に作ってみました。Chrome10~, Firefox3.6~, Opera11.10~, IE10などではグラデーションが見えるはずです(IEは画像作ってないのでborderしか映りません)。

削除したものとその理由

"filter"(IE6-9)
→3色以上グラデーションできない、このfilterかけたボックスはoverflow:hiddenな状態となる罠があり、子要素をはみ出させられない...などなどこいつには色々と言いたい事がある為、問答無用で削除。
画像をfallbackには使いたくないけどfilterよりはまだマシということで。

”-ms-linear-gradient"
→IE10 Consumer Previewでは有効だったが、IE10 Release Previewでは必要なくなっているっぽい。このブログで触れられていたので確認してみると、確かにIE謹製のGradient Generatorで、linear-gradientの所に "IE10 Release Preview"と書いてある。つまり、リリース時には対応するよということっぽい。
また、HTML5界の有名人PaulIrish氏によると、もうサポートしているブラウザがないので、"-ms-linear-gradient"は削除したとのこと。

※Windows 8 Release Previewを実際に触った訳ではないので未確認情報ですが。おそらく大丈夫なはず。
#8/27追記： IE Blogのこの記事で、もうprefixつける必要がなくなったのでgradient markupの修正を推奨しますとしっかり書かれてました。

"-webkit-gradient(linear..."
→　Safari4.0~5.0、Chrome4.0~9.0に対応するつもりはないので削除。※iOS4.0.4~5.0、Android 2.1~3.0対策をするなら必要。

・・・ということで、既存ソースの膨大な直しが発生することが発覚。わーい。

これから作成するソースはこれで統一しよう。。。