--- title: The New Frontend Toolkit: Popover API, Dialog, and... description: A live-coding conference talk covering the native browser Popover API and HTML dialog element as replacements for third-party UI libraries. Demonstrates... canonical: https://daily.dev/posts/the-new-frontend-toolkit-popover-api-dialog-and-next-gen-css---eric-veliyulin---ndc-london-2026-nj1ntnnp1 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS - Eric Veliyulin - NDC London 2026 | daily.dev og:description: A live-coding conference talk covering the native browser Popover API and HTML dialog element as replacements for third-party UI libraries. Demonstrates... og:url: https://daily.dev/posts/the-new-frontend-toolkit-popover-api-dialog-and-next-gen-css---eric-veliyulin---ndc-london-2026-nj1ntnnp1 og:image: https://api.daily.dev/og/posts/Nj1NtnnP1.png og:image:alt: The New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS - Eric Veliyulin - NDC London 2026 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS - Eric Veliyulin - NDC London 2026 **[NDC Conferences](https://daily.dev/sources/ndc)** · 47 min read · 0 upvotes · 0 comments ## Summary A live-coding conference talk covering the native browser Popover API and HTML dialog element as replacements for third-party UI libraries. Demonstrates implementing a modal dialog with showModal(), controlling open/close behavior, styling the backdrop, and using the popover attribute with popoverTarget for a user menu. Covers CSS anchor positioning (now baseline in all browsers since January 2026) to visually link popovers to their trigger elements. Explains smooth entry/exit transitions using @starting-style, allow-discrete for display property animation, and the overlay transition property. Includes browser compatibility notes: dialog is widely supported but Safari lacks closedby; position anchor just became baseline; display transitions not yet in Firefox. Ends with a real-world example of a reusable dialog component used in production, including drawer-style modals and workarounds for pre-baseline features. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [How to Create Accessible Modals and Pop-ups Using HTML, CSS, and Minimal JavaScript](https://daily.dev/posts/how-to-create-accessible-modals-and-pop-ups-using-html-css-and-minimal-javascript-at8bzvf5o) · freeCodeCamp · 36 upvotes · 3 comments - [Getting Started With The Popover API — Smashing Magazine](https://daily.dev/posts/getting-started-with-the-popover-api-smashing-magazine-vjbltzl0j) · Smashing Magazine · 47 upvotes · 2 comments - [Baseline Layered UI Patterns:

and popover](https://daily.dev/posts/baseline-layered-ui-patterns-dialog-and-popover-vaegynh8z) · OddBird · 2 upvotes · 0 comments - [Popover API or Dialog API: Which to Choose?](https://daily.dev/posts/popover-api-or-dialog-api-which-to-choose--unadcec55) · CSS-Tricks · 4 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/the-new-frontend-toolkit-popover-api-dialog-and-next-gen-css---eric-veliyulin---ndc-london-2026-nj1ntnnp1) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS - Eric Veliyulin - NDC London 2026","url":"https://daily.dev/posts/the-new-frontend-toolkit-popover-api-dialog-and-next-gen-css---eric-veliyulin---ndc-london-2026-nj1ntnnp1","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-new-frontend-toolkit-popover-api-dialog-and-next-gen-css---eric-veliyulin---ndc-london-2026-nj1ntnnp1"},"datePublished":"2026-03-09T14:08:39.625Z","dateModified":"2026-03-09T14:09:50.179Z","description":"A live-coding conference talk covering the native browser Popover API and HTML dialog element as replacements for third-party UI libraries. Demonstrates...","image":"https://i.ytimg.com/vi/rjMwM7--9cA/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/rjMwM7--9cA/sddefault.jpg","isAccessibleForFree":true,"articleSection":"NDC Conferences","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"NDC Conferences","logo":"https://media.daily.dev/image/upload/s--SiIyojEj--/f_auto/v1748760369/logos/ndc","url":"https://daily.dev/sources/ndc"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/the-new-frontend-toolkit-popover-api-dialog-and-next-gen-css---eric-veliyulin---ndc-london-2026-nj1ntnnp1","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css","timeRequired":"PT47M","video":{"@type":"VideoObject","name":"The New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS - Eric Veliyulin - NDC London 2026","description":"A live-coding conference talk covering the native browser Popover API and HTML dialog element as replacements for third-party UI libraries. Demonstrates...","thumbnailUrl":"https://i.ytimg.com/vi/rjMwM7--9cA/sddefault.jpg","uploadDate":"2026-03-09T14:08:39.625Z","duration":"PT47M","url":"https://api.daily.dev/r/Nj1NtnnP1","embedUrl":"https://www.youtube.com/embed/rjMwM7--9cA"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"NDC Conferences","item":"https://daily.dev/sources/ndc"},{"@type":"ListItem","position":3,"name":"The New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS - Eric Veliyulin - NDC London 2026"}]} ```