Some Hands-On with the HTML Dialog Element

This is my first look at the HTML <dialog></dialog> element. I've known about it for a while but hadn't used it until now. It offers some impressive features. While I can't definitively say whether you should use it in production, it's becoming increasingly viable.

Beyond Semantics: APIs and Specialized CSS

The <dialog></dialog> element stands out because its browser support significantly impacts its usefulness. Unlike earlier HTML5 elements, its functionality isn't easily replicated with basic alternatives. You can't simply treat it as a semantically enhanced <div>. Its capabilities extend far beyond that. <h3 id="Browser-Support-The-Current-Landscape">Browser Support: The Current Landscape</h3> <p>At the time of writing:</p> <ul> <li>Chrome supports it (version 37 ). Edge's support is imminent.</li> <li>Firefox has the User-Agent (UA) styles (version 69 ), but full functionality requires the <code>dom.dialog_element.enabled flag. Even then, CSS support appears incomplete.

Safari lacks support.

Polyfills are available. While broader support is preferable, the existing support coupled with polyfilling makes <dialog></dialog> a compelling option for many developers.

Open or Closed: The Fundamental State

<dialog>
  I'm closed.
</dialog>
<dialog open="">
  I'm open.
</dialog>

User-Agent Styling: A Foundation

Chrome and Firefox exhibit similar default styling from the UA stylesheet: centered with auto margins, a thick black border, and content-based sizing. These styles are easily overridden with custom CSS to match your site's design.

JavaScript API: Programmatic Control

Given a dialog element reference:

dialog.show();
dialog.hide();

For modal behavior, use:

dialog.showModal();

showModal() manages the backdrop and interacts with a "pending dialog stack," allowing nested modals.

HTML-Based Closure: Form Submission

Closing a dialog can be achieved by submitting a form within it:

Close

The Backdrop: A Visual Cue

Programmatically opening a <dialog></dialog> automatically provides a backdrop. The appearance is customizable using the ::backdrop pseudo-element. For example, to replace the default semi-transparent black backdrop with red stripes:

Cool bonus: backdrop-filter enables effects like background blurring.

Focus Management: Accessibility Considerations

The <dialog></dialog> element automatically shifts focus to itself when opened (tested with VoiceOver on macOS). While it doesn't inherently trap focus (ideally suited for modals), CSS techniques can achieve this.

Rob Dodson aptly described modals as "the boss battle at the end of web accessibility." The native <dialog></dialog> element significantly simplifies this challenge, including automatic <kbd>Escape</kbd> key closure. Clicking outside to close isn't yet supported, but future updates might address this based on user feedback. Ire's article provides invaluable insights into building accessible custom dialogs.

The above is the detailed content of Some Hands-On with the HTML Dialog Element. For more information, please follow other related articles on the PHP Chinese website!