#Development #Comparisons
Popover API vs. Dialog API · “They seem to do the same job, but they don’t!” https://ilo.im/16b207

_____
#Popover #HtmlDialog #Accessibility #ARIA #Invokers #APIs #WebDev #Frontend #HTML #JavaScript

Popover API or Dialog API: Which to Choose? | CSS-Tricks

Choosing between Popover API and Dialog API is difficult because they seem to do the same job, but they don’t! After a bit lots of research, I discovered that the Popover API and Dialog API are wildly different in terms of accessibility and we'll go over that in this article.

CSS-Tricks
Better defaults for popovers - Manuel Matuzovic

I recently added a rule to my reset style sheet UA+ that I wanted to share with you.

Manuel Matuzovic
Dialog view transitions

Combining view transitions and the dialog element, possible?

#Development #Introductions
Controlling dialogs and popovers · The power of the Invoker Commands API https://ilo.im/168z16

_____
#Invokers #HtmlDialog #Popovers #API #Polyfill #Browser #WebDev #Frontend #HTML

Controlling dialogs and popovers with the Invoker Commands API - HTMHell

A collection of bad practices in HTML, copied from real websites.

Controlling dialogs and popovers with the Invoker Commands API - HTMHell

#Development #Pitfalls
Top layer troubles, popover vs. dialog · How to avoid possible conflict points https://ilo.im/168t8f

_____
#TopLayer #HtmlDialog #PopoverAPI #Modals #Browser #WebDev #Frontend #HTML #CSS #JavaScript

Top layer troubles: popover vs. dialog - HTMHell

A collection of bad practices in HTML, copied from real websites.

Top layer troubles: popover vs. dialog - HTMHell

#Development #Releases
Scroll prevention while ‘dialog’ is open · Chrome 144 addresses a long-standing developer issue https://ilo.im/168pbn

_____
#ModernCSS #Scrolling #HtmlDialog #Webpage #Chrome #Browser #WebDev #Frontend #HTML #CSS

Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal) <dialog> is open.

Bram.us

#Development #Introductions
Introducing the CSS Anchor Positioning API · “The CSS Anchor Positioning API is a game-changer.” https://ilo.im/15yu9f

_____
#Layout #Positioning #Popover #HtmlDialog #Browser #WebDev #Frontend #HTML #CSS

Introducing the CSS anchor positioning API  |  Blog  |  Chrome for Developers

Position elements relative to each other using the new anchor positioning API.

Chrome for Developers