Front-end development is a rapidly evolving field, with new features emerging almost daily. Sometimes, it's challenging to keep up with all the latest developments, which can be both a blessing and a curse. One recent development that caught my attention during CSS 2023 Day is worth sharing with you.
For those of you who've experienced the pain of manually creating modal dialogs in React or other existing frameworks, I'm thrilled to inform you that all major browsers now support the element and the ::backdrop pseudo-element, complete with semantic and behavioral enhancements!
Isn't it cool? Let's dive deeper into it now...
The Dialog element
This HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
This element provides usability and accessibility features for modal dialogs.
The quote from MDN:
The element is exposed by browsers similarly to custom dialogs using the ARIA role="dialog" attribute. elements invoked by the showModal() method will have an implicit aria-modal="true", whereas elements invoked by the show() method, or rendered by use of the open attribute or changing the default display of a will be exposed as [aria-modal="false"]. When implementing modal dialogs, everything other than the and its contents should be rendered inert using the inert attribute. When using along with the HTMLDialogElement.showModal() method, this behavior is provided by the browser.
What does it actually means for us?
For developers, it can be a game-changer! Imagine no more struggling with creating modal windows and dialog boxes from scratch. You can use the showModal() method to quickly create modal dialogs, and the browser takes care of making them accessible with the right attributes and behavior. Plus, it automatically makes everything else outside the dialog inactive, which saves a lot of time implementing this logic manually.
For users, this means a more consistent and user-friendly web experience. You won't have to worry about wonky pop-ups or dialogs that behave differently on different websites or browsers. It's all seamless and accessible now.
No need for extensive custom code or scripts to handle modals. This means that your project stays lean and loads much faster.
You can play with this feature here: Modal Implementation MDN
Fully supported by all browsers now:
::backdrop
This CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.
Top layer - a specific layer that spans the entire width and height of the viewport and sits on top of all other layers displayed in a web document. It is created by the browser to contain elements that should appear on top of all other content on the page.
Here is our HTML:
<button id="showDialogBtn">Show a dialog</button>
<dialog id="favDialog">
<form method="dialog">
<p>The background shown outside of this dialog is a backdrop.</p>
<button id="confirmBtn">Close the dialog</button>
</form>
</dialog>
Some CSS:
button {
font-size: 1.2rem;
padding: 5px 15px;
}
dialog::backdrop {
background-color: salmon;
}
And JavaScript:
const showDialogBtn = document.getElementById('showDialogBtn');
const favDialog = document.getElementById('favDialog');
showDialogBtn.addEventListener('click', () => favDialog.showModal());
You can experiment with this feature here:
But here things are not so shiny in terms of the browsers' support, long story short - this feature is not fully supported with fullscreen and on popovers, but works well with dialogs:
Should we replace the existing manual modals? Why go the extra mile here if everything works just fine?
The answer is short and simple:
With manually implemented components you have the behavior (some sort of) but semantically it is just a simple div without any role. Of course, you can always manually assign a role of a dialog, then you will have your semantic, but not all the out-of-the-box behavior. Isn't it too much work for a modal dialog if we can use an already-invented bicycle?
Check out the resources and try by yourself. Hope you would like this as much as I do. Good luck with your discoveries!
Resources:
Top comments (0)