【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には悩まされます....