nuxt.js(v2)でIE11対応をする（CSS編）

■動作確認済みバージョン

- nuxt.js(2.11.0)
- create-nuxt-app(v2.12.0)

■更新履歴

- 2020/2/5 最新のバージョンに合わせてリライトしました。
  - .browserslistrcファイルが使えるようになりました。
  - autoprefixerのgrid対応方法を変更しました。

---

特に設置の必要はありません（cool!）。以下に、確認・変更のポイントを記載します。

## 対応ブラウザの確認方法

対応ブラウザは「[browserslist](https://www.npmjs.com/package/browserslist)パッケージ」で確認します。ターミナルで`% npx browserslist`を実行してください。

```terminal:terminal
% npx browserslist

ディフォルト設置の対応ブラウザ
↓
and_chr 79
and_ff 68
and_qq 1.2
and_uc 12.12
android 76
baidu 7.12
chrome 79
chrome 78
chrome 49
edge 18
edge 17
firefox 72
firefox 71
firefox 70
firefox 68
ie 11
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
opera 64
opera 63
safari 13
safari 12.1
safari 5.1
samsung 10.1
samsung 9.2
```

Tips:browserslistパッケージはNuxt.js導入時にインストール済みです。`% npm ls browserslist`を実行しても見つからない場合は、`% npm i -D browserslist`を実行してインストールしてください。

## 対応ブラウザを変更

ルート(package.jsonと同階層)に「.browserslistrc」ファイルを作成し、ディフォルト(defaults)、他必要な設定を追加してください。設定方法は[公式ドキュメント](https://github.com/browserslist/browserslist#full-list)を参照してください。

```text:.browserslistrc
defaults
android>=4.4
not IE 11
```

Tips:ディフォルト（defaults）の設定は、`> 0.5%, last 2 versions, Firefox ESR, not dead`です。

Tips:Nuxt.jsのバージョンが古いなどの理由により、.browserslistrcファイルが無効になる場合があります。package.jsonの利用も検討してください。

#### package.json版の記載例

```json:package.json
{
  ...
  "browserslist": [
    "defaults",
    "android >= 4.4",
    "not IE 11"
  ],
  ...
}
```

## autoprefixerのgrid対応

公式ドキュメント[postcss](https://ja.nuxtjs.org/api/configuration-build/#postcss)の項を参考にnuxt.config.jsファイルを修正します。Nuxt.jsの公式ドキュメントでは`{ grid: true }`を利用してますが、trueは廃止予定なので[autoprefixerのドキュメント](https://github.com/postcss/autoprefixer#options)を参考に`'autoplace'`を指定します。
↓

```javascript:nuxt.config.js
export default {
  build: {
    postcss: {
      preset: {
        autoprefixer: { grid: 'autoplace' }
      }
    }
  },
...
```

Tips:nuxt.jsのディフォルトは`false`です。

Tips:`'autoplace'`を指定すると、`repeat()`(自動配置の一部)を有効にできます。しかし、`auto-fill` `minmax()`などの自動配置はIE11では再現できません。

Tips:`true`と同等の動作は`no-autoplace`です。

## 動作確認

ディフォルトのままで、gridレイアウトにCSSプリフィックスが挿入されるか確認します。

```text:.browserslistrc
defaults
```

```vue:test.vue
<template>
  <div class="testbox">
    <div class="testbox__item_1">
      test1
    </div>
    <div class="testbox__item_2">
      test2
    </div>
    <div class="testbox__item_3">
      test3
    </div>
    <div class="testbox__item_4">
      test4
    </div>
  </div>
</template>

<style scoped>
.testbox {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 50px 1fr;
}

.testbox__item_1 {
  box-sizing: border-box;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  background-color: red;
  padding: 10px;
}

.testbox__item_2 {
  grid-column: 2 / 2;
  grid-row: 1 / 1;
  background-color: blue;
}

.testbox__item_3 {
  grid-column: 1 / 2;
  grid-row: 2 / 2;
  background-color: yellow;
}

.testbox__item_4 {
  grid-column: 2 / 2;
  grid-row: 2 / 2;
  background-color: gray;
}
</style>
```

##### エビデンス：ChromeDeveloperToolキャプチャ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/217743/e3da4e04-ad65-b473-3299-74c3bcea3fcd.png)

Tips:キャッシュが強く残って確認できない場合は、一度`$ npm run build`をしてから、改めて動作確認をしてください。



---

### おまけ

Nuxt.jsのバージョンが上がり、気がついたら「.browserslistrc」ファイルが動作するようになってました（ウォッチ漏れ反省）。素晴らしい変更だと思います。

より、シンプルに生きられるようになりました。