0

Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。

崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。

HTML

<div class="grid">
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト 
    </div>
    <div class="item">
    テスト
    </div>
</div

gulpfile.js

autoprefixer({
 grid: true,
 browsers: ["ie >= 11"]
})

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}

1 件の回答 1

2

Autoprefixer の grid オプションの true は、 no-autoplace の別名です。しかし、 true という表記は廃止予定になっているため、今後 Autoprefixer を導入する場合、使用するべきではありません。

Options

Function autoprefixer(options) returns a new PostCSS plugin. See [PostCSS API] for plugin usage documentation.

  • grid (false|"autoplace"|"no-autoplace"): should Autoprefixer add IE 10-11 prefixes for Grid Layout properties?
    • "no-autoplace": enable Autoprefixer grid translations but exclude autoplacement support. You can also use /* autoprefixer grid: no-autoplace */ in your CSS. (alias for the deprecated true value)

また、グリッドの自動配置を行なうにもかかわらず、 grid オプションに no-autoplace と同等の役割を持つ true を設定することは不適切です。そのため、今回 grid オプションに設定するべき値は autoplace です。

autoprefixer({
  grid: "autoplace",
  browsers: ["ie >= 11"]
})

次に、グリッドの自動配置は grid-template-rows プロパティ、 grid-template-columns プロパティの両方が設定されていなければ動作しません

Grid Autoplacement support in IE

If the grid option is set to "autoplace", limited autoplacement support is added to Autoprefixers grid translations. You can also use the /* autoprefixer grid: autoplace */ control comment to enable autoplacement

Autoprefixer will only autoplace grid cells if both grid-template-rows and grid-template-columns has been set. If grid-template or grid-template-areas has been set, Autoprefixer will use area based cell placement instead.

Autoprefixer supports autoplacement by using nth-child CSS selectors. It creates [number of columns] x [number of rows] nth-child selectors. For this reason Autoplacement is only supported within the explicit grid.

grid-template プロパティ、もしくは grid-template-areas プロパティなどを使用するのでなければ、前述した 2 つのプロパティを設定してください。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-gap: 1em;
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。