Interactive
Widgets the browser gives for free, and a few built with its APIs.
Tables
Click a column's header to sort. The header sticks while the table scrolls.
| Average support | |||
Disclosure
Details elements with the same name open one at a time.
What is a disclosure widget?
A summary that shows or hides the content after it. No script needed.
Can it be animated?
Its marker turns with a transition here; the content appears at once.
Does it work without JavaScript?
Yes. This whole section has no script.
Dialog and popover
A modal <dialog> and a popover are drawn in the top
layer, above everything else.
Light dismiss: press outside it, or press Escape.
Tabs
An ARIA tab list: click a tab, or move between them with the arrow keys, Home and End.
The structure: what each part of the page is.
The presentation: how each part looks, on every screen.
The behaviour: what each part does when you act on it.
Web components
A custom element with its own shadow DOM and styles, and a slot for its label; and an element whose shadow root is declared in the HTML.
View transitions
document.startViewTransition() animates the list from its old order to the
new one; moving between the pages of this site uses a cross-document transition.
Intl
Dates, numbers, relative times and lists, written the way each language writes them.
In a panel
- The dialog and the popovers are in the top layer, which a panel draws in the page's flow for now.
- View transitions draw their animation in pseudo-elements: the panel shows the result.