Here's a brief overview of some new things coming to HTML form controls this month
-
Here's a brief overview of some new things coming to HTML form controls this month
https://blog.stephaniestimac.com/posts/2024/10/html-details-and-summary-update/
-
Šime Vidasreplied to Stephanie 🔮 Web Witch last edited by
@seaotta Rotten Tomatoes has a control that toggles text between line-clamped and full states. Is that within the scope of <details>?
-
@simevidas @seaotta presumably you could do something like:
```css
::details-content {
display: block;
line-clamp: 2;[open]& {
line-clamp: none;
}
}
```(Obviously with relevant `-webkit-` prefix and other attributes)
-
@ryantownsend @seaotta display: block does not cause the content to be shown.
-
@simevidas @ryantownsend @seaotta Chromium uses `content-visibility` to hide the `::details-content` when the `<details>` element is closed, so we can set `content-visibility: visible` if we want it for that case. The following achieves the intended effect in Chrome Canary 132.
JS Bin
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...
(jsbin.com)
-
@simevidas @seaotta
️ I should have remembered it’s content-visibility not display. Good job @knowler stepped in. -
@knowler @ryantownsend @seaotta I love when a UI interaction used by a popular website becomes possible without JavaScript using standard HTML and CSS
-
@simevidas @knowler @seaotta
less of an ‘uncanny valley’ where the page is visible but uninteractive.I use <dialog> prolifically and already building with Invoker Commands (with the polyfill) in anticipation of support landing.
