HTML 对话框元素动手实践

这是我第一次使用 HTML <dialog> 元素。 我已经知道它有一段时间了，但还没有尝试过。 它有一些非常酷炫和引人注目的功能。 我无法为您决定是否应该在您网站的生产环境中使用它，但我认为现在开始使用是可能的。

它不仅仅是一个语义元素，它还有 API 和特殊的 CSS。

我们稍后会谈到这些内容，但值得注意的是，它使得浏览器支持内容变得很重要。

当我们第一次获得 HTML5 元素（如 <article>）时，浏览器是否支持它并不重要，因为在那些情况下，即使你使用了它，也不会有什么损失。 你可以把它设为块级元素，它就像你原本会使用的无意义的 div 一样。

也就是说，我不会仅仅将 <dialog> 用作“更具语义的 <div> 替换”。 它功能太强大，不适合这种用途。

让我们看看浏览器支持情况。

在我写这篇文章的时候

• Chrome 支持它（37+），所以 Edge 即将支持它。
• Firefox 已经将用户代理 (UA) 样式到位（69+），但功能在 dom.dialog_element.enabled 标志之后。 即使有了这个标志，它也不像我们还没有获得 CSS 内容一样。
• Safari 不支持。

它是 可填充的。

使用支持更好的功能当然更吸引人，但我认为它很接近，如果你本来就喜欢填充，它可能很快就会跨越界限。

让我们进入更有趣的内容。

对话框要么是 open，要么不是。

<dialog>
  I'm closed.
</dialog>

<dialog open>
  I'm open.
</dialog>

它们有一些 UA 样式。

它似乎在 Chrome 和 Firefox 中匹配。 UA 样式表将它居中，并使用自动边距，厚实的黑色线条，大小根据内容而定。

查看代码笔
基本的打开对话框 由 Chris Coyier (@chriscoyier)
在 CodePen 上。

就像任何 UA 样式一样，您几乎肯定会用自己的精美对话框样式覆盖它们——阴影、排版以及其他与您网站风格匹配的内容。

有一个 JavaScript API 用于打开和关闭它们。

假设您有一个名为 dialog 的元素的引用

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

查看代码笔
基本的可切换对话框 由 Chris Coyier (@chriscoyier)
在 CodePen 上。

您可能应该使用更明确的命令

dialog.showModal();

这就是使背景工作的原因（我们很快就会谈到它）。 我不确定我是否完全理解它，但是 规范中谈到了一个“待处理对话框堆栈”，这个 API 将在该堆栈中打开模式窗口。 以下是一个可以打开第二个堆叠模式窗口的模式窗口

查看代码笔
基本的打开对话框 由 Chris Coyier (@chriscoyier)
在 CodePen 上。

还有一个基于 HTML 的方法来关闭它们。

如果您在其中放置了一种特殊的表单，则提交表单将关闭模式窗口。

<form method="dialog">
  <button>Close</button>
</form>

查看代码笔
带有关闭对话框的表单的对话框 由 Chris Coyier (@chriscoyier)
在 CodePen 上。

请注意，如果您以编程方式打开对话框，您将获得一个背景覆盖。

这始终是构建您自己的对话框中最棘手的事情之一。 一个常见的 UI 模式是在对话框后面的背景中变暗，以将注意力集中在对话框上。

使用 <dialog>，我们可以免费获得它，假设您通过 JavaScript 打开它。 您可以使用 ::backdrop 伪元素控制它的外观。 代替默认的低不透明度黑色，让我们使用带条纹的红色

查看代码笔
自定义对话框背景 由 Chris Coyier (@chriscoyier)
在 CodePen 上。

酷炫的额外功能：您可以使用 backdrop-filter 来做一些事情，比如模糊背景。

查看代码笔
本地对话框 由 Chris Coyier (@chriscoyier)
在 CodePen 上。

它为您移动焦点

我不太了解这些东西，但我可以在我的 Mac 上启动 VoiceOver 并看到对话框进入焦点，当触发打开模式窗口的按钮时，我看到这一点。

它不会将焦点保留在那里，我听说这对模式窗口来说是理想的。 我们有一个 利用 CSS 的巧妙想法，您可以尝试。

Rob Dodson 说：“模式窗口实际上是网络无障碍的最终挑战。” 很高兴原生浏览器版本可以帮助解决很多问题。 您甚至可以自动获得 Escape 键关闭功能，这很棒。 不过，没有点击外部关闭的功能。 也许有一天，根据用户反馈，这个功能会实现。

Ire 的文章是构建您自己的对话框以及在使用它们时需要考虑的众多无障碍性因素的必备资源。