HTML - Autoprefixer - トラブルシュート - Gradient has outdated direction syntax.

1.　概要

2.　Gradient has outdated direction syntax.

1.　概要

　「gulp」実行中にエラーが発生。

2.　Gradient has outdated direction syntax.

　エラーの内容は。


[14:47:15] Using gulpfile /home/kitayama/npm/gulpfile.js
[14:47:15] Starting 'test'...
[14:47:15] Finished 'test' after 9.15 ms
[14:47:16] gulp-autoprefixer:
  autoprefixer: /.../test.css:2:3: Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.


　:2:3: の箇所、2 の行番号はともかく、3 はカラムではなく語の位置らしい。
　突き詰めて発生個所を絞ったら。


kbd
{
	background-image: linear-gradient(top, #eee, #f9f9f9, #eee);
}


　ちゅうのがいかんらしいのですよ。
　結果が。


kbd {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(#f9f9f9), to(#eee));
  background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee);
  background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee);
  background-image: linear-gradient(top, #eee, #f9f9f9, #eee);
}


　てな感じで出力されております。

　メッセージを解釈すると「top」は古いですよ」と。
　「新しいシンタックスは to left もしくは right ですよ」ということのようなのでソースを


kbd
{
	background-image: linear-gradient(to right bottom, #eee, #f9f9f9, #eee);
}


　と書き換えましたらば、メッセージは出なくなりました。
　結果が


kbd {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#eee), color-stop(#f9f9f9), to(#eee));
  background-image: -webkit-linear-gradient(left top, #eee, #f9f9f9, #eee);
  background-image: -o-linear-gradient(left top, #eee, #f9f9f9, #eee);
  background-image: linear-gradient(to right bottom, #eee, #f9f9f9, #eee);
}


　１行目が微妙に気になりますが・・・、これでよしとしましょう。