ア！壊れたァ！（レイアウト）

IE死ね

◆結論

autoprefixer：options

◆登場人物

  • IE11
    そびえ立つクソブラウザ。人間の屑。稀代のゴミ。人類の敵。
  • grid
    CSSのプロパティ。便利。便利というか、正しい。
  • autoprefixer
    CSSの実装がブラウザごとに違うから、そのへんの違いをバベる。
  • a
    アンカー要素。そして、どインラ（イ）ン要素。

◆背景

IE11でgridを使用する際は、こういった対応をしなければならない。そのへんはautoprefixerがうまいことやってくれるんだろうなと思っていた。

が、IE11でgridが効かない。F12で開発者モードに入ったところ、autoprefixerが効いていないようだった。なんで。

◆結論（２回目）

autoprefixerに設定をしてやらなければならないようだった。なんでデフォルトで対応してないのかはわからん。なんか理由があるんだろうな。興味ねぇけど。

grid (false|”autoplace”|”no-autoplace”): should Autoprefixer add IE prefixes for Grid Layout properties?
・false (default): prevent Autoprefixer from outputting CSS Grid translations.
・”autoplace”: enable Autoprefixer grid translations and include autoplacement support. You can also use /* autoprefixer grid: autoplace */ in your CSS.
・”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)

– https://github.com/postcss/autoprefixer#options

つまり、falseか”autoplace”か”no-autoplace”をぶち込んでやればいい。基本autoplaceでいいはず。そして、trueでも何となく動いているように思う。けどドキュメント外だからやめたほうがいいね。

▼どっかのconfigやらconfig.jsでautoprefixerを読み込んでたパターン

場所わかんねぇならGrepでもなんでもして見つけろ。VS CodeならCtrl+Shift+Fだ。

autoprefixer({ grid: "autoplace" })

▼package.jsonでautoprefixer設定してたパターン

"postcss": {
  "plugins": {
    "autoprefixer": {
      "grid": "autoplace"
    }
  }
},

▼そもそもautoprefixer使ってなかったパターン

つかえ

◆二本目の糞

aタグを要素としてgrid使おうとしてたんだけど、IE11ではダメ。インライン要素だから。
泣きながらaタグに

display: block;

を噛ませてやると解消する。このチンパンブラウザが！！！

◆三本目の糞

要素が全部初期位置に重なりやがった。

もう顔中、糞まみれや。

「ie11 grid element overlap first position」とかでググったら、こんな記事があって、つまり、自動配置が効いて無いらしい。あほくさ。このナメクジブラウザよ！！！

でもautoplaceって設定に書いた気がするよね。autoplaceも万能ではなくて、効く条件があるらしい。このページみてみてね。

で、まぁCSSが下記のようになった。SCSSという記法で書いている。ピュアなCSS使ってる雑魚野郎兄貴、読み替えてくれ。ごめんぬ。
説明はしないどく。質問とかあったらコメントとかしてくれ。１営業日中に対応するわ。

▼追記

display: grid;
grid-template-columns: repeat(5, auto);
grid-template-rows: repeat(2, auto);

上記のノリでautoprefixerがよしなに配置してくれた。この例だと五列二行だな。
grid-template-rowsの指定を忘れていたがために、追記以下に書いてある例に至ってしまった。下のでも動くけど、CSSの指定辛すぎるからやめた方がいいよ。

そして、どちらにせよレスポンシブでは動かないから、動的に要素を増減させたい時はIE11を窓から放り投げるなり最初から要素を準備（配置）しておいてスクリプトで表示をどうにかするなりしよう。

▲追記以上

grid-template-areas:
  "a b c d e"
  "f g h i j";

a {
  display: block;
  &:nth-of-type(1) {grid-area: a;}
  &:nth-of-type(2) {grid-area: b;}
  &:nth-of-type(3) {grid-area: c;}
  &:nth-of-type(4) {grid-area: d;}
  &:nth-of-type(5) {grid-area: e;}
  &:nth-of-type(6) {grid-area: f;}
  &:nth-of-type(7) {grid-area: g;}
  &:nth-of-type(8) {grid-area: h;}
  &:nth-of-type(9) {grid-area: i;}
  &:nth-of-type(10) {grid-area: j;}
}

時代に逆行してる。CSS書いてて時間旅行できるとは思わなかった。

位置が固定じゃないときはSCSSの制御構文を使おう。糞みたいな作業だけど。

◆結論（３回目）

IEよ死ね（呪詛）

◆関係ないこと

::placeholderのautoprefixも効いて無いようなきがする。

◆おまけ

browserslistの書き方と、テスト。

https://github.com/browserslist/browserslist#full-list

https://browserl.ist/