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

State of CSS 2025

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

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

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

While testing environments don't show much change year over year, it's encouraging to see a small increase in respondents testing with keyboard-only and 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

While CSS started its life as a document layout system, it's now clear that interactive apps represent its primary use case–a fact that has been no doubt driving the language's recent evolution.

Для якого виду проєктів ви зазвичай використовуєте 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

E-Commerce sites

-1
12

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

-1
68
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
3,985
72%
10
We asked members of the CSS community to share their “pick of the year”

My 2025 Pick: Combining features

My pick not as much a single feature that changes things, as it is the way multiple features can be used together.

For example, subgrid + the new corner-shape (or the shape() clip-path function) to get content-dependant shapes with concave roundings that aren't necessarily circular.

We asked members of the CSS community to share their “pick of the year”

Ana Tudor

CSS Mad Scientist

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

Many of us are building tools destined to be used internally within the developer community, which makes it much easier to adopt new features without worrying as much about browser compatibility.

У яких галузях економіки ви працюєте?
Множинний вибір
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%
Year-over-year percentage increase in respondents who wish they could use Anchor Positioning.

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

Not only did Anchor Positioning keep its number one spot, but the percentage of respondents citing it almost doubled.

The View Transition API also climbed to number 3, while Container style queries gained a whopping 11 spots in the rankings.

On the other hand, CSS Nesting and :has() both lost ground, which makes sense since these features are now supported in all major browsers.

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

2

3

+2
4

Browser support

+5
5

Проблеми Safari

6

+11
7

-3
8

-5
9

10

Scoping

0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
537
10%
10
We asked members of the CSS community to share their “pick of the year”

My 2025 Pick: CSS Math Functions

Math is the language of the universe, of life itself, and without it, we wouldn’t be able to describe, measure, or build anything with clarity.

So the fact that we can now use these functions natively in CSS only strengthens our capabilities and opens up a whole world of new possibilities.

We asked members of the CSS community to share their “pick of the year”

Amit Sheen

Web Developer & Creative Coder

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

Mixins are still the feature developers wish for the most, closely followed by Masonry Layout. Both have long been possible using workarounds such as pre-processors or JavaScript, but it would be nice to see them natively supported in CSS!

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

Домішки (mixins)

2

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

+1
3

Conditional Logic

-1
4

+1
5

For Loops

+3
6

Better Animations

+1
7

Form Elements Styling

+8
8

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

-4
9

Scoping

10

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

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

Browser Support may still be the dominant CSS pain point in 2025, but the fact that only a relatively small 10% of question respondents mentioned it is a testament to recent improvements in this domain.

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

Browser support

2

Speed of change

3

Excessive complexity

4

Safari

5

Excessive Tailwind usage

6

Debugging

7

Hard-to-remember syntax

8

Conditional Logic

9

Layout & positioning

10

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

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

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

While :has() is still number one, it did lose a bit of ground, as the View Transition API and especially Anchor Positioning (which gained 8 spots) start seeing wider adoption.

Які ваші улюблені нові функції 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
We asked members of the CSS community to share their “pick of the year”

My 2025 Pick: Picalilli

I've been following Piccalili for a while and I love that they have free technical articles alongside more in-depth paid courses so you can pick what flavor of learning you're up for. And as a business, they're so thoughtful about understanding the web community and making ethical business decisions that allow them to do great work without feeling icky about how they make money.
We asked members of the CSS community to share their “pick of the year”

Saron Yitbarek

Web Evangelist at Apple

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

Every new CSS feature has its use, but only a few of them are real game-changers. It turns out Grid, :has(), and CSS Nesting are the features that most changed how we write CSS in recent years.

Протягом останніх 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

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

We wanted to see how familiar respondents are with the Baseline browser compatibility indicator (which you can see in use throughout these very survey results!).

Despite our clever traps in the form of fake answers, the vast majority of you successfuly negotiated the question!

Вікторина! Індикатор бази сумісності вебплатформи (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

Темп змін

Adopting a new feature is usually a multi-stage process: first, you hear about it a few times over the course of months or years, until you form a solid idea of what it does. Then, you might try it out on an experimental side project, before finally adopting it in production.

This chart shows that most of us are squarely in the middle of this journey, having learned about and tried out only part of the feature set presented in this survevy.

Як добре ви зазвичай стежите за новими функціями 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
We asked members of the CSS community to share their “pick of the year”

My 2025 Pick: The light-dark() Function

Once using color-scheme in CSS, using light-dark() to declare colors based upon whether light or dark mode is currently in use feels like a no-brainer. I'm currently enjoying following this discussion thread about what further logic we may use in the future, to query color-scheme and change CSS conditionally.
We asked members of the CSS community to share their “pick of the year”

Sara Joy

Front End Developer

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

Happiness with the web has been fairly stable over the past years, neither going up or down.

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

Стан CSS

On the other hand, happiness with CSS specifically shows a clear upwards trend in recent years, which happens to align nicely with the language's own rapid pace of improvement.

Наскільки ви задоволені станом 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!
Спонсорований вміст від наших партнерів. Детальніше.