<dt><dd>要素をグリッドに配置したい、IE11で！

<dl>要素の項目を定義リスト風に整列して表示する例が、MDNのガイド — CSS グリッドレイアウトでの自動配置に載っています。各<dt>要素にぶら下げる<dd>要素の個数がバラバラでも対応できるので便利です。

このレイアウト、IE11でも表示できるでしょうか？
IE11の場合、CSSのgrid関連プロパティについてはベンダープレフィックス-ms-が必要になりますが、MDNのサンプルのCSSを単純にIE11用に書き換え、IE11で表示してみました。残念ながら（案の定？）下図のとおりレイアウトが崩れてしまいます。

そこで今回は、このサンプルをIE11でも表示できるようにする方法のメモです。

まず、MDNのサンプルで使われているマークアップはこれです。

html

<div class="wrapper">
   <dl>
       <dt>哺乳類</dt>
       <dd>猫</dd>
       <dd>犬</dd>
       <dd>鼠</dd>
       <dt>魚類</dt>
       <dd>グッピー</dd>
       <dt>鳥類</dt>
       <dd>ハクセキレイ</dd>
       <dd>フクロウ</dd>
   </dl>
</div>

次にCSS。装飾や書式を除いてグリッドレイアウトに関わるコードのみ示します。コードはとてもシンプルで、セレクターdtとddにgrid-columnを指定するだけで自動配置できるというのがポイントです。

css

dl {
  display: grid;
  grid-template-columns: auto 1fr;
}
dt {
  grid-column: 1;
}
dd {
  grid-column: 2;
}

このCSSをIE11にも対応させてみましょう。こちらのブログ記事を参考にさせていただきました。

参考： CSS GridをIE11、EDGEに対応させるために注意する点

grid-*プロパティをベンダープレフィックス-ms-付きのものに書き換えます。

css

dl {
  display: grid;
  display: -ms-grid;  /* IE11 */
  grid-template-columns: auto 1fr;
  -ms-grid-columns: auto 1fr; /* IE11 */
}
dt {
  grid-column: 1;
  -ms-grid-column: 1; /* IE11 */
}
dd {
  grid-column: 2;
  -ms-grid-column: 2; /* IE11 */
}

このCSSで一旦IE11に適用した状態が冒頭に示した画面キャプチャです。 <dt>要素と<dd>要素の配置先の列は正しいですが、全部１行目に表示が重なってしまいました。IE11の場合、アイテムの配置先となるグリッドセルの行番号もプロパティ-ms-grid-rowで指定してやらないといけません。おまけに-ms-grid-rowはauto値を認識しないようです。

CSS Grid auto placement in IE/EDGE

ならば、HTMLのソースに対応させて「何番目のddは何行目に配置」という情報をもとにセレクターddを:nth-of-type()を使って必要な分だけ書き下すという方法も考えられます。しかし、IE11だけのためにそんなことするのは、元々のシンプルなCSSで書ける利点が台無しになりバカげています。

そこで、-ms-grid-rowについてはJavaScriptから値を設定してやることにします。コードの最初にブラウザがIEかどうかをチェックし、IE以外の場合はそれ以降のコードを実行しないようにしてあります。ブラウザの判定にはUAParser.jsを使用しました。

javascript

function fixIEGrid() {
  // ブラウザ判定
  const parser = new UAParser();
  const ua = parser.getResult();
  if (ua.browser.name != 'IE') {
    return;
  }

  // for IE11
  const dl = document.querySelector('.wrapper dl');
  let row = 1;
  let el = dl.firstElementChild;
  while (el) {
    if (el.localName == 'dt') {
      el.style.msGridRow = row;
    } else if (el.localName == 'dd') {
      el.style.msGridRow = row++;
    }
    el = el.nextElementSibling;
  }
}

fixIEGrid();

結果、IE11でも定義リストのレイアウトを正しく表示できました。

完成したコードはこちら： https://codepen.io/kaz_hashimoto/pen/rNYqmVd