Two Issues Styling the Details Element and How to Solve Them

Previously, creating simple expandable content blocks required JavaScript or complex CSS workarounds. Modifying the HTML could also become cumbersome. Now, the <details></details> and <summary></summary> elements (forming a "disclosure widget") simplify this significantly. We use them extensively at work for FAQs, for example.

Addressing Common Styling Challenges

While <details></details> and <summary></summary> inherently provide expand/collapse functionality, you might still need CSS for optimal presentation. Without styling, two key issues arise:

Issue 1: <summary></summary> Cursor

The <summary></summary> element, while interactive, defaults to a text selection cursor instead of the expected pointer.

Issue 2: Nested Block Elements in <summary></summary>

Nesting block-level elements (like headings) within <summary></summary> causes them to appear below the arrow, not inline.

The CSS Solution

To resolve these, add these styles to your CSS reset:

details summary {
  cursor: pointer;
}

details summary > * {
  display: inline;
}

Let's examine each issue and its solution in detail.

Customizing the <summary></summary> Cursor

A cursor should visually reflect its intended interaction. The default text cursor on <summary></summary> elements, while technically correct (the text is selectable), is less intuitive than a pointer.

The solution is simple:

details summary {
  cursor: pointer;
}

Many prominent websites, including MDN Web Docs and GitHub, already employ this style for their disclosure widgets. The default cursor: text likely reflects the selectability of the summary text, but a pointer is generally preferable for interactive elements. Note that changing the cursor only affects the visual appearance; selectability remains unchanged.

Displaying Nested <summary></summary> Content Inline

For FAQs, I often wrap questions in headings (e.g., <h3></h3>) within <summary></summary>:

<details><summary><h3 id="Will-my-child-s-Plan-be-implemented">Will my child's 504 Plan be implemented?</h3></summary><p>Yes. Similar to the Spring, case managers will reach out to students.</p></details>

This offers several advantages:

• Consistent Styling: Maintains visual consistency with other headings.
• IE/EdgeHTML Compatibility: Provides fallback for older browsers that don't support <details></details>.
• Accessibility: Aids assistive technology navigation (though interpretation by screen readers can vary, as discussed below).

Headings vs. Buttons

The <summary></summary> element behaves like a button (it implicitly has role=button), yet unlike buttons, it allows nested headings. This creates a conflict:

• Headings aid navigation.
• Buttons typically strip semantics from nested elements.

Screen reader compatibility is inconsistent here. NVDA and VoiceOver recognize headings inside <summary></summary>, but JAWS does not. Therefore, while styling headings within <summary></summary> is possible, their semantic interpretation is not guaranteed.

Inline Styling

To prevent the arrow from appearing above the heading, use inline styling for elements nested directly within <summary></summary>:

details summary > * {
  display: inline;
}

Use inline, not inline-block, to avoid wrapping issues. While tempting to use display: flex on <summary></summary>, this hides the arrow.

Bonus: Excluding Internet Explorer Styles

Since IE and older Edge versions don't support <details></details>, avoid applying custom styles to them using a feature query:

@supports not (-ms-ime-align: auto) {
  details summary {
    cursor: pointer;
  }
  details summary > * {
    display: inline;
  }
  /* Other <details>/<summary> styles */
}</summary></details>

IE ignores this block entirely. EdgeHTML also ignores it due to the -ms-ime-align check. Note that very old Chrome and Safari versions (with negligible market share) also lack feature query support. A @supports (details) block would be ideal but has even less browser support.

Conclusion

With the correct HTML structure and these CSS styles, you can easily customize your disclosure widgets. Remember that while styling <summary></summary> elements is straightforward, screen reader compatibility for nested headings requires consideration.

The above is the detailed content of Two Issues Styling the Details Element and How to Solve Them. For more information, please follow other related articles on the PHP Chinese website!