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


 ■修正方法
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// before
ul {
 display: -webkit-box;
 display: -moz-box;
 li {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
 }
}
 
// after
ul {
 display: flex;
 justify-content: space-between;
 
 li {
  align-items: center;
 }
}




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


 ■修正方法
?
1
2
3
4
5
// before
background: linear-gradient(top, #e66465 30%, #9198e5);
 
// after
background: linear-gradient(to bottom, #e66465 30%, #9198e5);