В этом году команда Chrome широко присутствовала на конференции CSS Day. Мы управляли службой поддержки CSS, отвечая на вопросы посетителей, а также имели доску, на которой спрашивали людей, чего, по их мнению, все еще не хватает в CSS. В этом посте я поделюсь результатами ответа на этот вопрос, а также попрошу вас рассказать нам, чего, по вашему мнению, не хватает в HTML и CSS, заполнив этот короткий опрос . Согласны ли вы с мнением участников CSS Day?
Десять самых популярных запросов
Участникам было предложено записать идеи на стикерах и добавить их на доску. Люди также могли проголосовать за идеи, добавив наклейку. Первая десятка функций выглядит следующим образом.
Поддержка стилизации входных данных
Это был наш самый популярный запрос на добавление функции, получивший 21 голос. Вам действительно нужны способы единообразного стилизации этих общих элементов пользовательского интерфейса.
Это область, которую мы в Chrome хорошо знаем как самую болезненную точку для разработчиков, и ведется работа над созданием лучших решений для разработчиков. Например, настраиваемые элементы выбора призваны предоставить возможность выбрать новое поведение стиля. Затем вы можете сделать такие вещи, как добавление изображений или даже более сложный стиль к параметрам. Преимущество этого подхода в том, что он возвращается к обычному меню выбора, что позволяет сделать его прогрессивным улучшением.
Визуально скрыт
На CSS Day это был второй по популярности запрос, получивший 19 голосов. Запрос заключается в том, чтобы добавить контент, используемый только программами чтения с экрана. Это может быть элемент HTML, содержимое которого не отображается, а только считывается программой чтения с экрана.
Обычно сегодня люди достигают этого, создавая класс .visually-hidden , чтобы скрыть контент, но при этом сделать его доступным для программ чтения с экрана.
Хотя это популярное требование, есть люди, которые не считают, что его следует реализовывать. Подробности читайте в статье «Визуально скрытый контент — это хак, который необходимо устранить, а не закрепить», а также в обсуждении проблемы 560 CSS WG .
позиция: прикреплена внутри, переполнение: скрыто
Это требование получило 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 голосов за большее количество этих типов, например, двойной диапазон или автозаполнение с помощью пользовательского списка данных.
Реальные случайные числа в CSS
Другой запрос с 10 голосами касался реальных случайных чисел в CSS. В прошлом это запрашивалось и обрабатывалось для случайной анимации-длительности .
Классы стиля миксинов
В CSS добавлен ряд функций, ранее встречавшихся в препроцессорах CSS: переменные с настраиваемыми свойствами, а теперь и вложенность CSS. Однако многоразовые миксины еще не стали частью языка, но семеро участников CSS Day очень хотели их увидеть.
Рабочая группа CSS приняла решение начать работу над спецификацией этой функции, и вы можете добавить свои мысли и варианты использования к обсуждению этого выпуска.
Глобальные стили в теневом DOM
Еще одна проблема, которая вызывает большое обсуждение вариантов использования, — это просьба разрешить применение глобальных стилей CSS внутри теневого DOM, шесть человек попросили об этом на CSS Day. Эта возможность позволит также применять глобальные стили сброса к веб-компонентам, а отдельные файлы CSS будут работать во всех компонентах сайта. Ознакомьтесь с этим кратким описанием вариантов использования и сообщите нам, хотите ли вы иметь эту функцию.
Разделение смешанных единиц
Было предложение для Interop 2024, запрашивающее возможность деления по смешанным единицам, например calc(100vw / 1px) . Это было сочтено слишком широким для Interop 2024, однако многие разработчики, в том числе шесть человек на CSS Day, хотели бы, чтобы это было реализовано.
nth-letter
CSS имеет ряд псевдоэлементов, которые действуют так, как если бы вы окружили некоторый раздел контента. Например, псевдоэлемент ::first-letter нацелен на первую букву первой строки блочного контейнера, к которому он применен.
В этом списке отсутствует ::nth-letter , а вы просили ::nth-letter уже около двадцати лет , поэтому мы знаем, что это давняя просьба веб-разработчиков. На CSS Day шесть человек проголосовали за это, и это стало последней из десяти наиболее востребованных функций.
Согласны ли вы с десяткой лучших в CSS Day?
Нам бы хотелось услышать мнение более широкой аудитории об этих проблемах. Входит ли что-нибудь из них в вашу десятку лучших? Если нет, есть ли что-то еще, что вам хотелось бы увидеть в CSS и HTML? Дайте нам знать, заполнив эту короткую форму , и мы суммируем ответы в другом посте.
,
В этом году команда Chrome широко присутствовала на конференции CSS Day. Мы управляли службой поддержки CSS, отвечая на вопросы посетителей, а также имели доску, на которой спрашивали людей, чего, по их мнению, все еще не хватает в CSS. В этом посте я поделюсь результатами ответа на этот вопрос, а также попрошу вас рассказать нам, чего, по вашему мнению, не хватает в HTML и CSS, заполнив этот короткий опрос . Согласны ли вы с мнением участников CSS Day?
Десять самых популярных запросов
Участникам было предложено записать идеи на стикерах и добавить их на доску. Люди также могли проголосовать за идеи, добавив наклейку. Первая десятка функций выглядит следующим образом.
Поддержка стилизации входных данных
Это был наш самый популярный запрос на добавление функции, получивший 21 голос. Вам действительно нужны способы единообразного стилизации этих общих элементов пользовательского интерфейса.
Это область, которую мы в Chrome хорошо знаем как самую болезненную точку для разработчиков, и ведется работа над созданием лучших решений для разработчиков. Например, настраиваемые элементы выбора призваны предоставить возможность выбрать новое поведение стиля. Затем вы можете сделать такие вещи, как добавление изображений или даже более сложный стиль к параметрам. Преимущество этого подхода в том, что он возвращается к обычному меню выбора, что позволяет сделать его прогрессивным улучшением.
Визуально скрыт
На CSS Day это был второй по популярности запрос, получивший 19 голосов. Запрос заключается в том, чтобы добавить контент, используемый только программами чтения с экрана. Это может быть элемент HTML, содержимое которого не отображается, а только считывается программой чтения с экрана.
Обычно сегодня люди достигают этого, создавая класс .visually-hidden , чтобы скрыть контент, но при этом сделать его доступным для программ чтения с экрана.
Хотя это популярное требование, есть люди, которые не считают, что его следует реализовывать. Подробности читайте в статье «Визуально скрытый контент — это хак, который необходимо устранить, а не закрепить», а также в обсуждении проблемы 560 CSS WG .
позиция: прикреплена внутри, переполнение: скрыто
Это требование получило 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 голосов за большее количество этих типов, например, двойной диапазон или автозаполнение с помощью пользовательского списка данных.
Реальные случайные числа в CSS
Другой запрос с 10 голосами касался реальных случайных чисел в CSS. В прошлом это запрашивалось и обрабатывалось для случайной анимации-длительности .
Классы стиля миксинов
В CSS добавлен ряд функций, ранее встречавшихся в препроцессорах CSS: переменные с настраиваемыми свойствами, а теперь и вложенность CSS. Однако многоразовые миксины еще не стали частью языка, но семеро участников CSS Day очень хотели их увидеть.
Рабочая группа CSS приняла решение начать работу над спецификацией этой функции, и вы можете добавить свои мысли и варианты использования к обсуждению этого выпуска.
Глобальные стили в теневом DOM
Еще одна проблема, которая вызывает большое обсуждение вариантов использования, — это просьба разрешить применение глобальных стилей CSS внутри теневого DOM, шесть человек попросили об этом на CSS Day. Эта возможность позволит также применять глобальные стили сброса к веб-компонентам, а отдельные файлы CSS будут работать во всех компонентах сайта. Ознакомьтесь с кратким описанием вариантов использования и сообщите нам, хотите ли вы иметь эту функцию.
Разделение смешанных единиц
Было предложение для Interop 2024, запрашивающее возможность деления по смешанным единицам, например calc(100vw / 1px) . Это было сочтено слишком широким для Interop 2024, однако многие разработчики, в том числе шесть человек на CSS Day, хотели бы, чтобы это было реализовано.
nth-letter
CSS имеет ряд псевдоэлементов, которые действуют так, как если бы вы окружили некоторый раздел контента. Например, псевдоэлемент ::first-letter нацелен на первую букву первой строки блочного контейнера, к которому он применен.
В этом списке отсутствует ::nth-letter , а вы просили ::nth-letter уже около двадцати лет , поэтому мы знаем, что это давняя просьба веб-разработчиков. На CSS Day шесть человек проголосовали за это, и это стало последней из десяти наиболее востребованных функций.
Согласны ли вы с десяткой лучших по CSS Day?
Нам бы хотелось услышать мнение более широкой аудитории об этих проблемах. Входит ли что-нибудь из них в вашу десятку лучших? Если нет, есть ли что-то еще, что вам хотелось бы увидеть в CSS и HTML? Дайте нам знать, заполнив эту короткую форму , и мы суммируем ответы в другом посте.