花見酒（グラデーション）: 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はきれいさっぱりなくなってしまった。
「感心だねえ。この難しそうなデザインをクロスブラウザで再現できるとは。 けれど、二人とも画像しか使ってないのはどうしたわけだろう」 「なーに、そのうち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を使い始めた。
div { background: linear-gradient(to bottom, #000, #fff); }
「兄貴、まだグラデーションの構文がブラウザによってカオスなのに、 ベンダープレフィックスも古い構文も書かないというのは？」
「馬鹿野郎、2011年7月と9月の仕様を見ろ。 方向の角度指定が、反時計回りから時計回りに。 またキーワードtoで、 topキーワードは to bottomキーワードへ、leftキーワードは to rightキーワードへ。 グラデーションの仕様が行ったり来たりしているうちに、 ベンダープレフィックスも構文もよくわからねぇから、 みんなautoprefixerを使っちまったんだあ」
花見酒(はなみざけ） 落語: 落語あらすじ事典 千字寄席
CSS Image Values and Replaced Content Module Level 3
クロスブラウザな css3 linear-gradient が面倒になりそうな件について - ほむらちゃほむほむ
gummygunk
vaporwave
yousharknotpass
pixelskylines
prguitarman
dailybridgerton
kianamaiart
