When working with tabular data — daily share prices, hourly production targets, monthly sales values — keeping your reference point is everything when spotting trends.
But pop-ups can scupper this - more specifically, closing them.
Forever, the native HTML element in web apps has had one big drawback:
👇 You had to tap a close button. 😩 That meant moving your pointing tool (mouse, finger, trackball…). 👎 And losing your reference point when trying to click the next value.
This friction disrupts the flow of the user experience.
Until now.
🎉 With the new closedby=“any” attribute on , users can now simply click or tap anywhere outside the pop-up to close it.
✅ Better usability when scanning through a series of related figures. ✅ A bigger target area — no more pixel-perfect clicks on tiny close buttons or ❌s. ✅ A smoother, more forgiving experience.
Or are you using the ’s sibling, the new kid on the block had light dismiss from the outset:
Note: Light dismiss is currently officially “limited availability — not widely supported in Safari” (I’m not widely surprised!).
(Demo app created in GitHub Codespace with the help of ChatGPT-mini5)