帶有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的文章為構建可訪問的自定義對話框提供了寶貴的見解。