[feature request] dl, dd, dt property sheet

[DavidSouther]

dl, dt, and dd get no love. I'm playing around with having them get a "property sheet" treatment.

I have a small example in my project's code:

<dl>
  <header>Project</header>
  <dt>Files</dt>
  <dd><button>Reset</button></dd>
  <dt>Numeric Format</dt>
  <dd><a href="#">B</a><a href="#">D</a><a href="#">X</a><a href="#">A</a></dd>
</dl>

dl {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(auto, 2fr);
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
  margin: 0;
}

dl > header {
  grid-column: 1 / span 2;
  font-weight: bold;
  background-color: var(--muted-color);
  color: var(--primary-inverse);
  padding: var(--form-element-spacing-vertical)
    var(--form-element-spacing-horizontal);
}

dd,
dt {
  padding: var(--form-element-spacing-vertical)
    var(--form-element-spacing-horizontal);
  border: 1px solid var(--muted-border-color);
}

dd:nth-of-type(even),
dt:nth-of-type(even) {
  background-color: var(--table-row-stripped-background-color);
}

NOTE: The <header> is not standards compliant. This first comment is to open the bikeshed asking for thoughts, and is not a proposal on how or what this should finally look like.

This also, IMHO, makes a very nice looking form wrapper:

<form>
  <dl>
    <dt><label for="firstname">First Name</label></dt>
    <dd>
      <input type="text" id="firstname" name="firstname" placeholder="First name" />
    </dd>
    <dt><label for="lastname">Last Name</label></dt>
    <dd>
      <input type="text" id="lastname" name="lastname" placeholder="Last name" required="" />
    </dd>
    <dt><label for="email">Email address</label></dt>
    <dd>
      <input type="email" id="email" name="email" placeholder="email address" />
    </dd>
    <dt></dt>
    <dd><button type="submit">Submit</button></dd>
  </dl>
</form>

Examples:

https://www.codeproject.com/Articles/881782/Creating-custom-UI-property-pages-sheets-in-Visual
https://docs.webix.com/desktop__property_sheet.html

[walterdavis]

Oh, yes, please! I just ran into this pattern on Friday, and didn't think of the DL for it. Of course, that's exactly what it is!

[WebMechanic]

dl, dt, and dd get no love.

so true!

I love using definition/description lists for all sorts of data -- 1:1, 1:n (multiple dd) -- and as a great and simple alternative to "2-3 column" tables. Always have to add styles for them in any project :)

Since HTML5 "officially allows" for DIVs to wrap the dt with its dds, things are much easier to layout, group, and position and have valid HTML -- for those who still care...
However, header is not an allowed content element.

[DavidSouther]

However, header is not an allowed content element.

Yeah I figured someone would give me a hard time for that, haha!

To be clear, this is an issue to say I would like dl/dt/dd styling, and not a proposal for how to do it!

[WebMechanic]

Yeah I figured someone would give me a hard time for that, haha!

haha, never mind. I won't if you don't advocate for that pattern :-)

---

I'm a Standards Advocate not an Evangelist and instinctively like to point out to some other random future readers of this proposal : these days, when everyone seems to believe HTML is made from DIVs only, the random combination of elements may cause trouble someplace else - layout, styling, scripting, a11y ...
You know about DL's existance and purpose, so you cleearly don't fall into that category anyway ;-) That said, the audience of PicoCSS might also well be aware of the +130 HTML elements one can and should use.

I don't actually bother, and placing some header above something else isn't rocket science, and one can still throw in some aria to make assistive tech happy.
If browsers don't choke on it, I use it, like nobr or xmp. Two useful elements every browser supports since ever and have no real functional or simple CSS equivalent, but also have never been part of any web standard -- unfortunately.