花見酒（グラデーション）: CSS昔話 Advent Calendar 2015
この記事はCSS昔話 Advent Calendar 2015 5日目のエントリーです。
一部、事実と異なる部分があります。
幼なじみの二人。
そろそろWeb 2.0風のデザインが評判なので 「ひとつグラデーションを使ってみようじゃねえか」 と、話がまとまった。
ところが、あいにくCSS2.1の勧告もしていない。
そこで兄貴分がオツなことを考えた。
Internet Explorerの独自プロパティに Gradient関数を借り込んで 前景と背景の間にグラデーションを表示する
div {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff00,EndColorStr=#ff00cc00);
}
Internet Explorerは、Netscape Navigatorがなくなるとすぐにシェアがふえるものなので、 みんなIE5.5やIE6でへべれけになっているところにグラデーションを表示すれば全く問題ない。
CSSを使ってグラデーションを表示する という、何のことはないブラウザ対応である。
そうと決まればIEの腐らないうちにと、 二人はfilterプロパティを差し担いで、FFFTPでアップロードする。
着いてみるとWindowsでもMacでも、IEユーザーで大にぎわい。
さあ商売だ という矢先、風下からFirefoxがシェアを伸ばしてきて、 IE以外のブラウザも対応しなければならず、もうたまらなくなった。
そこで、グラデーションがでないと都合が悪いから、 兄貴、画像で切り出してくれ と言いだして、スライスをつかってグビリグビリ。
Movable Type 4.xを使っていた兄貴分も、 見出しのグラデーションを大きめの画像を準備してグイーッ。
俺も画像をもう一枚、 じゃまた俺も、 それ一枚もう一枚 とやっているうちに、 IE5.5はきれいさっぱりなくなってしまった。
2010年ごろには、二人はもうグデングデン。
「感心だねえ。この難しそうなデザインをクロスブラウザで再現できるとは。 けれど、二人とも画像しか使ってないのはどうしたわけだろう」 「なーに、そのうちCSS3とかいうのを見せてくれるのさ」
少し前ぐらいから、 CSS3なんて、おもしろい技術があるから使ってみよう ということで、セミナーなどで披露されていた。
ところが、肝心のグラデーションの構文が、 FirefoxとWebkitを斜めにしようが、どうしようが、まるっきり違う。
div {
background: -moz-linear-gradient(top, #000, #fff); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)); /* Webkit */
}
「いけねえ兄貴、2011年でブラウザの仕様がまた変わっちまった」 「えー、お気の毒さま。またどうぞ」
またどうぞも何もない。
2011年の初めでWebkitやIE10などでlinear-gradient関数はほぼ統一したが、当時のブラウザに対応するともうカオス。
div {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
/* ここから2011年はじめに統一された構文 */
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(top, #000000 0%,#ffffff 100%);
}
制作者があきれて帰ってしまうと、 まだグラデーションを頑張ってる二人、CSS3 PIEのポリフィルを試そうと、 behaviorプロパティのhtcの中をあけてみると、 とんでもなく重くて、結局IEのfilterを使い始めた。
それから2年後の2013年になった兄貴のCSS。
div {
background: linear-gradient(to bottom, #000, #fff);
}
「兄貴、まだグラデーションの構文がブラウザによってカオスなのに、 ベンダープレフィックスも古い構文も書かないというのは？」
「馬鹿野郎、2011年7月と9月の仕様を見ろ。 方向の角度指定が、反時計回りから時計回りに。 またキーワードtoで、 topキーワードは to bottomキーワードへ、leftキーワードは to rightキーワードへ。 グラデーションの仕様が行ったり来たりしているうちに、 ベンダープレフィックスも構文もよくわからねぇから、 みんなautoprefixerを使っちまったんだあ」
「あ、そうか。そりゃムダがねえや」
参考