Nuxt.js で CSS(Sass) をコンパイルすると、ありがたいことに autoprefixer がベンダープレフィクスを自動で適用してくれます。
面倒で不毛な作業を Nuxt は設定不要でレガシーブラウザに対応してくれるわけですが、さらにこれをブラウザの要件に合わせて実装する tips です。
autoprefixer の設定をカスタマイズする
要件や好みに合うようにカスタマイズしたい場合は、次のように nuxt.config.js を記述します。
module.exports = {
build: {
postcss: {
preset: {
autoprefixer: {
grid: true,
},
},
},
}
}
かんたん🍟
ただし、Grid でマージンをコントロールするプロパティの gap に関しては、ポリフィルを適用することができません。
なので、悲しいけれど、これは捨てるという感じですね、IEでは。。
20180515 追記
とか嘆きましたが、なんと autoprefixer v8.5 から、 gap に対応してくれるようになりました＊
これで、gap のIE用のポリフィルも自動で実装できるようになりました！！いい時代！！！
参考
autoprefixer の Grid 対応に関しては @tonkotsuboy_com さんが、詳細を丁寧に解説してくださっています。
関連
Grid の素敵さに関しては、以前記事を書きました。
おわりに
Nuxt.js は SSR / SPA を実装するだけでなく、静的なサイトを構築するのに便利なフレームワークで、コンポーネントを実装するとアトミックデザインの流れに乗ることができます。
とても気に入っているのですが、いろいろな知見が要求される場面がおおいので、本格導入するまでの学習コストは少し高い印象もあります。
基本的なことは公式ドキュメントに綺麗にまとまっていますが、そこにないような小粒な tips をまとめていこうと思います。
Nuxt.js で Sass の導入についてはこちらに書きました。
おわります。