fix(core/caniuse): mark up browser support groups as a dl

[marcoscaceres]

Closes #4090

The browser support groups were nested <div>s; they are now a <dl> with a <dt> label and <dd> of browser cells per group, which is what the issue asked for and reads better to assistive technology. The existing flex layout and its legend-on-a-rule look are kept as-is, and on narrow screens the groups stack full width with the "More info" link on its own row.

Not switched to CSS grid, despite the issue suggesting it: the flex layout already produced the intended appearance, and several grid rewrites each regressed it (misaligned group labels, the rule striking through the label text, pills scattered across columns). Two rendering bugs found along the way are fixed here too. The "More info" link carried caniuse-cell, which sets white text with a background gradient built from a variable only defined on the support-level classes, so it rendered white on white; and the group labels used var(--bg, white), but --bg is not defined anywhere in ReSpec, so they painted a white patch on dark-mode pages.

Written with AI: this change was generated by Claude. Per AI_POLICY.md.

[Copilot]

Pull request overview

Reworks Can I Use output with semantic definition-list markup and responsive CSS Grid layout.

Changes:

• Uses dl/dt/dd markup for browser groups.
• Moves “More info” onto its own row.
• Updates styles and tests for the new structure.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
src/core/caniuse.js	Generates semantic grouped markup.
src/styles/caniuse.css.js	Adds responsive grid layout.
tests/spec/core/caniuse-spec.js	Updates selectors and expectations.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Suppressed comments (1)

src/styles/caniuse.css.js:87

• The dark-mode label bug described by this PR is still present. Elevating the label above the rule does not change the unchanged background-color: var(--bg, white) below; because --bg is never defined, dark-mode pages still get a white patch. Use the color-scheme-aware canvas color as the fallback/background.

  /* Above the dd's border, so the label's background breaks the rule instead
     of the rule striking through the text. */
  position: relative;
  z-index: 1;

[marcoscaceres]

Before:

After:

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/styles/caniuse.css.js:62

• position: relative without a non-auto z-index does not establish a stacking context, so this explanation is incorrect. The label's own positioned z-index: 1 is sufficient for painting over the border; otherwise add z-index: 0 or isolation: isolate here if containment is intended.

  /* Establish a stacking context so the label can be lifted above the dd's
     bottom border. Reversing the visual order does not reverse paint order:
     the dd is a later sibling, so its border would paint over the label and
     strike the text through. */
  position: relative;

src/styles/caniuse.css.js:87

• The dark-mode rendering bug described by this PR remains: the label raised above the rule still gets background-color: var(--bg, white) below, but --bg has no definition in src, so dark documents retain a white patch. Use a color-scheme-aware canvas color for the masking background.

  /* Above the dd's border, so the label's background breaks the rule instead
     of the rule striking through the text. */
  position: relative;
  z-index: 1;