TGViewer
Defront — про фронтенд-разработку и не только Defront — про фронтенд-разработку и не только @defront · 5.05K subscribers
Post #1049 3.74K
Сценарии использования 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.

#html

https://whistlr.info/2021/in-defence-of-dialog/
samthor.au In Defence Of Dialog The modal dialog is here. Stop, and be prompted! ✋
More from @defront
  1. Jan 7, 2024Channel name was changed to «Defront — про фронтенд-разработку и не только»
  2. Feb 24, 2022Про войну в Украине Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет н…
  3. Feb 23, 2022Qwik — возобновляемый JavaScript-фреймворк Райан Карниато поделился своими мыслями после р…
  4. Feb 22, 2022Обработка ошибок с помощью reportError Стэфан Джудис рассказал про малоизвестный метод для…
  5. Feb 21, 2022Выбор библиотеки по её размеру Владимир Клепов рассказал про подводные камни выбора библио…
  6. Feb 10, 2022Time-travel debugging в Svelte Сэм Ван Тассел рассказал про DeLorian — новый инструмент дл…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →