【Nuxt】IEにCSS変数対応させた話
2020-09-02
azblob://2022/11/11/eyecatch/2020-09-02-css-variable-support-for-ie-000.jpg

どうも河口です。
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には悩まされます....