Styling details and summary with CSS

Technical Deep Dive & Specifications

Method 1: The Production-Standard CSS Grid Technique

Because browser engines can interpolate between fractional grid tracks (fr), placing the disclosure content inside a single-column CSS Grid with a collapsing row creates a seamless height animation without any fixed max-height guesswork.

<details class="animated-details">
  <summary>What is our SLA guarantee?</summary>
  <div class="grid-expander">
    <div class="inner-content">
      <p>We guarantee 99.99% uptime backed by financial service credits.</p>
    </div>
  </div>
</details>

/* Container Grid */
.animated-details .grid-expander {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expand on Open */
.animated-details[open] .grid-expander {
  grid-template-rows: 1fr;
}

/* Inner wrapper MUST have min-height: 0 and overflow: hidden */
.animated-details .inner-content {
  min-height: 0;
  overflow: hidden;
}

[!IMPORTANT] The .inner-content child must set min-height: 0; and overflow: hidden;. By default, grid items have min-height: auto, which prevents the grid track from shrinking down to 0fr.

Method 2: Modern Standard interpolate-size: allow-keywords

In the CSS Values and Units Module Level 4, the W3C introduced the interpolate-size property. When enabled on the root or component, browsers can interpolate sizing calculations directly to and from intrinsic sizing keywords like auto, min-content, and max-content.

/* Enable intrinsic keyword interpolation */
:root {
  interpolate-size: allow-keywords;
}

/* Modern direct height transition */
details::details-content {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s allow-discrete;
}

details[open]::details-content {
  opacity: 1;
  height: auto; /* Interpolates smoothly from 0 to auto! */
}

Method 3: @starting-style & transition-behavior: allow-discrete

When an element transitions from display: none to display: block (or enters the DOM), @starting-style defines the initial CSS properties before the first paint frame:

details::details-content {
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-behavior: allow-discrete;
  opacity: 0;
  transform: translateY(-8px);
}

details[open]::details-content {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  details[open]::details-content {
    opacity: 0;
    transform: translateY(-8px);
  }
}

Modern Styling Architecture Matrix

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 28–36: Removes default browser triangles using standard list-style: none and WebKit vendor resets.
• Lines 44–58: Animates the chevron icon using transform: rotate(180deg) with a smooth cubic-bezier timing function.
• Lines 60–67: Defines the CSS Grid transition engine. When closed, grid-template-rows: 0fr collapses the grid track to zero height. When details[open] is applied, it transitions to 1fr.
• Lines 68–71: Sets min-height: 0; and overflow: hidden; on .grid-inner, allowing the grid row to collapse completely without children overflowing.
• Lines 90–98: Wraps the disclosed text in the two-tier .grid-wrapper > .grid-inner hierarchy to execute the pure CSS animation cleanly.

Expected Browser Render Output

1. Collapsed State: A sleek dark slate panel displaying the question title and a downward-pointing gray chevron.
2. Hover / Focus: Hovering lightens the row background. Tabbing onto the summary reveals a bright cyan focus ring.
3. Expansion: Clicking the summary smoothly slides the text down from 0px to its natural content height while the chevron rotates 180° into an upward cyan arrow in perfect synchronization.