CSS Wrapped 2024

Команда Chrome DevRel запустила CSS Wrapped 2024. Это лендинг с обзором новых возможностей CSS, выпущенных в Chrome (и не только) в этом году. Можно считать это итогами года для CSS.

В CSS появилось 17 новых возможностей:

- field\-sizing
- Анимация height: auto, calc\-size() и interpolate\-size
- Exclusive Accordion
- ::details\-content
- Anchor Positioning
- scrollbar\-color и scrollbar\-width
- View transitions
- Scroll-driven animations
- Scroll snap events
- Наследование свойств в ::backdrop
- light\-dark()
- @property
- Popover API
- @starting-style
- ruby\-align
- paint\-order
- CSSNestedDeclarations

Глядя на этот список и отслеживая новинки для публикации в этот канал, я впечатлён развитием CSS в этом году. Не помню такого количества фич раньше. Осталось дождаться хорошей поддержки всего этого. Тут я тоже настроен позитивно, о чём я уже упоминал. А пока предлагаю перейти на сайт CSS Wrapped 2024 и ознакомиться с демками всех новых возможностей. Особенно через последнюю версию Chrome, в которой все они поддерживается.

На самом сайте при этом во всю используются новые возможности CSS, поэтому можно поизучать исходники.

Зум полей ввода на iOS

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

“Баг” происходит, когда у текстовых полей ввода значение font\-size меньше 16px. Это пороговое значение для комфортного чтения. Поэтому при фокусе в поле страница увеличивается для удобства чтения вводимого значения, чтобы компенсировать font\-size ниже порогового значения. Такое поведение распространяется на все браузеры под iOS, так как на данный момент там доступен только один браузерный движок — Webkit. С новыми европейскими регуляциями возможно появление альтернативных движков.

Google тоже учитывает слишком маленький размер шрифта, но иначе. В Lighthouse есть проверка в рамках аудита SEO. Она завершается с ошибкой, если у 40% текста на странице font\-size меньше 12px. Ранее похожая проверка была в Google Search Console, в разделе Mobile-friendly. Но с 1 декабря 2023 года поддержка этого раздела прекращена в пользу Lighthouse.

Чтобы избежать зума страницы на iOS, достаточно установить для текстовых полей значение font\-size больше или равное 16px. И хорошо, чтобы это было минимальным значением в целом, а не только для полей ввода. Не нужно следовать советам, которые предлагают "исправить проблему" путём добавления значение maximum\-scale=1 в мета-тег viewport. Такое "исправление" не проходит один из тестов критерия WCAG 1.4.4 Resize Text. Кроме того, браузеры могут игнорировать значения мета-тега viewport, если сочтут нужным.

You don't know HTML: autocomplete

Атрибут autocomplete устанавливается у элементов <form>, текстовых полей ввода <input> и <textarea>. Это подсказка для браузера, какие данные ожидаются в полях. Это именно подсказка, полного контроля нет. Браузер сам принимает итоговое решение на основании множества факторов.

Типы полей <input>, значения атрибутов name и id, текст в <label> и placeholder, соседние элементы, иногда даже значения в атрибуте class и некоторые предположения использует браузер, чтобы вычислить данные, потому что формы не всегда спроектированы хорошо. Есть доклад и статья от разработчиков Яндекс Браузера о том, как работает автозаполнение. Так как Яндекс Браузер основан на Chromium, это справедливо для всех браузеров на этом движке. В других движках механизмы схожие.

autocomplete вместе с правильно спроектированной формой ускоряет ввод данных и снижает количество ошибок. Браузеры сохраняют пароли, адреса, данные банковских карт, ФИО и некоторые другие данные при заполнении форм на других сайтах. Данные можно добавить вручную в настройках браузера.

```

```

У autocomplete не очень много значений, но они покрывают наиболее распространённые сценарии форм: логин, регистрация, оформление заказа, обратная связь. Не исключено, что в будущем появятся новые значения. Например, не так давно было добавлено значение webauthn для Web Authentication API.

В качестве значений можно использовать несколько токенов для разграничения, например, адреса доставки и адреса выставления счёта:

<label for="shipping">Адрес доставки</label> <input type="text" id="shipping" name="shipping" autocomplete="shipping street\-address"> <label for="billing">Платёжный адрес</label> <input type="text" id="billing" name="billing" autocomplete="billing street\-address">

Аналогично можно помечать домашний, рабочий и мобильный телефоны (home tel, work tel или mobile tel). Можно добавлять секции (section\-*) для разделения комплексных форм, где есть разделы или динамические группы полей.

Если форма размечена корректно, используется autocomplete и у браузера достаточно данных, то он может заполнить всю форму в один клик. Это очень удобно, особенно на мобильных устройствах. Для максимальной точности советуют использовать распространённые значения для атрибутов name и id, соответствующие типы полей и autocomplete одновременно.

Для отладки автозаполнения форм в Chrome 124 добавили новую панель Autofill. Туда можно добавить разные данные и отлаживать, как форма будет заполняться.

#ydkhtml

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

Без лишних предисловий обзор результатов State of HTML 2024.

Демография

В опросе приняло участие 5402 человека, из которых 58% прошли опрос практически полностью. Аудитория достаточно взрослая и опытная: медианный возраст — 35 лет, а опыт — 15 лет. Эти цифры выше, чем в State of CSS и State of JS. 1248 человек отметило те или иные нарушения здоровья.

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

Топ 5 фич из список для чтения: Customizable Select, focusgroup attribute, Popover API, EditContext и CSS Custom Highlight API. Интересно, что в опросе были фичи, находящиеся на стадии разработки: DOM Parts, HTML Modules, focusgroup attribute.

Формы

Основные боли, связанные с формами: проблемы со стилизацией и баги элементов форм, валидация, браузерная поддержка и обработка форм. Людям нравится <datalist>, стилизуемый <select> и autocomplete, но многие отмечают наличие проблем с ними.

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

Больше всего болей с интерактивностью связано с браузерной поддержкой, элементом <dialog>, анимациями, Popover API и стилизацией. <dialog> и Popover API нравятся людям, но обладают ограниченной браузерной поддержкой.

Контент

При работе с контентом больше всего болей с SVG, менеджментом изображений, интернационализацией, <iframe> и браузерной поддержкой. Content Security Policy и атрибуты изображений srcset и sizes вызывают негативный опыт.

Веб-компоненты

Основные боли при использовании готовых веб-компонентов: стилизация и кастомизация, Shadow DOM, SSR, совместимость с React и доступность. Что касается болей при разработке веб-компонентов, то в топе Shadow DOM, стилизация и кастомизация, чрезмерная сложность и многословность, браузерная поддержка. Shadow DOM и связанные с ним особенности — главная проблема веб-компонентов. Интересно, что среди фреймворков для разработки веб-компонентов на первом месте Svelte.

Доступность

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

Нативные веб-приложения

Из 3560 ответивших, 55% используют JS-фреймворки для разработки нативных приложений, 38% используют нативные и не связанные с JS технологии. Больше всего болей с проблемами на Apple/iOS, проблемами PWA, браузерной поддержкой, пользовательским опытом и производительностью.

Инструменты

Самый популярным генератор сайтов — Next.js, за ним Astro, Nuxt, SvelteKit и Eleventy. Самые популярные валидаторы — W3C Validator и Validator.nu HTML Checker, хотя это одно и то же. Интересно, что больше половины ответивших не используют валидаторы вообще. Среди инструментов производительности в топе Lighthouse, Devtools, PageSpeed Insights, WebPageTest и Pingdom. Для аналитики больше всего используют Google Analytics, Matomo, Datadog, New Relic и Plausible Analytics. Среди браузеров картина стандартная, но интересно разнообразие. Среди ресурсов лидер — MDN, за ним идут Can I Use, Web.dev, W3C и блог WebKit.

Использование

Топ 5 фич, которые разработчики не могут использовать из-за ограниченной поддержки: Popover API, Anchor Positioning, ViewTransition API, <dialog> и PWA. Среди элементов с недостаточной функциональностью <select>, <input type="date">, <dialog>, <datalist> и <details> + <summary>. Список недостающих в HTML элементов не изменился с прошлого года, в топе Data Table, Tabs, Switch, Skeleton, Context menu. Чаще всего HTML используют для веб-приложений, контентных сайтов, маркетинговых сайтов, дизайн-систем и email.

Мнения

Большинство согласно, что доступность ценится на рабочем месте. Многим сложно оставаться в курсе новых фич. В целом люди согласны, что ситуация с кроссбраузерностью улучшается, хотя всё ещё много тех, кто так не считает. Зато большинство согласно, что веб-платформа движется в правильном направлении.

Вот таким был State of HTML 2024. Посмотрим, что изменится в следующем году. А пока предлагаю пройти опрос State of JS 2024, который идёт прямо сейчас.

Синтаксис Custom Properties

Возможно, вы задавались вопросом: почему у custom properties такой странный синтаксис с двумя дефисами в качестве префикса? Почему не использовали символ $, \# или какой-то ещё? Всё дело в парсере CSS. Он давно написан, обрабатывает миллиарды сайтов и ломать его не хочется.

Если у custom properties не будет префикса, возникнут конфликты со стандартными свойствами. Символ @ зарезервирован для медиа-выражений и его использование привело бы к неоднозначным ситуациям парсера. Другие символы не поддерживаются, так как свойства могут начинаться только с буквы или тире.

Парсер умеет разбирать вендорные свойства, например:

\-webkit\-appearance

Они начинаются с дефиса, затем идёт название вендора, затем ещё один дефис и далее название свойства. А если в качестве названия вендора использовать пустую строку?

\-\-appearance

Парсер обработает это как вендорное свойство без имени вендора. Вот и получился синтаксис custom properties, который использует существующий алгоритм парсера и не нарушает синтаксис свойств CSS. По сути, custom properties — это ваши собственные "вендорные" свойства.

На такие компромиссы приходится идти разработчикам спецификаций и парсеров, когда нужно обрабатывать старый CSS, написанный 30 лет назад, параллельно с новым.

Результаты исследований

На прошлой неделе были опубликованы два исследования: результаты опроса State Of HTML 2024 и отчёт Web Almanac 2024.

State Of HTML — это опрос среди разработчиков, который проводится с 2023 года. State Of HTML посвящён HTML, браузерным API, веб-компонентам, доступности и веб-приложениям. Я делал разбор результатов за 2023 год: часть 1 и часть 2.

Web Almanac — это проект HTTP Archive по исследованию состояния веба. Отчёт выходит раз в год, крайний был опубликован в 2022 году. В 2023 году отчёта не было и вот вышел отчёт за 2024 год. Он пока включает не все разделы, но кое что уже можно посмотреть. Web Almanac хорош тем, что собирает данные с миллионов сайтов в интернете и показывает реальное состояние веба. В этом он отличается от того же State Of HTML, который проводится среди активных и осведомлённых разработчиков.

Я планирую детальнее разобраться с результатами и сделать несколько постов с выводами по конкретным направлениям. А пока можете ознакомиться с результатами по ссылкам:

- State Of HTML 2024
- Web Almanac 2024

Улучшения

Недавно я рассказывал о способе создания аккордеонов при помощи элементов <details> и <summary>. Но всё ещё есть некоторые шероховатости при стилизации этих элементов. Команда Chrome в 131-й версии внедряет ряд доработок, которые сглаживают их.

Установка display для <details>

Сейчас установка свойства display со значениями flex или grid для <details> не влияет на отображение. Это ограничивает возможности стилизации. Доработки устраняют ограничения, flex и grid будут работать.

Псевдо-элемент ::details\-content

На данный момент нет способа стилизовать контейнер с контентом, который на самом деле есть в Shadow DOM внутри <details>. Это можно решить добавлением обёртки <div>. Новый псевдо-элемент ::details\-content позволит стилизовать существующий под капотом контейнер с контентом без добавления обёртки.

Анимации дискретных свойств

Новые функции CSS calc\-size(), intetpolate\-size: allow\-keyword и content\-visibility напрямую не относятся к доработкам <details>, но добавляют новые возможности к настройке анимации. Можно будет анимировать свойство display: none, width: auto и height: auto.

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

Хорошие формы

Дейв Руперт собрал список качеств, которыми, по его мнению, обладают хорошие формы. Я в целом согласен с этим списком и привожу тут его адаптацию:

- Хорошие формы работают без клиентского JavaScript
- Хорошие формы всегда отправляются
- Хорошие формы запоминают значения и показывают сообщения об ошибках
- Хорошие формы логина взаимодействуют с менеджерами паролей
- Хорошие формы используют элемент <form>
- Хорошие формы используют подходящие типы полей
- Хорошие формы имеют понятные подписи для полей и кнопок
- Хорошие формы имеют состояние :focus
- В хороших формах логичная последовательность табуляции
- Хорошие формы позволяют вставлять данные из буфера обмена
- Элементы хороших форм используют атрибут inputmode
- Элементы хороших форм используют атрибут autocomplete
- В хороших формах поиска элемент <form> вложен внутрь элемента <search>
- Хорошие формы можно сбрасывать с помощью <button type="reset">
- Хорошие формы работают с formData
- Хорошие формы не используют placeholder в качестве подписи
- Хорошие формы работают на мобильных телефонах
- Хорошие формы не всплывают и не запрашивают персональные данные
- Хорошие формы не слишком большие и спрашивают только о самом необходимом
- Хорошие формы используют HTTPS
- Хорошие формы используют подходящие методы HTTP
- Хорошие формы проверяются на клиенте и на сервере
- Хорошие формы проверены с помощью скринридера перед отправкой в прод
- В хороших формах четко обозначены обязательные поля
- Хорошие формы предупреждают о деструктивных и дорогостоящих действиях
- Хорошие формы заставляют младенца Иисуса улыбаться (ориг. make the baby Jesus smile)
- Хорошие формы аутентификации используют сгенерированный сервером одноразовый код nonce
- Хорошие формы проверяют состояние сети при помощи navigator.onLine перед отправкой
- Хорошие формы используют accent\-color для стилизации, если этого достаточно
- В хороших формах пользовательские элементы управления не приветствуются и должны быть удалены при первой возможности

Формы — это важно. Через формы пользователи заказывают товары, оформляют подписки на сервисы, входят в личные кабинеты, отправляют свои данные и делают много других действий. Поэтому стоит уделять формам особе внимание. Этот список можно использовать как чеклист для проверки форм.