CSS Gradientにおける"transparent"

1つ前のエントリで「transparentだと完全に透明な黒として扱われるみたい」と書いたが、気になるのでちゃんと調べた。といってもCSS3 Colorの仕様を参照して、現行のブラウザではどうかテスト・ケースを書いて確認しただけだけど。結論としてはChrome (WebKit)とFirefoxでは仕様通りtransparentをrgba(0, 0, 0, 0)と扱っているので、CSSグラデーションでもそれに従った、つまり、グラデーションの途中が黒とブレンドされた色になってしまうので注意が必要になるという話。

Demo: "transparent" keyword in *-gradient()

デモでは左から順に、

• rgb(153, 204, 255) => rgba(153, 204, 255, 0)
• rgb(153, 204, 255) => transparent
• rgb(153, 204, 255) => rgba(0, 0, 0, 0)

と、開始色を統一して、その色の完全透明へのグラデーション、transparentへのグラデーション、rgba(0, 0, 0, 0)へのグラデーションとなっている。終了色そのものはどれも完全に透明な色なので、background-color等で単色として扱う場合には違いはない。しかし、CSSグラデーションでは違いが出てきてしまう。

デモの1つ目に比べ、2つ目はグラデーションが深くなっている。更には中央付近で下端の色(rgb(51, 102, 153))よりも暗くなるという現象まで起きている。比較用に作った3つ目と2つ目の結果が同じなので、どうやら仕様通りtransparent == rgba(0, 0, 0, 0)として扱われているようだ。中央付近で暗くなるのも半透明の黒とブレンドされているからなのだろう。

このように意図しない(意図しないという言い方はちょっとおかしいが)グラデーションになることが殆んどなので、CSSグラデーションではtransparentを使うのは避けたほうが無難だということになりそう。