こんにちは！　SVGグラデーション！

複雑でないCSSグラデーションの代わりにSVGグラデーション(をData URIスキーム化したもの)を利用するようにしました。懸念していたFirefoxのバグも直る(直った？)みたいだし、ちょっとやってみたかったので。

SVGの作成はエディタでやってます。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
  <defs>
    <linearGradient x1="0" y1="0" x2="0" y2="100%" id="gradient">
      <stop offset="0%" style="stop-color: ${from:rgb()}; stop-opacity: 1;"/>
      <stop offset="100%" style="stop-color: ${to:rgb()}; stop-opacity: 1;"/>
    </linearGradient>
  </defs>
  <rect x="0" y="0" fill="url(#gradient)"/>
</svg>

こんなテンプレートを作っといて色を指定しているだけ！　これは縦方向のグラデーションのテンプレートです。横方向にしたい場合はlinearGradient要素のx2プロパティの値を100%、y2プロパティの値を0に入れ替えるだけです。色の透明度はstop-opacityプロパティで調整できます(CSSのopacityプロパティと同じで、1で不透明、0で完全透明になります)。

手書きできる程度のものならData URIスキーム化してCSSにぶち込んでも大したサイズではないです。単純な二点間グラデーションなら、ベンダー拡張付きのを並べるのとあまり変わらない程度のサイズで済むでしょう。

他にもベンダー拡張プリフィックス付きのプロパティをだいたい追放したりもしました。SCSSで書いているのでさほど面倒でもないんですけど、使ってたのはだいたい対応されたような感じなのでもう良いかなとか。

Operaでなんかうまく表示できないのは後で直します。

追記

うまく再現できないんですがOperaのバグっぽいので直すのは無理そうな感じです。ページロード時にクライアントエリア外にある要素への背景画像が表示されないことがあるとかそんな感じのバグです。半年くらい前によくわかんなくて投げてたのにまたぶつかるという……。