RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
details { inline-size: 50ch; interpolate-size: allow-keywords;
&::details-content {s opacity: 0; block-size: 0; overflow-y: clip;  transition: content-visibility 1s allow-discrete, opacity 1s, block-size 1s; }
&[open]::details-content { opacity: 1; block-size: auto; } }
My google avatar.

Open & Close Transitions with <details>

4 min read
css

CSS interpolate-size is rad. Let's use it with the <details> element so this element can join other HTML elements in elegant presentation.

By far, the most common use case I keep seeing for interpolate-size is to transition the <details> element when it opens and closes.

This is your boilerplate starting place.

The Setup #

Start with a <details> element:

<details>
  <summary>Details interpolation example</summary>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores, distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore.</p>
</details>

Next, it needs a max-inline-size (or placement inside a grid) to prevent the content from being as wide as the page:

details {
  inline-size: 50ch;
}

Next, add interpolate-size to the element so we can transition to block-size: auto:

details {
  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }
}

Now the tricky parts that make this post valuable.

Select the slot of <details> with ::details-content and describe the closed styles. Take special note to transition: content-visibility 1s allow-discrete:

details {
  
  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip; 
    transition: content-visibility 1s allow-discrete,
                opacity 1s,
                block-size 1s;
  }
}

Lastly, add the open styles.

details {
  
  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

So technically, we're not transitioning the <details> element, we're transitioning the slotted content that goes inside it.

🤯

The boilerplate #

Take this and go make awesome things!

details {
  inline-size: 50ch;
  
  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }
  
  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip; 
    transition: content-visibility 1s allow-discrete,
                opacity 1s,
                block-size 1s;
  }
  
  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

The Demo #

Note that this effect needs transition-behavior, ::details-content and interpolate-size to work.

Send me a link to the rad <details> elements you make with this‽

Mentions #

Join the conversation on

55 likes
10 reposts
  • Tony Ward
  • Phlip ???????? ????
  • Triptych ????
  • Apple Annie :prami:
  • Ben Schwarz
  • Fogrew :verified: ????????
  • Mario
  • Fynn Becker
  • Schalk Neethling
  • Nick McLaren
you could use View Transitions or entry/exit animation CSS with @starting-style and transition-behavior developer.chrome.com/blog/entry-e...
Adam ArgyleAdam Argyle

@argyleink excellent use case. It's indeed a really common use case. Thanks for sharing it. I need to catch up on all the new CSS properties ????

Side note, nothing alarming, but your content seems to be truncated on Android Firefox. I can't scroll horizontally or zoom out to get the content.

Geoffrey Crofte ☕Geoffrey Crofte ☕

@geoffreycrofte Looks like a case of the pre that won't max inline size. Those stinkers been trouble. Firefox Mobile? Know which version?

Adam ArgyleAdam Argyle

@argyleink Eager to have this available across all browsers. So many designer expect this in their designs, it'll be a great day when all that JS can go away!

Also good to know about content-visibility, I kind of know about how it affects things but never thought of it as part of a <details>'s content.

A side note: you mix block-size and height, I'm assuming that's just an oversight?

Christopher Kirk-NielsenChristopher Kirk-Nielsen

Crawl the CSS Webring?

previous sitenext site
a random site