Select Page

Category: modal

The dialog element

Chris Manning digs into : A dialog element provides: An element that is easy to show and hide, including an open boolean attribute on the element itself. Two versions: a standard popover or modal version. A ::backdrop pseudo-element for modal types. Built-in focus: see dialog focusing steps. ARIA role support (dialog is the implied default). Also accepts the alertdialog role. A pending stack for multiple dialogs. A DOM interface with the open boolean and methods show, showModal, and close. And those are just some highlights! Showing content on top of other content has never been easier. This is the evolution of the web at it’s best. Identifying a major developer struggle and helping solve it. Direct Link to Article — Permalink The post The dialog element appeared first on CSS-Tricks....

Read More

Sticky as a Local Fixed?

Lemme set the stage a bit here. You have a website and, like most, it scrolls. This website will have modals. You’ll probably position: fixed the modal so that it’s predictably positioned regardless of scrolling. It’s possible the modal itself will scroll. Notice the modal has a close button. We can position: absolute that in the upper-right corner, but if our modal scrolls, it’s a problem. We’ve lost the close button behind the scrolling. Should be a job for more position: fixed, right? Not really, sadly, as there is no such thing as a local context for position: fixed....

Read More

Accessible Web Apps with React, TypeScript, and AllyJS

Accessibility is an aspect of web development that is often overlooked. I would argue that it is as vital as overall performance and code reusability. We justify our endless pursuit of better performance and responsive design by citing the users, but ultimately these pursuits are done with the user’s device in mind, not the user themselves and their potential disabilities or restrictions. A responsive app should be one that delivers its content based on the needs of the user, not only their device. Luckily, there are tools to help alleviate the learning curve of accessibility-minded development. For example, GitHub...

Read More