2015年10月 4日(日) 15時15分59秒 [Web関連]

CSS3のlinear-gradientでベンダープレフィックスを外すとグラデーションが消える場合の記述ミス

CSS3のlinear-gradientを使ってグラデーションを描画しようとしたときに「-moz-」や「-ms-」のような各種ベンダープレフィックスを削除すると、グラデーションが一切表示されなくなってしまう現象に遭遇して数分だけ悩んだので(^_^;)原因と対処法をメモしておきます。
簡単に言えば、以下の3点ということなんですが。

• 古い仕様を使ってlinear-gradientの値を記述していた。
• ベンダープレフィックスを付けていれば、古い仕様の記述方法でも意図通りに解釈してくれていた。
• ベンダープレフィックスを付けない場合、古い仕様での記述は無視される。

……というわけで、ベンダープレフィックスを外すと、グラデーションが消えてしまったのでした。^^;

問題は、linear-gradientの値に「グラデーションの開始点」を記述している場合です。開始点を指定するのは古い仕様で、(今のところの)最終仕様では「グラデーションの方向(角度)」を指定しなければならず、記述方法が変わっています。
以下に簡単に解説しておきます。

CSS3のlinear-gradientで先頭に始点を表すキーワードを書くのは古い仕様

linear-gradientに指定する値で、先頭に「グラデーションを開始する位置」の意味で「top」や「left」みたいなキーワードを記述しているなら、それは古い仕様です。linear-gradientの先頭には「開始位置」ではなく「方向(角度)」を指定する仕様になったので、キーワードを使うなら「to bottom」とか「to right」のように記述する必要があります。(省略は可能です。)

例えば、ベンダープレフィックス「-moz-」や「-ms-」を付けて黄色から緑色へのグラデーションを記述する場合、以下のような感じで書いていました。

background-image: -moz-linear-gradient( top, yellow, green ); /* Firefox用の古い記述方法 */
background-image: -ms-linear-gradient( top, yellow, green ); /* IE用の古い記述方法 */

ここでは、先頭に「top」と記述しているので、「上から下へ向かってグラデーションが描かれます。このように「開始点」を指定するのは古いlinear-gradientの書き方です。なので、ここから単純にベンダープレフィックスを外して以下のように記述してしまうと、グラデーションは描かれません。

background-image: linear-gradient( top, yellow, green ); /* 間違い */

上記のようにすると、単に無視されてしまいます。(^_^;)

グラデーションの「始点」ではなく「方向(角度)」を指定する仕様になっている

linear-gradientの正しい記述(というか今のところの最終仕様)では、先頭には「始点」ではなく「方向(角度)」を指定します。

background-image: linear-gradient( to bottom, yellow, green ); /* 方向を指定する場合 */
background-image: linear-gradient( 180deg, yellow, green ); /* 角度を指定する場合 */

上記のように、先頭には方向を示す「to bottom」か、角度を数値(単位は「deg」)で指定します。
「to bottom」だと「上から下」の意味です。「180deg」でも同様に「上から下」の意味です。
したがって、

• (開始点を示す)古い書き方での「top」は、
• (方向を示す)最終仕様での「to bottom」や「180deg」と等しい

……ということになります。
なお、方向(角度)は省略可能なので、以下のようにグラデーションの色だけを指定する記述でも構いません。

background-image: linear-gradient( yellow, green ); /* 方向(角度)を省略 */

この場合は、角度は「0度( 0deg )」を指定したことになるので、下から上へ向かってグラデーションが描かれます。

諸々のベンダープレフィックスを含めた書き方と、CSS3最終仕様での書き方

もはや、linear-gradientにベンダープレフィックスが必要なほど古いブラウザは考慮しなくて良いのではないかと思います。
残念ながらIEの場合はIE9以下では非対応ですが、これはベンダープレフィックスを付けても非対応なので(^_^;)気にする意味がありません。(IE用のベンダープレフィックス「-ms-」は、IE10のプレビュー版向けにだけ必要でした。IE10の正式版では不要です。)
ただ、ベンダープレフィックスを外しただけの記述が正しい文法だと思ってしまうと、グラデーションが表示されなくなってしまうので注意が必要、という話でした。

古い書き方と、最終仕様での書き方とを比べると、以下の通りです。

/* ▼ベンダープレフィックス付きの各種古い書き方 (＆IE9以下用の独自filterプロパティも含む) */
background: -webkit-gradient(linear, left top, left bottom, from(#0000ff), to(#ccffcc)); /* Chrome,Safari */
background: -moz-linear-gradient( top, #0000ff, #ccffcc ); /* Firefox */
background: -ms-linear-gradient( top, #0000ff, #ccffcc ); /* IE10(P) */
background: -o-linear-gradient( top, #0000ff, #ccffcc ); /* Opera */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff0000ff,EndColorStr=#ffccffcc); /* IE9以下 */

/* ▼ベンダープレフィックスなしの記述方法
background: linear-gradient( to bottom, #0000ff, #ccffcc); /* CSS3 */

上記の記述では、どの場合も、上から下へ向かって、青色から淡い緑色にグラデーションします。
古い記述で「top」と書いた場合は、新しい記述では「to bottom」と書く必要がある点に注意です。(または 180deg と書いても同じ。)
表示例は以下の通りです。

個人的には、「to bottom」とか「to top right」みたいなキーワードよりも、下記のように「180deg」とか「45deg」みたいな数値(角度)を指定する方がわかりやすい上に微調整もしやすくて望ましい気がしています。

background: linear-gradient( 180deg, #0000ff, #ccffcc);

補足

なお、このlinear-gradientを駆使してCSSで斜線を引く方法を以前All Aboutで解説していますので、よろしければそちらもご参照下さい。(^_^;)
→ 表の空っぽのセルにだけ、CSSで斜線を引く方法(＠All About ホームページ作成)

また、linear-gradientの仕様の変遷については、MDNのlinear-gradientページが詳しく参考になりました。