Docs: update <details> animation docs to reference ::details-content (#42226) #42239
Conversation
github-actions
bot
added
Content:HTML
|
Preview URLs
(comment last updated: 2025-12-08 09:40:10) |
Thank you for the feedback. I’ve applied the suggested wording update. Co-authored-by: Estelle Weyl <[email protected]>
Improved phrasing to avoid browser-support references and align with MDN editorial guidance. The text now clearly describes what the ::details-content pseudo-element represents and how it can be used for smooth open/close animations within <details> elements.
…ly to submit buttons Adds a note explaining that visible constraint-validation feedback for setCustomValidity() is only shown when used on <button type="submit">. Other button types update validity internally but do not display UI feedback. This improves clarity for developers and resolves confusion raised in issue mdn#42234.
Khogendrarupini
requested review from
sideshowbarker
and removed request for
a team
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| > **Note:** | ||
| > Visible constraint-validation feedback is only displayed when the button is of type `submit`. |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| > **Note:** | |
| > Visible constraint-validation feedback is only displayed when the button is of type `submit`. | |
| > **Note:** | |
| > Visible constraint-validation feedback is only displayed when the button is of type `submit`. |
| setCustomValidity(string) | ||
| ``` | ||
|
|
||
| > **Note:** |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error search-replace Custom rule [gfm-alert: Use the GFM syntax: https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#notes_warnings_and_callouts] [Context: "column: 1 text:'> Note:'"]
Fixing markdown issue
Updated the sample code to assign result when done is true, since value is always undefined at that point, this ensures the example correctly displays the full accumulated stream output, matching the accompanying explanation.
estelle
left a comment
estelle
left a comment
There was a problem hiding this comment.
the original PR was limited to dialog.. The two added pages would be better in separate PRs as they are unrelated. It's best to keep a PR to a single topic; and it is totally fine to submit lots of PRs. ;)
| setCustomValidity(string) | ||
| ``` | ||
|
|
||
| > [!NOTE] |
There was a problem hiding this comment.
This content should be on the HTML button element page, and the input button pages, rather than in the API page.
| In the following simple example, a previously-created custom `ReadableStream` is read using a {{domxref("ReadableStreamDefaultReader")}} created using `getReader()`. | ||
| (see our [Simple random stream example](https://mdn.github.io/dom-examples/streams/simple-random-stream/) for the full code). | ||
| Each chunk is read sequentially and output to the UI, until the stream has finished being read, at which point we return out of the recursive function and print the entire stream to another part of the UI. | ||
| Each chunk is read sequentially and output to the UI, until the stream has finished being read, at which point we return out of the recursive function and display the accumulated stream output to another part of the UI. |
There was a problem hiding this comment.
entire is better understood than accumulated, especially for non-native speakers
| para.textContent = value; | ||
| // Output the accumulated stream content instead of `value`, | ||
| // which is undefined when `done` is true. | ||
| para.textContent = result; |
There was a problem hiding this comment.
we can't update this without updating the live example: https://mdn.github.io/dom-examples/streams/simple-random-stream/ (which needs to have the work "simple" removed)
2 participants
This PR updates the
The outdated text claiming that transitions cannot be animated has been replaced with updated guidance referencing ::details-content, which enables smooth animations as part of Baseline since September 2025.
Duplicate sentences were also removed for clarity.
💡 Motivation
Developers reading MDN were misled into believing that
This change ensures the documentation is accurate and helps readers understand how to animate
🔗 Related Issue
Fixes #42226