【Autoprefixer】ベンダープレフィックスを自動化

レガシーなブラウザーにも対応させるためにCSSではベンダープレフィックス地獄です。。。そんな互換記述を必要に応じて自動的に行ってくれるプラグインがありますのでご紹介します。

環境

Visual Studio Code
win10
＜やりたい事＞
・cssのgridをIE11対応にするためベンダープレフィックスを自動的に記述させたい。
・環境構築などの設定は面倒くさいのでプラグインでどうにかしたい。

Autoprefixer

このプラグインは、自動的にベンダープレフィックスを記載してくれます。
VScodeのEXTENSIONSで「Autoprefixer」と検索するとプラグインが出てくるので、インストール。

ベンダープレフィックスを記載したいCSSをアクティブにして、command palette(Ctrl + Shift + P)を開いて、 Autoprefixer CSS と入力。選択すると実行になります。

.merit_content {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    margin-bottom: 90px;
    & .merit_content_left{
      grid-column: 1;
      grid-row: 1;
    }
    & .merit_content_right{
      grid-column: 2;
      grid-row: 1;
    }
}

Autoprefixer CSS を起動させて保存すると↓

#merit .merit_content {
  display: -ms-grid;
  display: grid;
  gap: 30px;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
      grid-template-rows: auto auto;
  margin-bottom: 90px;
}

#merit .merit_content .merit_content_left {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
}

#merit .merit_content .merit_content_right {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
}

-ms-grid;がちゃんと追加されました！