dl要素で表組み
脚本の台詞とか脚注とか、後は…あんまり使い途ないかもorz
Firefoxが28からflex-flow: row wrap;
に対応してくれたのでdl要素で表組みができるようになった。
テストケース
dl {
display: -webkit-flex;
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
/* Firefox 24 ESR 用の暫定指定 */
@supports not (flex-flow: row wrap) {
dl {
display: block;
}
}
dt {
margin: 1rem 0;
padding: 0;
width: 5rem;
font-weight: bold;
}
dd {
margin: 1rem 0 1rem 1rem;
padding: 0;
width: calc(100% - 6rem); /* dtの幅やddのmargin-leftなどを引く */
}
dt要素の幅を決め打ちしなければいけないのが難点といえば難点。
Firefox、Chrome、IE11で確認。
flexに対応していないブラウザ(IE10以下や古いSafariなど)や、calc()に対応していないブラウザ(Android4.3以下の標準ブラウザなど)は、通常のdlのレイアウトになる(dd要素にmargin-left: 1rem;
を設定しているのでブラウザの初期表示とは異なるが)。
ちなみに、dl要素は会話のマークアップとしては不適切と指摘されているorz
"dl要素で表組み"へのTwitter上でのコメントやRT
4件のツイートがあります。
ツイート 1
asamuzaK.jp : dl要素で表組み / 脚本の台詞とか脚注とか、後は…あんまり使い途ないかもorz http://t.co/qhw6Tv5kFG
ツイート 2
FirefoxのESR版のことを忘れてたw dl { } の下に @supports not (flex-flow:row wrap) { dl { display: block; } } も一時的に付与すればいいかな / http://t.co/qhw6Tv5kFG
ツイート 3
サンプルコードにも反映させた / RT FirefoxのESR版のことを忘れてたw http://t.co/qhw6Tv5kFG
ツイート 4
.@oichinokata そういうことでしたら、 http://t.co/qaouxtBbWZ を参考にしてみてください 使用例は http://t.co/7MpHwawPh8 にあります ただし、W3C的には会話をdl要素でマークアップすることは不適切と考えているようですが…