Photoshop CCの「CSSをコピー」を使ってグラデーションを書き出す場合は<angle>指定に注意

デザインカンプはPhotoshopのデーターでもらうことが非常に多く、そこからCSSの書き出しに 以前はCSS3Psを使っていたのですが、Photoshop CCでCSS3Psが使えない。サイトにはそんなことが書かれていないのですが、なぜかインストールできない。

そこで今回初めてPhotoshop CCの「CSSをコピー」を使って、CSSを書き出したのですが、グラデーションを書き出す場合に<angle>指定に注意したほうがいいなぁと思いました。

<angle>

<angle>とは仕様書には、using anglesの箇所に書かれていて、0deg90degのことを指します。

ちなみに、to topto rightはkeywordになります。

ベンダープレフィックス付きのlinear-gradient

「CSSをコピー」を使って、CSS Gradientを書き出したのが仮に以下のようなコードとします。実際に-moz-、-webkit-、-ms-のベンダープレフィックス付きのlinear-gradientのみが書き出されました。

background-image: -moz-linear-gradient( 90deg, #666 49%, #fff 51%);
background-image: -webkit-linear-gradient( 90deg, #666 49%, #fff 51%);
background-image: -ms-linear-gradient( 90deg, #666 49%, #fff 51%);

上記のコードを適用し、ブラウザで確認したところPSD通りになりました。ちなみに下記図のような感じになりました。

PSD通りになっていたので、全くもって気づきませんでしたが、ふとソースコードを見たときに、「ベンダープレフィックス無しのlinear-gradientが書き出されていない」ことに気づきました。

ごく普通にベンダープレフィックスを外せばいいだけだろうと思って下記のように追加しました。

background-image: -moz-linear-gradient( 90deg, #666 49%, #fff 51%);
background-image: -webkit-linear-gradient( 90deg, #666 49%, #fff 51%);
background-image: -ms-linear-gradient( 90deg, #666 49%, #fff 51%);
background-image: linear-gradient( 90deg, #666 49%, #fff 51%);

ブラウザで確認したところ、下記図のような表示になりました。※スマホ向けのサイトですのでWebkit系のブラウザでした確認はしていません。

それはそのはずで仕様書には以下のように書かれています。

If the argument is 'to top', 'to right', 'to bottom', or 'to left', the angle of the gradient line is '0deg', '90deg', '180deg', or '270deg', respectively.

また前のバージョンの仕様書にも以下のように書かれています。

0deg points upwards, 90deg points toward the right,

そのためデザイン通りに下から上へのグラデーションにするためには、下記のような記述にしなければなりません

background-image: linear-gradient( to top, #666 49%, #fff 51%); //0degでもOK

ではなぜ、ベンダープレフィックスがあるlinear-gradientは90degで下から上への仕様通りでないグラデーションになったのでしょうか。

下記ブログにもあるように角度の議論もあったようにCSS Gradientの仕様がころころ変わっていたことが原因のように思います。

CSSグラデーションでの角度の解釈 | Web標準Blog | ミツエーリンクス

まとめ

ベンダープレフィックスがないlinear-gradientを追加する時に、Photoshop CCの「CSSをコピー」を使って書き出されたコードをそのままコピーして追加する場合に<angle>だと現状の仕様通りではないので注意が必要です。現仕の様通りのangleもしくはkeywordに書き直す必要があります。