Add ::details-content page

[lukewarlow]

Description

Add a page for the new ::details-content pseudo element.

Motivation

To help web developers discover this new feature.

Additional details

Related issues and pull requests

Depends on: mdn/interactive-examples#2874

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/::details-content

Flaws (48)

URL: /en-US/docs/Web/CSS/::details-content
Title: ::details-content
Flaw count: 48

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/What_is_CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/Getting_started
  • and 43 more flaws omitted

(comment last updated: 2025-01-03 16:35:12)

[chrisdavidmills]

Nice work @lukewarlow. I've got a few comments for you to consider, but nothing too major.

[chrisdavidmills]

@lukewarlow nice one.

I thought your updates looked great, but I thought the examples could use a bit of description/explanation. Because I worked on the allow-discrete animation stuff recently and it is still fresh in my head, I decided to edit the page directly and drop an explanation in. I hope that's OK with you.

I won't merge it yet, so you can check it out to make sure you are happy with it.

[chrisdavidmills]

@lukewarlow, oooh, I also increased the transition duration to 600ms so that it is a bit easier to see what is happening. I also put the opacity transition first, as I thought it was easier to explain if I explained that one first.

[bsmth]

@chrisdavidmills shall we merge this one :)