Однажды у нас будет полностью настраиваемый select

Сегодня я хочу рассмотреть предложенную функцию HTML, которая может в итоге заменить множество пользовательских компонентов ввода на основе <div>: <selectmenu>.

CSS это круто

Позвольте мне начать с CSS. CSS — это фантастика, потому что уже более 25 лет он позволяет нам решать, как должны выглядеть наши веб-сайты. Но так было не всегда. До появления CSS вы могли определять только структуру своих страниц, а браузеры определяли их внешний вид.

Перенесемся в настоящее, CSS не просто существует, он стал чрезвычайно универсальным. У нас есть grid’ы, CSS-переменные, преобразования через transform и многое другое, и все это довольно хорошо работает в разных браузерах. Основной принцип CSS остается неизменным: стили — это подсказки. То, как выглядят веб-сайты, зависит от предпочтений пользователей, браузеров и веб-разработчиков.

Но, возможно, в вашей дизайн-системе ваш select имеет очень специфические стили. Тени вокруг списка, особые настройки отступов… или ваш select содержит больше, чем просто строки текста, например флаги с названиями стран или аватары с именами пользователей. Элемент <select> не позволит вам сделать всё это на CSS. Здесь на сцене появляется <selectmenu>.

Части selectmenu

Элемент ^[1]<selectmenu> — это новый элемент HTML, предложенный Open UI Community Group ^[2]. Он еще не попал в спецификацию HTML ^[3], но его прототип находится в Chromium ^[4]. Вы можете проверить это, включив флаг «Experimental Web Platform Features» (перейдите на страницу about:flags и найдите этот флаг).

Когда вы используете <selectmenu>, вы обнаружите, что оно состоит из разных частей:

<select> - корневой элемент

<button> — кнопка, нажав на которую, вы откроете select

<selected-value> - текущее выбранное значение

<marker> - стрелка, которая находится в кнопке

<listbox> - всплывающее окно, которое открывается при нажатии на кнопку

<option> — параметры в списке (как и в обычном <select>)

<optgroup> — необязательный способ группировки опций (как и в обычном <select>)

Источник: Anatomy of the selectmenu ^[5]

Стилизация selectmenu

Стилизация частей

В CSS Shadow Parts 1 ^[6], который в настоящее время находится в стадии рабочего черновика (Working Draft) (т. е. еще не является полноценным стандартом ^[7]), вводится новый псевдоэлемент, позволяющий стилизовать части теневых корней: ::part().

Подождите, разве Shadow DOM не был чем-то специфичным для веб-компонентов? Да. Но то, как <selectmenu> реализован в браузере, похоже на веб-компонент. Вы можете смотреть на него как на веб-компонент, который поставляется с браузером.

С помощью ::part вы можете стилизовать различные части так, как они описаны выше, например, чтобы стилизовать список, вы должны написать:

selectmenu::part(listbox) {
  box-shadow: 3px 3px 3px 3px hotpink;
}

Или, может быть, вы хотите изменить внешний вид стрелки:

selectmenu::part(marker) {
  box-shadow: 3px 3px 3px 3px hotpink;
}

(<marker> еще не добавлен в объяснение selectmenu, но это было утверждено на собрании Open UI ^[8])

Состояние стилей

Вы также сможете стилизовать selectmenu в зависимости от того, открыто оно или закрыто, используя псевдокласс :open:

selectmenu {
  border: 2px solid black;
}

selectmenu:open {
  border-color: hotpink;
}

Или, может быть, вам нужен другой маркер, когда selectmenu открыто:

selectmenu::part(marker) {
// regular
}

selectmenu::part(marker):open {
// open
}

Также будет псевдокласс :closed для стилизации закрытого состояния. Это было бы эквивалентно :not(:open). Псевдоклассы:open и :closed определены в Element Display State section of Selectors, Level 4 ^[9].

Кастомизация, выходящая за рамки простых стилей

Вы также можете заменить части, показанные выше, на свою собственную разметку. Части, показанные выше, представлены как «слоты», что означает, что вы можете добавить свою собственную древовидную структуру в разметку и использовать её для замены какой-либо части.

Например, вот как вы замените иконку чем-то другим:

<selectmenu>
  <div slot="marker">
    <!-- your own selectmenu open icon goes here -->
  </div>
</selectmenu>

Все, что находится внутри этого div будет использовано вместо стандартной иконки на кнопке, чтобы открыть selectmenu.

В принципе, <selectmenu> позволит вам делать подобные вещи с каждой из частей, чтобы вы могли заменить кнопку или опции. Это дает разработчикам большую власть, а вместе с ней и ответственность. Итак, предостережение: вложение неправильных элементов в части selectmenu, может быстро привести к «HTMHell». Например, что, если вы поместите в опцию больше, чем просто текст — скажем, аватары — но браузеры и вспомогательные технологии ожидают только текст? Или что, если вы поместите кнопку в опцию? Подобные вложенные интерактивные элементы рискуют нарушить работу конечных пользователей в случаях, когда браузер или вспомогательные технологии не смогут волшебным образом исправить это, поэтому будьте осторожны.

Текущий статус

В настоящее время selectmenu находится в стадии «инкубации» в Open UI Community Group и разрабатывается в Chromium за флагом.

А что насчет других браузеров и браузерных движков? Я не уверен, что произойдет в Safari или Webkit, но люди из Firefox (Mozilla) присоединяются к призывам Open UI. Цитата из «The Declarative Web» посвящённая видению компании Mozilla открытости веба:

[в Интернете встроенные элементы управления] часто недостаточно оформлены и имеют несовместимую внутреннюю структуру в разных браузерах, что затрудняет их визуальное согласование с остальной частью веб-страницы. Мы хотим заполнить эти пробелы и рады видеть, что, благодаря стараниям OpenUI, уже есть успехи в этой области.

Чтобы <selectmenu> стало реальностью, ему нужно будет перейти к стандартам, а затем получить реализацию в браузерах. Пока сложно сказать, когда это произойдет.

Резюме

Итак, вкратце: <selectmenu> — это новое предложение, которое добавит новый элемент управления на веб-платформу, который по умолчанию похож на <select>, но может быть оформлен и настроен практически любым способом, который вы хотите. Меня особенно радует возможность использовать ::part() для стилизации частей, и слегка беспокоит возможность полной замены частей, поскольку это может нарушить доступность, если заменить её неправильными вещами.

Вы можете поиграть с <selectmenu> сегодня в Microsoft Edge Canary или Google Chrome Canary и сообщить о проблемах ^[10] в репозитории Open UI.