HTML умеет и так: возможности без JavaScript

popover

Поддержка браузеров: popover →

Закрытие по клику вне окна, закрытие по Esc, никакой возни с z-index для вывода поверх остального контента. Всё это управляется атрибутами popover и popovertarget (а также popovertargetaction) прямо в HTML. (MDN)

<button popovertarget="example-popover">Toggle popover</button>
<div id="example-popover" popover>
	<p>No JavaScript, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers!</p>
	<button popovertarget="example-popover" popovertargetaction="hide">Close</button>
</div>

<dialog>

Поддержка браузеров: dialog →

Похожий принцип, что и у popover, но здесь есть отдельный элемент для модальных диалоговых окон. (MDN)

Ниже, в разделе про command / commandFor, показана ещё одна, более свежая возможность открывать и закрывать элементы диалога — она же пригодится и для многих других сценариев без JS в будущем.

<button popovertarget="example-dialog">Toggle &lt;dialog&gt; popover</button>
<dialog id="example-dialog" popover>
	<p>Closed with just HTML via <code>&lt;form method="dialog"&gt;</code>, opened with the <code>popover</code> attribute.</p>
	<button popovertarget="example-dialog" popovertargetaction="hide">Close</button>
</dialog>

Хотя это немного противоречит духу страницы, стоит показать короткий фрагмент того, как взаимодействовать с диалоговыми элементами через JavaScript:

<button id="example-dialog-js-open">Open dialog</button>
<dialog id="example-dialog-js">
	<p>This one is opened with <code>.showModal()</code> and closed with <code>.close()</code>, both called from JavaScript.</p>
	<button id="example-dialog-js-close">Close</button>
</dialog>

document.getElementById("example-dialog-js-open").addEventListener("click", () => {
	document.getElementById("example-dialog-js").showModal()
})
document.getElementById("example-dialog-js-close").addEventListener("click", () => {
	document.getElementById("example-dialog-js").close()
})

Группировка <details>

Поддержка браузеров: details name →

Общий атрибут name превращает группу элементов <details> в аккордеон с эксклюзивным раскрытием: открытие одного автоматически закрывает остальные. (MDN)

<details name="example-group">
	<summary>First</summary>
	<p>Open the seond one and watch this close on its own.</p>
</details>
<details name="example-group">
	<summary>Second</summary>
	<p>First one’s hidden now.</p>
</details>

command и commandfor

Поддержка браузеров: invoker commands →

Отдельные HTML-кнопки управляют одним и тем же popover-окном без единой строчки скрипта. (MDN)

Примечание: пока в браузерах стабильно реализованы только команды show-modal, close, request-close, toggle-popover, show-popover и hide-popover. В будущем ожидается поддержка invoker-команд для увеличения/уменьшения значений, взаимодействия с медиаэлементами, копирования текста и прочего.

<button command="show-popover" commandfor="example-command-popover">Open</button>
<button command="hide-popover" commandfor="example-command-popover">Close</button>
<dialog id="example-command-popover" popover>
	<p><code>show-popover</code> opens this and <code>hide-popover</code> closes it!</p>
	<button command="hide-popover" commandfor="example-command-popover">Close</button>
</dialog>

loading="lazy"

Поддержка браузеров: loading-lazy-attr →

Загрузка этого изображения откладывается до момента, пока оно не окажется рядом с областью просмотра — и всё без единого IntersectionObserver. (MDN)

<img src="/images/avatar@2x.jpeg" loading="lazy" width="200" height="200" alt="Chris Burnell’s avatar.">

hidden until-found

Поддержка браузеров: hidden until-found →

Переход по фрагментной ссылке ниже раскрывает скрытый блок — браузер сам удаляет атрибут hidden="until-found". (MDN)

Примечание: эта возможность ещё довольно свежая и хорошо работает только со встроенным браузерным поиском по странице, но плохо сочетается, например, с поиском в скринридерах. Тем не менее стоит держать её в уме на будущее.

<a href="#example-until-found">Jump to hidden content</a>
<div id="example-until-found" hidden="until-found">
	<p>Yahaha! You found me!</p>
</div>

Поля цвета, даты и диапазона

«Поддержка браузеров»: input-color →, input-range →, input-datetime →

Пикеры цвета, диапазона значений и даты, встроенные прямо в браузер. (MDN: Color Input, MDN: Range Input, MDN: Date Input)

Предупреждение! Некоторые из этих элементов выглядят немного недоработанными. Хочется надеяться, что в ближайшие годы формы получат больше внимания разработчиков браузеров, но на данный момент реализации всё ещё уступают. С некоторыми из этих полей стоит быть очень осторожным: стандартные стили сильно различаются между браузерами, а качество доступности зачастую оставляет желать лучшего. Подводных камней здесь хватает.

Цвет

Диапазон

Дата

<label>Colour <input type="color" value="#5f8aa6" autocomplete="off"></label>
<label>Range <input type="range" min="0" max="100" value="50" autocomplete="off"></label>
<label>Date <input type="date" autocomplete="off"></label>

<datalist>

«Поддержка браузеров»: datalist →

Нативные подсказки автозаполнения без сторонних библиотек для выпадающих списков. (MDN)

Предупреждение! Поддержка этого элемента для разных типов полей всё ещё неровная, к тому же в реализациях браузеров хватает проблем. Подробнее — в материале Адриана Роселли Under-Engineered Comboboxen. Возможно, пока стоит воздержаться от использования этой функции и просто следить, улучшится ли ситуация в ближайшие годы.

<label>Favourite HTML element <input type="text" id="example-datalist-input" list="example-datalist" autocomplete="off"></label>
<datalist id="example-datalist">
	<option value="a">
	<option value="abbr">
	<option value="address">
	<!-- ... -->
</datalist>