CSSグラデーションでの角度の解釈

CSS Image Values and Replaced ContentモジュールのeditorであるTab Atkins Jr.の名前で、CSS WG Blogやメーリングリスト、CSS3.infoに、グラデーションの角度表記とその方向について意見を募っています。

• Angles in Gradients

linear-gradient()の表記

Image Valuesのlinear-gradient()では、同じグラデーションをいくつかの書き方で指定できます。

たとえば、ボタンなどに浮き上がったように見える効果を与えるため、上に薄い色、下にそれよりも濃い色を指定するケースはグラデーションの最も多いユースケースでしょう。現在の草案で、一番簡単な指定は次になります。

background-image: linear-gradient(#eee, #ccc);

角度による表記を使うと、次のようにも書けます。

background-image: linear-gradient(-90deg, #eee, #ccc);

この例では「-90deg」を加えただけなので冗長に見えますが、垂直/水平でないグラデーションを利用する場合には角度の記述が必要になります。

「-90deg」はどう解釈されるべきか

今回意見を求めているのは、この角度表記とグラデーションが伸びる方向の関係です。ひらたく言うと、「-90度は上向きなのか横向きなのか下向きなのか」ということです。

linear-gradient()の角度は、水平方向の右を0°とし反時計回りに回転するものと解釈されます。360°は0°となり、また負の値は時計回りに回転します。

しかし、角度を扱うtransformプロパティのrotate()関数や、それが参照するSVGにおいては、0°が水平方向右なのは同じものの、反時計回りに回転するのです。

また、感覚的な問題もあります。直接角度と関わるわけではありませんが、borderプロパティなどは上、右、下、左と方位角（0°が北）のような指定順を採用しています。こちらに合わせたほうが感覚的に分かりやすいという意見もあるようです。

というわけで、CSS WGでは次の3つのうちどれが良いかを募っています。

• A ― 現在の仕様を維持（0°は右、反時計回りに回転）
• B ― rotate()などとの一貫性を持たせる（0°は右、時計回りに回転）
• C ― 方位角を採用（0°は上、時計回りに回転）

BかCとなると、現状の実装と互換性がなくなりますから、なかなかに難しい選択でもあります。

追記 (2011-10-20)

その後、2011年7月12日付の草案にて、案Cが採用された新しい仕様に更新されました。たとえば、上から下に変化するグラデーションは、180degとなります。