Команда Chrome активно участвовала в конференции CSS Day в этом году. Мы организовали справочную службу CSS Helpdesk, отвечая на вопросы участников, а также использовали доску, где спрашивали людей, чего, по их мнению, всё ещё не хватает в CSS. В этом посте я поделюсь результатами этого опроса, а также попрошу вас рассказать нам, чего, по вашему мнению, не хватает в HTML и CSS, заполнив этот короткий опрос . Согласны ли вы с мнением участников CSS Day?
Десять самых популярных запросов
Участникам было предложено записывать идеи на стикерах и добавлять их на доску. Люди также могли голосовать за идеи, добавляя стикеры. Вот десять самых популярных функций.
Поддержка ввода стилей
Это был самый популярный запрос на добавление функции, получивший 21 голос. Очень хотелось бы иметь возможность стилизовать эти распространенные элементы пользовательского интерфейса единообразным образом.
В Chrome мы хорошо знаем об этой проблеме, и она является одной из главных для разработчиков. Сейчас ведётся работа над созданием более эффективных решений. Например, настраиваемые элементы выбора призваны предоставить возможность выбора нового стиля оформления. Таким образом, можно будет добавлять изображения или даже более сложные стили к параметрам. Преимущество такого подхода заключается в том, что в случае отказа будет использоваться обычное выпадающее меню, что позволит постепенно улучшать интерфейс.
Визуально скрыт
На CSS Day этот запрос получил 19 голосов, став вторым по популярности. Он касается возможности добавления контента, используемого только программами чтения с экрана. Это может быть HTML-элемент, содержимое которого не отображается, а только зачитывается программой чтения с экрана.
Сегодня это обычно достигается путем создания класса ` .visually-hidden , который скрывает контент, но при этом делает его доступным для программ чтения с экрана.
Хотя это популярный запрос, есть люди, которые считают, что это не следует реализовывать. Подробнее можно прочитать в статье «Визуально скрытый контент — это обходной путь, который нужно решить, а не закреплять» , а также в обсуждении на форуме CSS WG по проблеме № 560 .
position: sticky inside overflow:hidden
Этот запрос получил 16 голосов. В настоящее время position: sticky работает только тогда, когда все родительские элементы имеют overflow: visible .
С 2017 года существует открытая проблема, в которой запрашивается эта функция , и хотя первоначальный сценарий использования свойства ` overflow: hidden для очистки плавающих элементов может быть менее востребован сегодня, в обсуждении подробно описаны многие другие сценарии.
Анимировать по height: auto
По результатам 12 голосов, многие участники хотели бы добавить анимацию с height: auto . Мы рады сообщить, что эта функция появится на веб-платформе с помощью свойства CSS interpolate-size и функции calc-size() . Они будут доступны начиная с Chrome версии 129. Следите за обновлениями, чтобы узнать больше подробностей.
Дополнительные типы ввода
HTML5 предоставил множество различных типов для элемента <input> — например, type="email" для адреса электронной почты или type="range" для ползунка диапазона. На CSS Day мы получили 10 голосов за добавление большего количества таких типов, например, double range или автозаполнение с пользовательским списком данных.
Реальные случайные числа в CSS
Ещё один запрос, получивший 10 голосов, касался использования реальных случайных чисел в CSS. Ранее уже поступали подобные запросы, и их уже обрабатывали для случайной продолжительности анимации .
Занятия в стиле Mixin
В CSS добавлен ряд функций, ранее встречавшихся в препроцессорах CSS — переменные с пользовательскими свойствами, а теперь и вложенность CSS. Однако многократно используемые миксины пока не стали частью языка, но семь участников CSS Day выразили желание их увидеть.
Рабочая группа CSS приняла решение начать работу над спецификацией для этой функции, и вы можете поделиться своими мыслями и примерами использования в обсуждении в рамках этого вопроса.
Глобальные стили в теневом DOM
Ещё один вопрос, вызвавший активное обсуждение вариантов использования, — это просьба разрешить применение глобальных CSS-стилей внутри теневого DOM. Шесть человек высказались по этому поводу на CSS Day. Эта возможность позволила бы применять глобальные стили сброса также в веб-компонентах, а также обеспечила бы работу отдельных CSS-файлов во всех компонентах сайта. Ознакомьтесь с этим обзором вариантов использования и сообщите нам, хотели бы вы также получить эту функцию.
Разделение смешанных единиц
В рамках Interop 2024 было предложено добавить возможность деления на разные единицы измерения — например calc(100vw / 1px) . Это предложение было сочтено слишком общим для Interop 2024, однако многие разработчики, включая шесть человек на CSS Day, хотели бы видеть его реализацию.
nth-letter
В CSS существует ряд псевдоэлементов, которые действуют так, как если бы вы обернули элемент `<span>` вокруг какого-либо раздела контента. Например, псевдоэлемент ::first-letter нацелен на первую букву первой строки блочного контейнера, к которому он применяется.
В этом списке отсутствует ::nth-letter , а вы просите добавить ::nth-letter уже около двадцати лет , так что мы знаем, что это давняя просьба веб-разработчиков. На CSS Day шесть человек проголосовали за это, и это стало последней из десяти самых желанных функций.
Согласны ли вы с десяткой лучших кандидатов по итогам Дня CSS?
Нам бы хотелось услышать мнение более широкой аудитории по этим вопросам. Входит ли что-нибудь из перечисленного в вашу десятку самых важных? Если нет, есть ли что-нибудь еще, что вы хотели бы увидеть в CSS и HTML? Сообщите нам об этом, заполнив эту короткую форму , и мы обобщим ответы в отдельной публикации.