带有HTML对话框元素的一些动手

这是我第一次看HTML<dialog></dialog>元素。我已经知道了一段时间，但直到现在才使用它。它提供了一些令人印象深刻的功能。虽然我不能明确地说您是否应该在生产中使用它，但它变得越来越可行。

超越语义：API和专业CSS

这<dialog></dialog>元素之所以脱颖而出，是因为其浏览器的支持显着影响其有用性。与早期的HTML5元素不同，其功能不容易通过基本替代方案复制。您不能简单地将其视为语义上的增强<div>。它的功能远远超出了这一点。<h3 id="浏览器支持-当前的景观">浏览器支持：当前的景观</h3> <p>在写作时：</p> <ul> <li> Chrome支持它（版本37）。 Edge的支持迫在眉睫。</li> <li> Firefox具有用户代理（UA）样式（版本69），但是完整功能需要<code>dom.dialog_element.enabled Flag。即使那样，CSS支持似乎不完整。

野生动物园缺乏支持。

可以使用多填充。虽然更广泛的支持是可取的，但现有的支持加上多填充使得<dialog></dialog>对于许多开发人员来说，这是一个令人信服的选择。

开放或关闭：基本状态

<dialog>
  我关闭了。
</dialog>
<dialog open="">
  我很开。
</dialog>

用户代理样式：基础

Chrome和Firefox具有UA样式表的类似默认样式：以自动利润，厚的黑色边框和基于内容的尺寸为中心。这些样式可以通过自定义CSS轻松覆盖，以匹配您网站的设计。

JavaScript API：编程控制

给定一个dialog元素参考：

 dialog.show（）;
dialog.hide（）;

对于模态行为，请使用：

 dialog.showmodal（）;

showModal()管理背景并与“待处理”对话框堆栈进行交互，允许嵌套模态。

基于HTML的关闭：表格提交

可以通过提交其中表格来完成对话框：

关闭

背景：视觉提示

以编程方式打开一个<dialog></dialog>自动提供背景。使用::backdrop伪元素可以自定义外观。例如，用红色条纹替换默认的半透明黑色背景：

凉爽的奖金： backdrop-filter可实现背景模糊之类的效果。

焦点管理：可访问性注意事项

这<dialog></dialog>打开时元素会自动将重点转移到自身（在MacOS上使用VoiceOver测试）。尽管它本质上并不是捕获焦点（理想适合模式），但CSS技术可以实现这一目标。

罗布·多德森（Rob Dodson）恰当地将模态描述为“网络可访问性结束时的老板之战”。本地人<dialog></dialog>元素大大简化了这一挑战，包括自动<kbd>Escape</kbd>键关闭。单击外部关闭尚未支持，但是将来的更新可能会根据用户反馈来解决此问题。 IRE的文章为构建可访问的自定义对话框提供了宝贵的见解。