I recently came across a new spec with the name <dialog> element [1]. And decided to see if it works properly. This is what it looks like,
See the Pen <dialog&rt; element 001 by Prateek Jadhwani (@prateekjadhwani) on CodePen.
As you can see, it works right out of box, without any JavaScript or CSS. And…. now we can finally stop worrying performance drops and extra events that stay on the site till the end of eternity.
So, what’s the catch? It is available only in chrome right now. It does not work on firefox nightly [3]. Which makes it harder to use in a site at the time of writing of this article. But if you still want to see it working, feel free to look at the demo in chrome.
::backdrop pseudo class
As you can see it on the above demo, the background is semi opaque white colored. This can be customized with the help of ::backdrop pseudo class. For example:
See the Pen <dialog&rt; element 002 by Prateek Jadhwani (@prateekjadhwani) on CodePen.
Auto focus
The <dialog> element also makes the first focusable element inside it auto focussed by default. See the example below.
See the Pen <dialog&rt; element 003 by Prateek Jadhwani (@prateekjadhwani) on CodePen.
Conclusion
The <dialog> element is one of those element that I am really excited about since css grid came out. I can see its potential in the web development world. But for now, we will have to code using the old methodologies for modals, since this element is not implemented in all the evergreen browsers yet.