Опубликовано: 6 декабря 2024 г.
Результаты состояния CSS 2024 и состояния HTML 2024 теперь доступны. В этой статье представлен первоначальный взгляд на некоторые из наиболее интересных результатов этих опросов.
Оптимизм в отношении веб-платформы
Прежде чем рассмотреть некоторые проблемы, с которыми люди сталкиваются при использовании HTML и CSS, отметим, что опросы вселяют большой оптимизм в отношении платформы. На вопрос, движется ли веб-платформа в целом в правильном направлении, 58% людей, принимавших участие в State of HTML, согласились с этим утверждением, причем 18% полностью согласились.
Что касается CSS, :has() стал любимой новой функцией CSS: 36% людей оценили ее как лучшую новую функцию. Вторым фаворитом является @container (17%), связанный с вложенностью CSS.
Что вы используете?
В данных CSS были некоторые сюрпризы. Например, более 75% людей использовали эффекты фильтров CSS, что делает эту функцию наиболее используемой. Учитывая количество жалоб на каскад за последние годы, интересно, что каскадные слои используют лишь 18,9% людей. Возможно, здесь есть связь с внедрением таких инструментов, как Tailwind, которые не позволяют людям часто сталкиваться с проблемами, связанными с каскадами.
Элементы ориентиров, такие как <main> и <nav> располагаются в верхней части HTML-опроса о том, что вы используете. Приятно видеть, что так много людей используют методы отложенной загрузки и адаптивных изображений.
Основные проблемы с поддержкой браузера
Проблемы с совместимостью или поддержкой функций браузерами всегда возникают, когда мы разговариваем с разработчиками. В опросах вас напрямую спрашивали о проблемах, с которыми вы столкнулись. Ниже представлены 10 наиболее проблемных функций, ранжированных по проценту людей, выбравших эту функцию.
- Поповер API
- Расположение якоря
- Контейнерные запросы
-
:has() - Вид вложения CSS
- Переходный API
- Подсетка
- Сетка
-
<dialog> - Прогрессивные веб-приложения
Позиционирование привязки набрало 11% в обоих опросах, View Transition API — 9% в рейтинге «Состояние CSS» и 8% — в «Состояние HTML», что показывает, насколько ценными эти функции считают разработчики.
Интересно, что некоторые функции совместимы. Контейнерные запросы, :has() , вложение CSS и подсетка являются базовыми. Недавно доступны API Popover, но из-за проблемы с легким отклонением на iOS. Элемент <dialog> теперь широко доступен, как и макет сетки CSS. Возможно, стоит покопаться в этих результатах, чтобы выяснить, какие проблемы возникают у людей. Например, в ответах на Grid часто говорится о том, что его трудно освоить, а не о реальной проблеме совместимости.
Мы надеемся, что Baseline поможет разработчикам понять состояние дел и узнать, связана ли проблема, с которой они сталкиваются, с отсутствием совместимости браузера или с чем-то другим. Приятно видеть, что эти опросы подчеркивают базовый статус функций. Вы также можете просмотреть статус доступности в браузерах для выявления основных проблем CSS на сайте webstatus.dev .
Отсутствующие функции
В опросах также задается вопрос, какие функции и возможности отсутствуют на платформе. Это помогает нам увидеть, что еще трудно сделать. На этот вопрос было меньше ответов, однако в опросе State of CSS люди чаще всего спрашивали о миксинах, условной логике и макете кладки. Интересно, что люди также просили о родительском селекторе ( :has() обеспечивает эту функциональность) и вложенности, которые уже существуют и доступны в базовой версии.
Вопрос, который был задан респондентам из штата HTML, звучал так: «Если бы вы могли добавить в HTML 3 элемента, какие бы они были?» 51% людей просили таблицы данных, другие популярные варианты включают вкладки и элементы переключения.
О чем вы хотите узнать больше?
В опросах есть функция, позволяющая добавлять элементы в список для чтения, если вы хотите узнать о них больше после завершения опроса. Это ценные данные, особенно если вы занимаетесь созданием контента для разработчиков. В следующем списке представлены десять лучших функций в двух опросах, ранжированные по проценту участников опроса, которые добавили их в свой список.
- CSS
hanging-punctuation - CSS
offset-path -
@scope - Позиционирование якоря
- Настраиваемый выбор
-
view-timeline -
scroll-timeline - атрибут
focusgroup - Анимация дискретных свойств
-
image()
Взгляните на полные результаты со списком чтения CSS и списком чтения HTML .
Один сигнал от веб-сообщества
Chrome поддерживает эти опросы, потому что это один из способов получить информацию о ваших основных болевых точках и о том, что вас больше всего интересует на веб-платформе. Это не единственный сигнал, который мы используем, но это место, где вы можете напрямую высказать нам свои мысли. Если вы заполнили один или оба этих опроса, спасибо! Вы помогаете нам сделать Интернет лучше так, как вы этого хотите. Если вы хотите помочь, у вас еще есть время принять участие в The State of JS .