Тут рассмотрим новые возможности, связанные с UI-компонентами и примитивами для их создания.
Popover API
Новый API позволяет делать различные выпадающие элементы при помощи кнопки, ряда новых атрибутов и псевдо-классов в CSS. Про это я уже рассказывал ранее и ещё расскажу в ближайшем будущем. Подробнее про Popover API. Доступно в Chrome и Edge 114+, Firefox 125+ и Safari 17+.
Anchor Positioning API
Если вы когда-нибудь делали элементы, которые должны быть привязаны к другим элементам (тултипы, например), то вы использовали что-то вроде Popper или Floating UI. Новый API Anchor Positioning предлагает встроенный в браузеры функционал привязки элементов друг к другу без Javascript. В сочетании с Popover API это предоставит возможность реализовывать многие интерфейсные паттерны в простом декларативном стиле без лишних библиотек. Подробнее про Anchor Positioning API и песочница для экспериментов с разными вариантами позиционирования. Доступно в Chrome и Edge 125+.
interesttarget
Доработки Popover API продолжаются. Сейчас для переключения поповера нужна кнопка и клик по ней. Новый атрибут
interesttarget даст возможность вместо клика вызывать поповер по ховеру или фокусу на кнопке. Также рассматривается возможность добавить этот атрибут для ссылок. Popover API с interesttarget и Anchor Positioning API позволит создавать тултипы. Подробнее про interesttarget в предложении OpenUI. Фича в разработке, пока не доступна ни в одном из браузеров.Invokers API
Продолжение идей, заложенных в Popover API. Почему декларативно, при помощи кнопки, можно только скрывать/показывать поповер? Как на счёт других частых действий, для которых пишется Javascript? Invokers API добавляет кнопке новые атрибуты, при помощи которых можно декларативно вызывать действия с другими элементами. Например, открыть
<dialog> без Javascript или поставить <video> на паузу. Подробнее про Invokers API в предложении OpenUI. API доступно в Canary-версиях всех браузеров.Stylable <select>
Наконец-то появляется решение для давней проблемы — стилизации
<select>. Суть в том, чтобы доработать парсер HTML и позволить вкладывать внутрь <select> такие элементы, как <button> и <datalist>, а также вкладывать в <option> любую произвольную разметку. Это даст возможность стилизовать <select>, его шапку, выпадающий список и опции. Подробнее про Stylable Select Element в предложении OpenUI. Доступно в Chrome и Edge Canary.Exclusive Accordion
Расширение для существующего элемента
<details>, которое добавляет ему новый атрибут name. При помощи него можно объединить несколько <details> в группу, где только один элемент может быть раскрыт одновременно. Самый настоящий нативный аккордеон! Подробнее про Exclusive Accordion. Доступно в Chrome и Edge 120+ и Safari 17.2+.:user-valid и :user-invalid
У полей ввода есть псевдо-классы
:valid и :invalid. Проблема в том, что они срабатывают сразу, даже если пользователь ещё не успел провзаимодействовать с полями ввода. Это приводит к плохому пользовательскому опыту. Новые псевдо-классы :user-valid и :user-invalid сработают только если пользователь уже взаимодействовал с полями ввода. Подробнее про эти псевдо-классы. Доступно в Chrome и Edge 119+, Firefox 88+ и Safari 16.5+.field-sizing: content
Новое свойство CSS для управления размером полей ввода. Представьте задачу: нужно сделать так, чтобы при вводе текста в
<textarea>, её размер увеличивался по мере ввода текста. Свойство field-sizing: content как раз решает эту задачу без лишних скриптов. Подробнее про field-sizing. Доступно в Chrome и Edge 123+.<hr> внутри <select>
Внутрь
<select> можно вкладывать только <option> и <optgroup>, другие элементы будут игнорироваться. Если нужно визуально разграничить опции, то применялись различные хаки. Теперь в <select> можно вкладывать элемент <hr>, который будет создавать разделитель между опциями. Мелочь, а приятно. Подробнее про <hr> в <select>. Доступно в Chrome и Edge 119+, Firefox 122+ и Safari 17+.