Перейти до вмісту

State of CSS 2025

Використання CSS

Як ви використовуєте CSS.

Середовища тестування

Хоч середовища тестування не демонструють значних змін за рік, обнадійливо бачити невелике зростання кількості респондентів, які тестують за допомогою лише клавіатури чи екранних зчитувальних пристроїв (screen readers).

Також варто зазначити, що як порівняти з розміром компанії, то тестувати за допомогою екранних зчитувальних пристроїв частіше схильні великі компанії.

Для яких формфакторів чи у яких середовищах ви тестуєте?
Множинний вибір
0%
20%
40%
60%
80%
100%
1

Комп'ютери

4,010
2

Смартфони

2,718
3

Планшети

1,777
4

Комп'ютери лише з клавіатурою

1,337
5

Інструменти тестування (Axe, Lighthouse тощо)

1,138
6

Кнопкові телефони (фічефони)

1,051
7

Екранні зчитувальні пристрої

874
8

Версії для друку

450
9

Експорт PDF

289
10

Симулятор порушень зору (колірної сліпоти тощо)

-1
249
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
4,032
73%
10
💡
Науково доведено, що публікація цього опитування у Twitter, Facebook або відправлення на електронну адресу покращує ефективність вашого програмування на 15%.

Використання CSS

CSS починав свій шлях як система для компонування та розмітки документів, але тепер цілком очевидно, що інтерактивні застосунки є його основним варіантом використання — факт, який безперечно впливає на еволюцію мови останнім часом.

Для якого виду проєктів ви зазвичай використовуєте CSS?
Множинний вибір
0%
20%
40%
60%
80%
100%
1

Вебзастосунки

3,286
2

Блоги чи інші сайти з великою кількістю тексту

1,992
3

Сайти для продажу та сторінки-вітрини

1,772
4

Дизайн-системи

1,569
5

Застосунки для настільних комп'ютерів

1,014
6

Застосунки для мобільних пристроїв

872
7

Електронні листи

697
8

PDF-документи

392
9

Творчість та ілюстрації в CSS

-1
365
10

Документи для друку

-1
300
11

Сайти електронної комерції

-1
12

Інші відповіді

68
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
3,985
72%
10
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2025: Поєднання функцій

Мій вибір — це не одна функція, що змінює все, а спосіб комбінувати кілька функцій разом.

Наприклад, вкладена сітка + новий corner-shape (або функція clip-path shape()) для отримання залежних від контенту форми з увігнутими заокругленнями, які не обов'язково мають бути круглими.

Ми покликали спільноту CSS поділитися своїм "вибором року"

Ana Tudor

CSS Mad Scientist

Сфера діяльності

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

У яких галузях економіки ви працюєте?
Множинний вибір
0%
20%
40%
60%
80%
100%
1

Програмування та технічні інструменти

1,264
2

Консалтинг і послуги

798
3

Електронна комерція та роздрібна торгівля

596
4

Маркетинг/Продажі/Інструменти аналітики

477
5

Освіта

460
6

Фінанси, банківська сфера

385
7

Розваги

337
8

Новини, медіа, блогінг

316
9

Охорона здоров'я

280
10

Державний сектор

250
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
3,531
64%
20
10
9%
Приріст відсотка респондентів, які хотіли б використовувати функцію якірного позиціонування, за рік.

Несумісність між браузерами

Якірне позиціонування не тільки зберегло свою першу позицію, а й майже подвоїло відсоток респондентів, які зазначили його у відповідях.

Також View Transition API піднялося на третє місце, тоді як контейнерні запити за стилями піднялися на шалені 11 позицій у рейтингу.

З іншого боку, вкладеність CSS і :has() втратили позиції, що логічно, адже ці функції тепер підтримуються всіма основними браузерами.

Якими наявними функціями CSS ви не можете користуватися (або взагалі уникаєте) через недостатнє підтримування або відмінності між браузерами?
Довільна форма
Множинний вибір
0%
20%
40%
60%
80%
100%
1

2

3

+2
4

Підтримання браузерами

+5
5

Проблеми Safari

6

+11
7

-3
8

-5
9

10

Область видимості

0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
537
10%
10
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2025: Математичні функції в CSS

Математика — це мова Всесвіту, самого життя, і без неї ми не могли б нічого описати, виміряти чи збудувати чітко й зрозуміло.

Тож той факт, що тепер ми можемо використовувати ці функції нативно в CSS, лише розширює наші можливості та відкриває цілий світ нових рішень.

Ми покликали спільноту CSS поділитися своїм "вибором року"

Amit Sheen

Веброзробник та креативний програміст

Відсутні функції

Домішки (mixins) досі залишаються найбажанішою функцією серед розробників, а одразу за ними — компонування masonry. Обидві можна реалізувати іншими способами, як-от через препроцесори або JavaScript, проте було б чудово побачити їхнє нативне підтримання у CSS!

На вашу думку, яких функцій наразі взагалі не вистачає у CSS?
Довільна форма
Множинний вибір
0%
20%
40%
60%
80%
100%
1

Домішки (mixins)

2

Компонування masonry

+1
3

Умовна логіка

-1
4

+1
5

Цикл for

+3
6

Покращене анімування

+1
7

Стилі для елементів форми

+8
8

Селектор батьківського елемента

-4
9

Область видимості

10

+6
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
563
10%
10

Інші проблеми CSS

Підтримання браузерами досі основна проблема CSS у 2025 році, проте той факт, що лише відносно невеликі 10% респондентів її згадали, свідчить про нещодавні покращення у цій сфері.

Ще якісь проблеми, пов'язані з написанням CSS?
Довільна форма
Множинний вибір
0%
20%
40%
60%
80%
100%
1

Підтримання браузерами

2

Швидкість змін

3

Надмірна складність

4

Safari

5

Надмірне використання Tailwind

6

Налагодження

7

Складний для запам'ятовування синтаксис

8

Умовна логіка

9

Компонування та позиціонування

10

Інші відповіді

Відповіді, що відповідають ключу "Інші відповіді" 431
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
419
8%
10

Улюблена нова функція

Хоч :has() усе ще на першому місці, він дещо втратив позиції, тоді як View Transition API і особливо якірне позиціонування (який піднявся на 8 позицій) почали ширше впроваджуватися.

Які ваші улюблені нові функції CSS ви почали використовувати цього року?
Довільна форма
Множинний вибір
0%
20%
40%
60%
80%
100%
1

2

+1
3

4

+2
5

+8
6

-2
7

+4
8

-1
9

-4
10

+4
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
1,148
21%
20
10
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2025: Picalilli

Я вже певний час спостерігаю за Piccalili й обожнюю те, що в них є безкоштовні технічні статті поряд із поглибленими платними курсами, тож ви можете обрати формат навчання, який вам більше до снаги. І як бізнес вони дуже уважно ставляться до вебспільноти й приймають етичні бізнес-рішення, що дають їм змогу робити чудову роботу без неприємного відчуття щодо способів заробітку.
Ми покликали спільноту CSS поділитися своїм "вибором року"

Saron Yitbarek

Євангелістка вебу в Apple

Функція, яка змінила все

Кожна нова функція CSS має своє призначення, але лише деякі з них справді змінюють правила гри. Виявилося, що сітка, :has() і вкладеність CSS найбільше вплинули на те, як ми пишемо CSS останніми роками.

Протягом останніх 5 років, яка функція мала найбільший вплив на те, як ви пишете CSS?
0%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

9

10

0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
1,589
29%
10

Впізнаваність бази сумісності

Ми хотіли дізнатися, наскільки респонденти знайомі з індикатором бази (Baseline) сумісності браузерів (який ви можете бачити в усіх цих результатах опитування!).

Попри наші хитрі фейкові варіанти відповідей, переважна більшість із вас успішно впоралась із запитанням! Зокрема молодші респонденти продемонстрували вищу обізнаність щодо бази сумісності, без сумніву, завдяки нещодавній інтеграції Baseline у Fortnite (…жартуємо).

Вікторина! Індикатор бази сумісності вебплатформи (Web Platform Baseline) — це…
0%
20%
40%
60%
80%
100%
1

Набір нових функцій компонування тексту

46
2

Інструмент для тестування швидкодії в браузері

40
3

Набір функцій та API вебу, що підтримуються всіма основними браузерами

2,741
4

Набір прикладів коду для повторного використання в різних проєктах

23
5

Не маю уявлення

1,007
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
3,857
70%
10

Темп змін

Прийняття нової функції зазвичай є багатоступеневим процесом: спершу ви кілька разів чуєте про неї протягом місяців чи років, доки не сформуєте чітке уявлення про її призначення. Потім ви можете спробувати її в експериментальному побічному проєкті, перш ніж нарешті впровадити для широкого загалу.

Ця діаграма показує, що більшість із нас наразі перебуває саме посередині цього шляху — дізналися і випробували лише частину функцій, представлених у цьому опитуванні.

Як добре ви зазвичай стежите за новими функціями CSS, як-от ті, що згадані в цьому опитуванні?
0%
20%
40%
60%
80%
100%
1

Не знали/не випробували більшість функцій

541
2

Дізналися про деякі функції, але не випробували їх

942
3

Дізналися про деякі функції та випробували їх

1,324
4

Дізналися про більшість функцій та випробували деякі з них

804
5

Дізналися про більшість функцій та випробували їх

244
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
3,855
70%
2.8
3
10
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2025: Функція light-dark()

Коли починаєш використовувати color-scheme у CSS, застосування light-dark() для визначення кольорів залежно від світлого або темного режиму видається очевидним кроком. Наразі із задоволенням стежу за цією гілкою обговорення про те, яку ще логіку ми зможемо використовувати в майбутньому, щоб запитувати color-scheme і змінювати CSS умовно.
Ми покликали спільноту CSS поділитися своїм "вибором року"

Sara Joy

Розробниця клієнтської частини

Задоволення вебтехнологіями

Рівень задоволеності вебом загалом залишався доволі стабільним протягом останніх років, без суттєвих коливань.

Наскільки ви задоволені станом вебтехнологій загалом?
1
2
3
4
5
2020
2021
2022
2023
2024
2025
1
2
3
4
5
Середнє
3,921
71%
3.8
4

Стан CSS

Натомість рівень задоволеності саме CSS демонструє чітку тенденцію до зростання останніми роками, що добре корелює з високими темпами розвитку цієї мови.

Наскільки ви задоволені станом CSS загалом?
1
2
3
4
5
2020
2021
2022
2023
2024
2025
1
2
3
4
5
Середнє
3,929
71%
4
4

Рекомендовані джерела

Getting Started with CSS, v2
Jen Kramer
AnnieCannons

Getting Started with CSS, v2

Build a modern portfolio with CSS! Learn the foundations of layout and UI design as you explore semantic HTML markup, navigation styles, media queries, and CSS custom properties.
SVG Essentials & Animation, v2
Sarah Drasner
Google

SVG Essentials & Animation, v2

In this course, you'll learn to create immersive graphics and make them alive with animations!
Спонсорований вміст від наших партнерів. Детальніше.