Сценарии использования HTML-элемента dialog
Сэм Торогуд из Google рассказал про сценарии использования элемента <dialog> — "In Defence Of Dialog".
Элемент <dialog> предназначен для создания диалоговых окон. Нативный HTML-диалог поддерживает автоматический захват фокуса при переходе по Tab и устраняет проблемы с контекстом наложения без использования JavaScript.
В статье рассказывается про создание одного и нескольких модальных окон с помощью <dialog>, про реализацию открывающегося сайдбара с закрытием по затемнённому фону, про предотвращение прокрутки при открытии окон. Также из статьи узнал про method="dialog" в формах. Если форма с method="dialog" находится внутри <dialog>, то она будет автоматически закрыта при отправке формы. Для всех сценариев использования в статье есть интерактивные демки.
У нативного диалога трагичная судьба — процесс его проникновения в основные браузерные движки занял десять лет. На протяжении этого времени его даже однажды хотели удалить из спецификации. Сейчас поддержка <dialog> есть в Chrome, в Firefox за экспериментальным флагом и в Safari Technology Preview 134.