【Nuxt】IEにCSS変数対応させた話
どうも河口です。
Web開発をしていたら良く聞く話、IEのレイアウトが崩れている!
そんな被害に僕もあったので解決してみました。
原因
僕が出会った原因はCSS変数を使用していたことです。IEでは以下のようなCSS変数に対応していません。
body {
background-color: var(--color);
}対応策
以下のポリフィルを入れてあげます。これだけです。
https://github.com/nuxodin/ie11CustomProperties
具体的にはnuxt.config.jsのscriptの中にポリフィルのurlを入れて読み込みます。
script: [
{
src: 'https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js'
}
]以上で完了です。IEには悩まされます....







![Microsoft Power BI [実践] 入門 ―― BI初心者でもすぐできる! リアルタイム分析・可視化の手引きとリファレンス](/assets/img/banner-power-bi.c9bd875.png)
![Microsoft Power Apps ローコード開発[実践]入門――ノンプログラマーにやさしいアプリ開発の手引きとリファレンス](/assets/img/banner-powerplatform-2.213ebee.png)
![Microsoft PowerPlatformローコード開発[活用]入門 ――現場で使える業務アプリのレシピ集](/assets/img/banner-powerplatform-1.a01c0c2.png)


