Recently I lamented the rare usage of the supremely useful directory list, dl. The directory list is a pretty common data structure: one heading, followed by one or more related subsidiary data. It’s appropriate for more situations than it’s used for, probably because so many developers fixate on markup’s visual design rather than its information design. Browser defaults for dl obscure its versatility:
Firefox default for dl
But there are so many occasions for which dl is the obvious data structure, once groomed by applicable CSS styling. As end users adopt standards-compliant browsers with better support for CSS 2+, styling dl into recognizable data structures becomes nearly fun, and will tempt you to try the ridiculous.
For instance, dl adapts readily to become the container for a recipe:
dl as recipe
The CSS for achieving this assumes that you’re using one of those newfangled browsers with excellent support for CSS 2+:
dd {
display: inline;
margin: 0 .25em 0 0;
}
dd:before { content: " First, "; }
dd:after { content: ". "; }
dd+dd:before { content: "Then, "; }
dd+dd+dd:before { content: "Finally, "; }
There’s a similar mechanism for forming dl into a citation:
dl as citation
CSS:
dt { font-weight: 700; }
dt:after { content: ":"; }
dt, dt:after, dd { display: inline; }
dd { margin: 0; }
dd:after { content: ","; padding-right: .25em; }
dl dd:last-child:after { content: "."; }
dl is, semantically, a good choice for an accordion menu, with a CSS :hover or JavaScript event attached to dt:
accordion, collapsed
accordion, active
CSS:
dt {
font-weight: 700;
}
dt:after { content: "\203A"; padding-left: .25em;}
dd { margin-left: 0; visibility: hidden;}
dl:hover dt:after { content: "\2026"; }
dl:hover dd { visibility: visible; }
And then are ways to style dl which, yes, test the capabilities of CSS, but are just plain dumb. If, for instance, you feel compelled to style dl as a table or as a bulleted list, you should question why you’re using this particular markup, and not table or ul:
dl as table
dl as bulleted list
The CSS for these stunts:
dl { display: table; }
dt {
display: table-caption;
font-weight: 700;
margin: 0;
text-align: center;
}
dd {
border: 1px solid #eee;
display:table-cell;
margin: 0;
padding: .25em;
}
dd {
display: list-item;
list-style: disc;
}
Versatility, it’s a burden.
