Samples
Button with useState
Button clicked (0)Fruits sample with definition list <dl> as table
- 1: Banana
- A yellow fruit
- 2: Apple
- A green fruit
- 3: Orange
- An orange fruit
- 4: Cherry
- A red fruit
Accordion
X-browser sample of an animated accordion with <details> and <summary>
Accordion handle 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Accordion handle 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Popover
The native popover API: popovertarget wires the button to the panel, so there is no JavaScript and no client component here. The browser takes care of the top layer, focus and Esc.
popover="auto"
An auto popover light-dismisses: click outside it or press Esc and it closes. Only one auto popover can be open at a time.
popover="manual"
A manual popover ignores outside clicks and Esc. It only closes through a control that targets it, which is what the Close button below does.
Both fade in from the @starting-style state and fade out again, which needs transition-behavior: allow-discrete so the panel stays rendered while it animates away.
Tooltip
CSS anchor positioning tethers the tooltip to its trigger and flips it below when there is no room above. The bubble and its arrow are a singleborder-shape, so the outline follows the arrow too. No JavaScript involved.
position-area: top places me above the button, position-try-fallbacks: flip-block below it once you scroll the button to the top of the viewport.One shape() path for the box and the arrow, stroked by the border.Engines without border-shape fall back to a filled bubble clipped with clip-path: shape(), and without anchor positioning the tooltip is placed above the button with plain absolute positioning.
Images
This is a sample of adding (responsive) placeholder-images
Using getRgbBlurDataUrl with orange (255,165,0)
Using getRgbBlurDataUrl with orange (255,165,0)
Using getRgbBlurDataUrl with blue (0,0,255)
Inline getRgbBlurDataUrl with magenta (255,0,255)