にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2017/06/21. 12:23:14.

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ページが詳しく参考になりました。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

--- 当サイト内を検索 ---