Результаты State of HTML

После длительного затишья опубликованы результаты опроса State Of HTML 2023. Напомню, что это опрос для разработчиков на тему использования различных фич HTML, DOM и других браузерных API. Цель этого опроса — выявить проблемные моменты и болевые точки, с которыми сталкиваются разработчики.

По ссылке можно ознакомиться с цифрами и итоговым результатом от Лии Веру, основного автора этого опроса. Ну а я могу сделать отдельный разбор результатов.

Global Accessibility Awareness Day 2024

Сегодня третий четверг мая — всемирный день информирования о доступности (Global Accessibility Awareness Day). Так как моя деятельность в том числе сосредоточена в этом направлении и тематика канала соответствует, не могу пройти мимо.

Предлагаю посмотреть видео про введение в доступность от W3C и видео приложения Be My Eyes.

Второе видео я несколько лет назад увидел в одной из презентаций Виталия Фридмана, автора проекта Smashing Magazine. И этот ролик лично меня растрогал.

Обновлённые Easy Checks

Ко всемирному дню информирования о доступности, команда WAI (Web Accessibility Initiative) опубликовала черновик обновленного чеклиста Easy Checks.

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

Easy Checks включает в себя следующие проверки:
- Проверка наличия текстового описания у изображений (атрибут alt)
- Проверка наличия заголовка страницы (<noscript>)
- Проверка структуры и иерархии заголовков
- Проверка контрастности цветов
- Проверка наличия ссылки для перехода к основному контенту (Skip link)
- Проверка отображения рамки фокуса при использовании клавиатуры
- Проверка указания языка страницы (атрибут lang)
- Проверка возможности масштабирования страницы и ее реакции на это
- Проверка наличия субтитров для видео
- Проверка наличия транскрипции для аудио/видео
- Проверка наличия описания для аудио
- Проверка наличия меток у полей ввода
- Проверка наличия обязательных для заполнения полей ввода

Это только некоторые проверки, и соответствие им не сделает сайт полностью доступным. Однако, исправление этих наиболее распространенных проблем значительно повысит доступность и удобство использования сайта для широкой аудитории пользователей.

Если вы хотите обратить внимание на доступность своего сайта, но не знаете, с чего начать, то Easy Checks — отличная отправная точка. Он не сложный и не требует специальных знаний в области доступности и инструментов для проведения аудита. Кроме того, Easy Checks может быть полезным руководством для внедрения в работу команды QA.

Контент на ближайшее время

Этот месяц оказался богатым на события: Google I/O, результаты State of HTML, встречи WCCG, митап W3C AC, GAAD и т.д. Поэтому я готовлю много контента по итогам этих мероприятий, который в ближайшее время будет на канале.

Оставайтесь на связи! 🤙

Длина alt

Не стоит писать слишки длинный текст в alt. Почему — объясняет Стас в своём канале UX + Dev = A11y. Если вам интересна тема доступности, то рекомендую подписаться.

Edge WebUI 2.0

Команда Microsoft Edge поделилась статьёй и коротким роликом о проекте под названием WebUI 2.0. Это внутренний проект, направленный на переработку архитектуры пользовательского интерфейса Edge и улучшение его производительности.

Не секрет, что интерфейс браузеров (вкладки, поисковая строка, панель настроек, главный экран, DevTools и т.д.) разрабатывается при помощи веб-технологий HTML, CSS и Javanoscript. Я как-то писал, что можно проинспектировать DevTools в DevTools.

Команда Edge использует React для разработки некоторых частей интерфейса браузера. В рамках внутренних экспериментов, с целью улучшения производительности, они опробовали новую архитектуру и получили прирост показателей. Новая архитектура основана на принципе markup-first и веб-компонентах.

Начиная с Edge 122, те части интерфейса, которые были переписаны под новую архитектуру, стали в целом на 42% быстрее для пользователей и на 76% быстрее для пользователей со слабыми устройствами (без SSD и менее 8гб оперативной памяти). В Edge 124, панель Favorites станет на 40% быстрее.

WebUI 2.0 полагается на рендрениг обычной разметки HTML, библиотеку веб-компонентов, новые браузерные API и паттерны на их основе. Целью было получить сопоставимый опыт с фреймворками, но быть ближе к веб-платформе и использовать меньше стороннего кода. И, кажется, у них это получилось.

Google I/O 24: The state of CSS and Web UI (часть 1)

14 мая прошла ежегодная конференция Google I/O. В секции про Web, Уна Кравец рассказала, что нового уже появилось и появится в скором времени в HTML и CSS в рамках браузера Google Chrome. Фич на самом деле очень много и некоторые из них уже прям хочется затащить на проекты. Уж очень они крутые и полезные.

Условно, фичи можно разделить на 3 группы:
- Интерактивный опыт и анимации
- UI-элементы и примитивы
- Фичи для DX

Видео-презентация доступна на ютубе, ну а я предлагаю кратко рассмотреть каждую фичу по группам с ссылками на дополнительные материалы.

⬇️

Google I/O 24: The state of CSS and Web UI (часть 2)

Начнём с новых фич, связанных с анимацией. И тут действительно много интересного.

Scroll-driven animations

Представьте сайты, где при прокрутке летают и появляются элементы. Для подобных задач обычно используются библиотеки, вроде GSAP Scrolltrigger. Так вот, Scroll-driven animations — это встроенный способ делать анимации, привязанные к прокрутке или появлению в области просмотра. Причём делать это можно как в CSS, так и в Javanoscript (Web Animations API). Подробнее про Scroll-driven animations, небольшой видео-курс по Scroll-driven animations, примеры на сайте scroll-driven-animations.style, полифилл. Доступно в Chrome и Edge 115+ и Firefox Nightly.

Same-document View Transitions

Одна из горячо обсуждаемых новинок. View Transitions — это API для анимации переходоа между страницами, правда пока только для SPA. При помощи этого API можно реализовать бесшовные переходы между экранами приложения, как на мобильных устройствах. Подробнее про Same-document View Transitions. Доступно в Chrome и Edge 111+.

View Transition Classes

View Transition продолжает развиваться. Новая фича добавляет возможность применять одну анимацию к группе однотипных элементов с указанным классом. Например, можно анимировать изменение порядка карточек в результате сортировки, фильтрации, добавления или удаления их из списка. Подробнее про View Transition Classes. Доступно в Chrome и Edge 125+.

View Transition Types

Другое улучшение для View Transition API — типы, чтобы задавать разные анимации для перехода со одной страницы на другую и обратно. Например, переход с главной на каталог происходит как slide-left (главная уезжает влево, каталог выезжает справа). А обратная анимация slide-right (каталог уезжает вправо, главная выезжает слева). Подробнее про View Transition Types. Доступно в Chrome и Edge 125+.

Cross-document View Transition

А вот это вообще киллер-фича —  анимированные переходы между страницами обычных многостраничных сайтов. И для этого не нужно делать SPA. Кстати, похожее умел делать ещё Internet Explorer 5.5 🌚, а Chrome вот-вот научится. Подробнее про Cross-document View Transition. Доступно в Chrome и Edge 126+.

Scoped transitions, Gesture-driven transitions, Navigation matching in CSS

Всё это про будущие доработки и улучшения View Transition API. Интеракция с частями страницы во время анимации, основанные на жестах анимации (переключение страниц свайпами влево-вправо на телефонах, удаление элементов смахиванием вверх) и полное управление анимацией через CSS.

Animate display and content-visibility on a keyframe timeline

Свойства display и content-visibility не анимируются. Приходится использовать костыли, чтобы красиво показать диалоговое окно. Так вот, появляется возможность анимировать свойство display внутри @keyframes. Свойства применятся в самом начале или конце таймлайна анимации. Подробнее про анимацию display и content-visibility. Доступно в Chrome и Edge 116+ и Safari TP.

transition-behavior: allow-discrete

А если нужно анимировать display при помощи transition? Добавляется новое свойство transition-behavior: allow-discrete, которое включает режим анимации дискретных свойств (в том числе display). Подробнее про transition-behavior. Доступно в Chrome и Edge 117+ и Safari 17.4.

@starting-style

А если хочется анимировать какие-то свойства при появлении элемента? Для этого добавлена директива @starting-style. Она позволяет задавать стартовые значения свойств, которые будут анимированы к новым значениям, указанным для элемента. Подробнее про @starting-styles. Доступно в Chrome и Edge 117+ и Safari 17.5.

overlay

С внедрением <dialog> и Popover API, в браузерах появился отдельный слой top-layer и псевдо-элемент ::backdrop. Есть необходимость как-то это анимировать. overlay даёт возможность делать плавные анимации появления и исчезновения диалогов и попапов в сочетании с @starting-style и allow-discrete. Подробнее про overlay. Доступно в Chrome и Edge 117+.

Google I/O 24: The state of CSS and Web UI (часть 3)

Тут рассмотрим новые возможности, связанные с UI-компонентами и примитивами для их создания.

Popover API

Новый API позволяет делать различные выпадающие элементы при помощи кнопки, ряда новых атрибутов и псевдо-классов в CSS. Про это я уже рассказывал ранее и ещё расскажу в ближайшем будущем. Подробнее про Popover API. Доступно в Chrome и Edge 114+, Firefox 125+ и Safari 17+.

Anchor Positioning API

Если вы когда-нибудь делали элементы, которые должны быть привязаны к другим элементам (тултипы, например), то вы использовали что-то вроде Popper или Floating UI. Новый API Anchor Positioning предлагает встроенный в браузеры функционал привязки элементов друг к другу без Javanoscript. В сочетании с Popover API это предоставит возможность реализовывать многие интерфейсные паттерны в простом декларативном стиле без лишних библиотек. Подробнее про Anchor Positioning API и песочница для экспериментов с разными вариантами позиционирования. Доступно в Chrome и Edge 125+.

interesttarget

Доработки Popover API продолжаются. Сейчас для переключения поповера нужна кнопка и клик по ней. Новый атрибут interesttarget даст возможность вместо клика вызывать поповер по ховеру или фокусу на кнопке. Также рассматривается возможность добавить этот атрибут для ссылок. Popover API с interesttarget и Anchor Positioning API позволит создавать тултипы. Подробнее про interesttarget в предложении OpenUI. Фича в разработке, пока не доступна ни в одном из браузеров.

Invokers API

Продолжение идей, заложенных в Popover API. Почему декларативно, при помощи кнопки, можно только скрывать/показывать поповер? Как на счёт других частых действий, для которых пишется Javanoscript? Invokers API добавляет кнопке новые атрибуты, при помощи которых можно декларативно вызывать действия с другими элементами. Например, открыть <dialog> без Javanoscript или поставить <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+.

Google I/O 24: The state of CSS and Web UI (часть 4)

Последняя и заключительная часть про новинки HTML и CSS с Google I/O. В этой части посмотрим на различные фичи, улучшающие DX.

CSS Nesting Lookahead

В CSS появилась вложенность, к которой многие привыкли в препроцессорах. В базовой реализации было неудобно добавлять & перед вложенными элементами. Это исправили и теперь писать & не обязательно. Подробнее про Nesting Relaxed Syntax. Доступно в Chrome и Edge 120+, Firefox 117+ и Safari 17.2+.

align-content в блочных элементах

Фича, которая вызвала дикий восторг у аудитории. Мы привыкли к свойству align-content внутри flex и grid. И если нам нужно что-то вертикально выровнять, мы делает контейнер flex или grid только ради того, чтобы применить align-content. Теперь свойство align-content будет работать и внутри block. Подробнее про align-content в блочных элементах. Доступно в Chrome и Edge 123+, Firefox 125+ и Safari 17.4+.

text-wrap: balance и text-wrap: pretty

Новые значения для выравнивания и переноса текста. text-wrap: balance балансирует текст, чтобы длина всех строк в блоке была как можно более равной. Это полезно для заголовков. Подробнее про balance. Доступно в Chrome и Edge 114+, Firefox 121+ и Safari 17.5+. text-wrap: pretty переносит текст таким образом, чтобы в конце текста на новой строке не оказалось одно слово. Подробнее про pretty. Доступно в Chrome и Edge 117+.

word-break: auto-phrase

Ещё одно улучшение для работы с текстом в CSS. Новое значение word-break: auto-phrase позволяет управлять автоматическим переносом и правильно переносить фразы для CJK-языков (Китайский, Японский, Корейский и подобные). Подробнее про auto-phrase. Доступно в Chrome и Edge 119+.

text-spacing-trim

В типографии CJK-языков принято разделять знаки препинания небольшими отступами для лучшей читаемости. Свойство text-spacing-trim как раз включает режим, при котором отступы автоматически добавляются. Фича будет по умолчанию включена в браузерах, которые поддерживают это свойство. Подробнее про text-space-trim и его полное описание в черновике спецификации. Доступно в Chrome и Edge 123+.

Relative Color Syntax

Продолжается работа над цветами в CSS. Relative Color Syntax позволяет изменять компоненты цветов в разных цветовых пространствах и форматах. Например, можно взять цвет в формате oklch и изменить параметры (l - lightness, c - chroma, h - hue), сделать цвет чуть ярче или тусклее, изменить оттенок. Ещё это позволяет конвертировать цвета из одного формата в другой. Подробнее про Relative Color Syntax. Доступно в Chrome и Edge 119+ и Safari 16.4+.

light-dark()

Новая CSS-функция light-dark() принимает два цвета. Первый будет применён для светлой темы (prefers-color-scheme: light), второй — для тёмной темы (prefers-color-scheme: dark). Сейчас это же можно реализовать при помощи Custom Properties и prefers-color-scheme. Но с light-dark() это удобнее. Подробнее про light-dark() и плагин для PostCSS. Доступно в Chrome и Edge 123+, Firefox 120+ и Safari 17.5+.

:has()

:has() — родительский селектор, с помощью которого можно стилизовать элемент в зависимости от его дочерних элементов и их состояний. Вариантов применения уже придумано огромное количество. Интерактивный гайд Ахмада Шадида по :has(). Доступно в Chrome и Edge 105+, Firefox 121+ и Safari 15.4+.

Container Queries

Container queries позволяют менять внешний вид элемента в зависимости от ширины контейнера, а не ширины всего экрана. Можно будет создавать универсальные компоненты, которые будут адаптироваться в зависимости от места использования. Подробнее про Container Queries, Интерактивный гайд Ахмада Шадида по Container Queries. Доступно в Chrome и Edge 106+, Firefox 110+ и Safari 16+.

property

По умолчанию все Custom Properties — строки. Браузер сам преобразует их в нужные типы. Но браузер не понимает, как анимировать из строки в строку. @property решает эту проблему. Директива позволяет указать тип, значение по умолчанию и наследуемость для Custom Properties. Подробнее про @property. Доступно в Chrome и Edge 85+, Firefox 128+ и Safari 16.4+.

Результаты State Of HTML 2023 (часть 1)

Опубликованы результаты опроса State Of HTML. С цифрами и выводами можно ознакомиться на сайте опроса. Я сосредоточусь на отдельных моментах.

Опытные разработчики

28% участников — разработчики с опытом 11-20 лет, 24% — с опытом 6-10 лет, 16% — с опытом более 20 лет. Аудитория достаточно опытная.

Нарушения здоровья

20% отметили те или иные нарушения здоровья: когнитивные, проблемы со зрением, проблемы со слухом и нарушения, связанные с мобильностью. Это примерно согласуется со всемирной статистикой. Так что доступность важна.

Список для чтения

В ходе опроса можно было сохранять фичи в список для чтения. Больше всего в список добавляли:
- <datalist>
- <selectlist>
- Popover API
- input.showPicker()
- HTML Media Capture
- inert
- <search>
- Badging API
- Exclusive Accordion
- autocomplete

Сделаю отдельные посты про каждую из этих фичей.

Формы

Главными претензиями к формам, как были, так и остаются — стилизация и проблемы с полями ввода. Также у разработчиков вопросы к механизму валидации, браузерной поддержке, обработке данных форм, доступности, обработке ошибок, contenteditable, управлению состоянием форм и лейблам.

Интерактивность

Разработчики примерно в равной степени используют Javanoscript без фреймворков (89%) и фреймворки (87%) для создания интерактивности. Основные болевые точки: браузерная поддержка, манипуляции DOM, образовательные материалы, зависимость от Javanoscript, обработка событий, веб-компоненты, доступность, управление состоянием, реактивность и стилизация.

Контент

Разработчики активно используют Intl API для форматирования дат, чисел и т.д. Главные боли с контентом: SVG, менеджмент изображений, <iframe>, интернационализация, браузерная поддержка, стилизация, безопасность и приватность, работа с датами, образовательные материалы и проблемы с <input>.

Результаты State Of HTML 2023 (часть 2)

Web Components

Тут остановимся подробнее. 42.9% использовали Custom Elements, а 32.5% определяли свои элементы (customElements.define()). То есть часть разработчиков потребляет готовые компоненты, но не создаёт свои. Среди библиотек готовых веб-компонентов отметили Material 3 (Material Web Components). Также в списке есть мой фаворит — Shoelace.

К болям использования веб-компонентов относят: стилизацию, поддержку фреймворков, образовательные материалы, SSR, Shadow DOM, зависимость от Javanoscript, сложность, доступность и несовместимость.

Боли, связанные с разработкой веб-компонентов: образовательные материалы, браузерная поддержка, Shadow DOM, стилизация, сложность, зависимость от Javanoscript, бойлерплейт, SSR, доступность и многословность.

Доступность

Радует, что разработчики в целом используют различные техники доступности. Даже новый элемент <search> уже использовало 11.8%. Ещё более интересно, что предложенный группой OpenUI атрибут focusgroup, который нигде не реализован, использовало 7.4%. Я сам очень жду этот атрибут и подробнее о нём расскажу.

Другие техники доступности, которые применяют разработчики: alt, информативная структура контента, лейблы для полей форм, осмысленный текст в ссылках, контрастные цвета, клавиатурная навигация, видимая рамка фокуса, альтернатива для цветов и курсора мыши, <fieldset> + <legend> и Skip-link. Неплохо.

Боли с разработкой доступных интерфейсов следующие: технические проблемы, образовательные материалы, проблемы на уровне бизнеса, проблемы реализации, проблемы со скринридерами, недостаток инструментов, браузерная поддержка, недоработки WCAG, проблемы с элементами HTML и зависимость от Javanoscript.

Веб-приложения

В этом разделе речь идёт, в основном, о PWA. Я сильно в этом не разбираюсь, поэтому сказать особо нечего.

Боли при разработке веб-приложений (PWA): проблемы на iOS, проблемы с PWA, браузерная поддержка, проблемы с UX, образовательные материалы, Service Workers, проблемы реализации, доступ к нативным API, производительность и уведомления.

Инструменты и другие фичи

Наиболее часто для генерации разметки используются Next.js, Astro и Nuxt. Не смотря на падение популярности, Gatsby всё ещё активно используется. Приятно видеть в списке Eleventy. Всё ещё используют статические генераторы Jekyll и Hugo. Замыкает топ SvelteKit.

Люди используют AI для написания разметки: ChatGPT, Copilot и Bard. Мой опыт использования AI для генерации разметки оказался не очень хорошим.

Некоторые разработчики всё ещё применяют старые элементы: <center>, <marquee>, <font>, <frameset> + <frame>, <blink>, <applet>, <plaintext>, <isindex> и <nextid>.

Выводы

Много болей разработчиков связаны с стилизацией и кастомизацией. Но сдвиги в этом направлении есть, что хорошо. Спасибо проектам Interop и ребятам из OpenUI.

Также достаточно распространённой болью является недостаток образовательных материалов. Разработчики не могут получить информацию, как правильно использовать тот или иной API. Для меня это сигнал, на что стоит обратить внимание при выборе тем для публикации.

Веб-компоненты продолжают развиваться и набирать популярность. Это видно как из цифр опроса, так и по информационному полю.

Растёт и внимание к доступности. Возможно, это связано с ужесточением законов в некоторых странах и грядущим European Accessibility Act. Или же улучшилась ситуация с информацией о том, как лучше разрабатывать интерфейсы. Скорее всего, и то, и другое.

You don't know HTML: <datalist>

Совмещу рубрику You don't know HTML с разбором возможностей, которые чаще всего сохраняли в список для чтения в ходе опроса State Of HTML. Начну с <datalist>.

По спецификации, <datalist> — это набор предопределённых значений для поля ввода. В базовом случае это контейнер для элементов <option>. Он привязывается к <input> при помощи атрибутов list и id. Опции — это готовые варианты, доступные для выбора в качестве значения поля ввода. При этом само поле остаётся редактируемым. Иными словами, это встроенный в браузеры элемент Combobox.

<label for="country"></label>
<input type="text" id="country" list="sugguestions">
<datalist id="sugguestions">
  <option value="USA"></option>
  <option value="Germany"></option>
  <option value="Spain"></option>
  <!-- ... -->
</datalist>

На десктопе отображается выпадающий список с опциями. Он похож на тот, что отображается при autocomplete. На мобильных устройствах в верхней части виртуальной клавиатуры появляется прокручиваемая панель с опциями. Это механизмы браузера, изменять внешний вид и поведение нельзя. Кроме того, есть некоторая неконистентность поведения между браузерами и операционными системами.

С точки зрения доступности, <input list> получает встроенную роль combobox и соответствующие ARIA-атрибуты. Предусмотрена клавиатурная навигация: опции можно переключать стрелками и выбирать при помощи Enter или Space, закрыть список можно по Esc, а открыть стрелкой вниз. Однако не все так гладко с доступностью. Заведено issue с описанием проблем.

<datalist> может предоставлять резервный вариант в браузерах, которые про такой элемент не знают. Внутрь <datalist> можно поместить <select> с набором <option>. Если браузер поддерживает <datalist>, то он проигнонирует всё, кроме <option>. Если браузер не поддерживает <datalist>, то он будет считать элемент как <span> и отобразит внутреннее содержимое. На практике такое вряд-ли понадобится, потому что все современные браузеры элемент поддерживают. Но такой способ применения есть.

<label for="country">Country</label>
<input type="text" id="country" list="sugguestions">
<datalist id="sugguestions">
  <label for="fallback">(or choose one of them)</label>
  <select id="fallback">
    <option value="us">USA</option>
    <option value="de">Germany</option>
    <option value="es">Spain</option>
    <!-- ... -->
  </select>
</datalist>

<datalist> по-разному взаимодействует с разными типами полей ввода. Он не работает для полей с типами hidden, password, checkbox, radio, file, submit, image, reset и button. Для полей с типами text, search, tel, email, url и number отображается выпадающий список с опциями. Для полей с типами date, month, week, time и datetime-local нужно соблюдать определённый формат значений value у <option>, чтобы подсказки появились. Для range отображаются засечки, к которым привязывается ползунок. Для выбора типа color отображаются цветные квадраты, если value задан в полном или сокращённом формате HEX. На мобильных устройствах своё поведение в зависимости от типа. Примеры можно посмотреть в Доке.

Использовать элемент можно по-разному. Если есть статистика поиска в интернет-магазине, то можно добавить 5 самых популярных товаров в качестве подсказок. Или для поля ввода города добавить наиболее частые варианты. Можно переопределить варианты, которые сгенерировал браузер на основе autocomplete.

Второе дыхание элемент <datalist> получит благодаря предложению от OpenUI. Его суть в том, чтобы переиспользовать <datalist> для стилизации многострадального <select>. Подробнее в следующем посте.

#ydkhtml

Элемент <selectlist>

Ранее я уже рассказывал об элементе <selectmenu>. Это предложение от группы OpenUI, которое было призвано решить проблемы стилизации <select>. Новый элемент использует некоторые идеи веб-компонентов и композицию, чтобы можно было собрать и стилизовать выпадающий список с выбором под свои нужды. С 97 версии Chrome и Edge новый элемент можно опробовать за флагом.

Спустя какие-то время, в результате дискуссий в репозитории OpenUI, было принято решение переименовать элемент с <selectmenu> на <selectlist>. По мнению некоторых участников дискуссии, menu в названии может привести к неверному пониманию назначения элемента у разработчиков. Из-за этого элемент могли использовать для создания различных типов меню, а это не то, для чего задуман новый элемент. Меню — это совершенно другой паттерн и семантика.

В какой-то момент с сайта OpenUI пропало предложение что по <selectmenu>, что по <selectlist>. По старым ссылкам располагается страница, которая предлагает перейти на другое предложение — Stylable Select Element. В его URL всё ещё содержится selectlist, а из дискуссий становится ясно, что перед нами дальнейший этап инкубации на тему стилизации <select>.

В новой итерации прнято решение использовать существующие элементы вместо добавления новых. Предлагается использовать комбинацию <select>, <button>, <datalist> и <option> для создания стилизуемых вариантов.

<label for="country">Country</label>
<select id="country">
  <button>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="us">
      <img src="usa.jpg" alt="flag of USA">
      USA
    </option>
    <option value="de">
      <img src="germany.jpg" alt="flag of Germany">
      Germany
    </option>
    <option value="es">
      <img src="spain.jpg" alt="flag of Spain">
      Spain
    </option>
  </datalist>
</select>

Наличие внутри <select> элемента <button> и/или <datalist> является сигналом для парсера, что это стилизуемый вариант и с ним нужно работать иначе. Это подразумевает доработку парсера, потому что сейчас всё, кроме <option>, <optgroup> и <hr> игнорируется.

В CSS предлагают добавлять appearance: base-select, чтобы сообщать браузеру, что это не обычный селект, а стилизуемая версия. Дополнительно предлагается добавить псевдо-классы :open и :closed, тип кнопки type="popover", элемент <selectedoption> для отображения выбранного варианта и много чего ещё. Более подробно об этом можно узнать в самом предложении Stylable Select Element.

Условия в CSS

Исторические вещи происходят. Лия Веру поделилась, что было принято решение по условному оператору в CSS. Новая функция if() будет добавлена в спецификацию CSS Values and Units Module Level 5. Когда она появится в браузерах, это вопрос. Но она там появится рано или поздно. Можно будет делать такое:

.element {
  background: if(
    style(--variant: success), var(--green)
  );
  padding: if(
    var(--2xl), 1em, 
    var(--xl) or var(--m), .5em
  );
}

Линии во flexbox и grid

Небольшое предисловие. В CSS есть Multi-Columns Layout. Это возможность разбить текст внутри элемента на несколько колонок (фрагментов по умному) и управлять их поведением. Многие об этом не знают, потому что подобные задачи встречаются не часто. В основном это нужно в сфере типографии. Но иногда и при вёрстке сайтов можно применить.

У мульти-колонок есть свойство column-gap для управления отступами между колонками. Впервые свойство появилось именно в мульти-колонках и потом уже было использовано во флексах и гридах в паре с row-gap и сокращённым свойством gap.

Ещё у мульти-колонок есть возможность отображения линий между колонками. Делается это при помощи свойства column-rule. Его синтаксис такой же, как у border: толщина, тип и цвет. Рисуется вертикальная линия между колонками, на тех местах, где находятся отступы.

А почему бы не сделать такую возможность во флексах и гридах? Я, например, сталкивался с ситуациями, когда это было нужно. Приходилось что-то придумывать. Об этом подумали в команде Edge и выкатили эксплейнер с предложениями по линиям между флекс-элементами и ячейками грида.

В предложении не просто описана возможность добавления линий, а предусмотрены различные сценарии применения. Вертикальные и горизонтальные линии, разные стили, чередование, пересечение, смещение, перекрытие и ещё много чего. Всё рассказать сложно, проще посмотреть на иллюстрации и примеры кода.

Popover API

Popover API недавно стал поддерживаться всеми современными браузерами, а также попал в топ списка для чтения по результатам State of HTML 2023. Это значит, что пришло время поближе познакомиться с этим API.

Popover API — это механизм для создания различных всплывающих элементов интерфейса (поповеров). Механизм преимущественно декларативный, JavaScript не требуется. При этом механизм добавляет много полезного: открытие/закрытие по кнопке, закрытие по Esc и клику вне поповера, встроенные aria-атрибуты, возврат фокуса.

Поповеры бывают двух видов (на данный момент): автоматические и ручные. Автоматический поповер создаётся при помощи кнопки с атрибутом popovertarget, который содержит id поповера. У самого всплывающего элемента при этом должны быть указаны атрибуты popover или popover="auto" и id.

<button
  type="button"
  popovertarget="more"
>
  More info
</button>

<div id="more" popover>
  <p>More information...</p>
</div>

При нажатии на кнопку, отображается связанный поповер. При повторном нажатии на кнопку, нажатии клавиши Esc или нажатии в любом месте вне поповера, он скрывается.

Ручной поповер создаётся при помощи атрибута popover="manual". Такой поповер не будет закрыт при нажатии в произвольном месте. Для закрытия требуется кнопка с атрибутом popovertargetaction="hide". Также закрыть ручной поповер можно при помощи Esc.

<button
  type="button"
  popovertarget="more"
>
  More info
</button>

<div id="more" popover="manual">
  <p>More information...</p>
  <button
    type="button"
    popovertarget="more"
    popovertargetaction="hide"
  >
    Close
  </button>
</div>

Помимо значения hide (только закрыть) доступны значения show (только показать) и toggle (переключить видимость).

Сам поповер вырывается из основного потока и помещается в специальный слой top-layer, который всегда будет выше любого z-index. У поповера есть псевдо-элемент ::backdrop, что позволяет стилизовать задний фон (оверлей). Открытый поповер можно стилизовать через псевдо-класс :popover-open. По умолчанию поповер располагается по центру экрана, а его размеры определяются по контенту. Подробнее про стандартные стили поповера можно прочитать в блоге Mayank.

Кнопка управления поповером получает встроенные атрибуты aria-expanded, и aria-details. Если у поповера роль generic, то она заменяется на group, иначе используется встроенная роль или указанная в атрибуте role. Поповер становится следующим элементом в последовательности табуляции, даже если между ним и кнопкой есть другие интерактивные элементы. При закрытии поповера через Esc, фокус возвращается на кнопку, с помощью которой он был показан. Подробнее про доступность поповера в блоге Hidde.

В Javanoscript у кнопки управления поповером доступны методы showPopover(), hidePopover() и togglePopover() для программного отображения, скрытия и переключения поповера.

API доступно в Chrome и Edge 114+, Firefox 125+ и Safari 17+. Для более ранних версий можно использовать полифил. Это позволит избавиться от JavaScript-библиотек, которые воспроизводят функциональность Popover API. Когда поддержка будет лучше, полифил можно будет отключить.

API продолжает развиваться. В будущем нас ожидают доработки: popover="hint", ::tooltip и role="tooltip" для тултипов, Anchor Positioning API для позиционирования и т.д.

Забавный факт: известно, что все эти новые атрибуты из Popover API объявят устаревшими. Дело в том, что новый Invoker Commands API принесёт с собой новые атрибуты, которые заменят текущую реализацию Popover API. Но об этом в другой раз.

Как не мучать пользователя плохими контролами

Буду иногда делиться записями докладов, которые я смотрю и которые кажутся мне интересными, важными и близкими.

Буквально вчера опубликовали запись доклада Ильи Бирмана про плохие контролы. Илья на примере разных сайтов показывает, с какими проблемами сталкиваются пользователи, когда дизайнеры и разработчики плохо продумали UX.

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

Рекомендую посмотреть доклад.

Результаты State of JS

Опубликованы результаты опроса State of JS 2023. Опрос посвящён JavaScript и его экосистеме: фреймворкам, библиотекам тестирования, сборщикам, утилитам и т.д. С результатами можно ознакомиться по ссылке.

Случайная задачка: группа только с кнопками

Совершенно случайно мне в голову пришла одна задачка. Звучит она так:

Можно ли в CSS выбрать элемент, внутри которого находятся только кнопки, и этих кнопок две и более?

Да, иногда приходят такие мысли 😅.

Где это может пригодиться? Ну, предположим, разрабатывается компонент табов, где должен быть элемент с ролью tablist, внутри которого могут быть только элементы с ролью tab и как минимум два таких.

Вернёмся к изначальной задаче с кнопками.
Ответ: так сделать можно. И вот как:

[role="group"]:has(> button:nth-child(2)):not(:has(> :not(button))) {
  width: fit-content;
  border: 2px solid green;
}

И разметка:

<div role="group">
  <button type="button">Action 1</button>
  <button type="button">Action 2</button>
  <button type="button">Action 3</button>
</div>

Абсолютно нечитаемое месиво из селекторов, но оно работает. Вся магия кроется в сочетании :has(), :not() и :nth-child(). Что там вообще происходит? Мы говорим:
1) выбери элемент с атрибутом role="group"
2) внутри которого вторым дочерним элементом является кнопка
3) и внутри которого нет дочерних элементов, которые не являются кнопкой

Иными словами: выбери группу, в которой есть как минимум две кнопки и нет ничего кроме кнопок.

Перекладывая эту идею на табы, можно получить такой селектор:

[role="tablist"]:has(> [role="tab"]:nth-child(2)):not(:has(> :not([role="tab"]))) {
  /* стили */
}