Lea Verouのフレシキブルな複数行定義リスト

Lea Verouの編み出したフレキシブルな複数行定義リストは目からウロコだった。このテクニックを知るまではfloatを使うと長い時(コンテンツ幅に収まらない時)に途中で改行とかうまくできないけどまぁしょうがないか……みたいな感じで我慢していた。LF(やCR)を擬似要素経由で挿入してwhite-space: preで改行させてしまうというのは頭良い。ただ複数のdd要素を持つケースにはうまく対応できないのでちょっと変えて使い始めた。

このテクニックはつまりdt要素とそれとセットになったdd要素を一行に並べるというもの。表的なものならばそれは単にマークアップが間違っているのでtable要素でマークアップし直した方が適切だけど、dl要素のが適切なケースも多くあるのでこのテクニックが生かされる場面は多い。

dt,
dd {
  display: inline;
}

dd + dt:before {
  content: "\000a";
  white-space: pre;
}

Lea Verouのオリジナルはdd要素の後に改行を追加するけど、変更したやつではdt要素の前に追加するようにした。それだけでは最初のdt要素の前に空行ができるので、隣接セレクターでdd要素の次に来るdt要素に絞る。

:first-child擬似クラスを使っても書ける。

dt,
dd {
  display: inline;
}

dt:before {
  content: "\000a";
  white-space: pre;
}

dt:first-child:before {
  content: "";
}

こっちの方が直観的な気もする。けどセレクターの節約が身についてきたので隣接セレクターを使うことにした。隣接セレクターも:first-child擬似クラスもInternet Explorer 7以降での対応だし、そもそも:before擬似要素が8以降なので互換性という点ではあまり変わらない。

white-spaceプロパティーと改行コードを組み合わせて改行をさせるテクニックはMedia Queriesと相性いいんじゃないかと思う。狭い画面ではwhite-space: preを使って改行させて、余裕のある広い画面ではwhite-space: normalでいっぱいいっぱいに表示するとか(もちろん逆でも良い)。

また、普通にマークアップする場合にはちゃんと考えてbr要素を使うべきところでは使うべきだと思う(レスポンシブにしたいならdisplay: noneすれば改行されなくなるし)けど、JavaScriptで吐くコンポーネントでなるべくHTMLを使いたくないなどというケースではうまくこういうテクニックを使って安全側に倒した実装にできるんじゃないかとかなんとか。