css

gulpパイセンにたまに注意されること

正確にはベンダープレフィックス自動付与してくれるgulp-autoprefixerさんからの警告について。見かけるたびにググってる気がするから見つけ次第書く

1.「You should write display: flex by final spec instead of display: box」

■エラー内容

autoprefixer: XXXXXX.css:XXX:X: You should write display: flex by final spec instead of display: box

意訳：「display: box」って書いてるとこ「display: flex」にしよな


■エラー原因
「display: box」 は可変ボックス用プロパティ草案段階のもので、現在は「display: flex」になっている。ちなみに「display: box」が死んだのは2012年のことなので、アサインされた環境のコードが余程化石化石してる場合にしか出会わないエラーだと思われる
参考：CSS3 Flexbox: display: box vs. flexbox vs. flex


 ■修正方法

2.「Gradient has outdated direction syntax.」

■エラー内容

autoprefixer: XXXXXX.css:XXX:X: Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".

意訳：グラデ方向の指定方法「right」とか書いてるなら「to left」みたいに変更してな


■エラー原因
linear-gradientの方向指定が古い時に出る。エラー文を斜め読みして「ああ！？rightなんかどこでも指定してないんだけど！？」って一度はみんななるはず。なるよね？？？
top → to bottom
left → to right
って具合に書き換えればOK


 ■修正方法