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

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

No matter how you use CSS, the data shows that making sure your code works across all browsers is still a concern, especially for newer features such as :has().

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

An encouraging sign of accessibility's growing importance, screen reader testing has gone up from 16.6% to 19% year-over-year.

0%
20%
40%
60%
79%
99%
1

Комп'ютери

7,133
2

Смартфони

4,820
3

Планшети

3,108
4

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

2,027
5

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

1,907
6

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

1,800
7

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

1,330
8

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

685
9

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

398
10

ТБ

138
11

Розумні годинники

34
12

Гральні консолі

28
13

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

56
0%
20%
40%
60%
79%
99%
% від тих, хто відповів на питання
Для яких формфакторів чи у яких середовищах ви тестуєте?
💡
Науково доведено, що публікація цього опитування у Twitter, Facebook або відправлення на електронну адресу покращує ефективність вашого програмування на 15%.

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

While this data is unsurprising, it's a nice reminder that CSS can do a lot more than format webpages.

0%
17%
34%
51%
68%
85%
1

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

6,036
2

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

3,394
3

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

3,221
4

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

2,792
5

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

1,862
6

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

1,665
7

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

1,202
8

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

581
9

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

572
10

E-Commerce sites

11

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

118
0%
17%
34%
51%
68%
85%
% від тих, хто відповів на питання
Для якого виду проєктів ви зазвичай використовуєте CSS?
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2024: linear()

The linear() easing function has enabled phenomenal finishing touches to interactions.
Ми покликали спільноту CSS поділитися своїм "вибором року"

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

Did you know you can filter this survey's data by Industry Sector? Just click "Add Filters…" on any other chart!

0%
8%
16%
23%
31%
39%
1

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

2,447
2

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

1,394
3

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

1,235
4

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

846
5

Освіта

842
6

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

731
7

Розваги

613
8

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

583
9

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

468
10

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

444
0%
8%
16%
23%
31%
39%
% від тих, хто відповів на питання
У яких галузях економіки ви працюєте?

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

Whether you build websites profesionally or just dabble, there's no wrong way to use CSS!

0%
18%
36%
54%
72%
90%
1

Професійно

6,384
2

Для навчання

186
3

Як хобі

501
4

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

34
0%
18%
36%
54%
72%
90%
% від тих, хто відповів на питання
Для чого ви переважно використовуєте CSS?

Дизайн-методологія

While a large majority of respondents use CSS to implement pre-existing designs, it'll be interesting to see if this changes as design apps evolve, and AI tools become capable of going straight from idea to code.

0%
12%
24%
36%
48%
60%
1

Реалізую дизайни інших

4,216
2

Створюю власні дизайни у відповідних програмах, а потім реалізую їх у CSS

1,004
3

Реалізую власні дизайни безпосередньо в CSS

1,765
4

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

129
0%
12%
24%
36%
48%
60%
% від тих, хто відповів на питання
Що з цього найкраще описує, як ви здебільшого проєктуєте за допомогою CSS?

Співвідношення CSS і JavaScript

Even in the context of a CSS survey, it turns out a majority of respondents still spend most of their time in the JavaScript ecosystem. Only time will tell if this too will shift now that CSS is becoming more capable.

0%
5%
11%
16%
21%
27%
1

100% CSS

107
2

|

568
3

|

958
4

|

616
5

50%–50%

1,127
6

|

882
7

|

1,913
8

|

914
9

100% JS

40
0%
5%
11%
16%
21%
27%
% від тих, хто відповів на питання
Скільки часу ви пишете CSS (включно з верстанням HTML) і скільки — JavaScript-код?

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

There are few worse feelings that knowing a new feature will solve your issue perfectly, yet not being able to use it because of poor browser support.

This is the case with Anchor Positioning, a promising new feature that is sadly not yet broadly supported.

Container Queries on the other hand are available at a baseline level and ready to be used, despite showing up in many respondent's answers!

0%
15%
29%
44%
59%
73%
1

2

3

4

5

6

7

8

Стилі для смуги гортання

9

Browser support

10

Animate on Scroll

0%
15%
29%
44%
59%
73%
% від тих, хто відповів на питання
Якими наявними функціями CSS ви не можете користуватися (або взагалі уникаєте) через відсутність підтримування або відмінності між браузерами?
Довільна форма
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2024: Getting Stuck: All the Ways position:sticky Can Fail

In all my years in CSS, position: sticky has to be one of the most frustrating capabilities, but it’s also extremely useful. I always wanted to write a guide to help people with that but luckily I don’t need to because Kilian nailed this one.
Ми покликали спільноту CSS поділитися своїм "вибором року"

Andy Bell

Designer, developer and founder of Piccalilli and Set Studio.

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

In the absence of a magic wand that lets us conjure up any CSS feature we can dream of, the best we can hope for is that this data can help push browser vendors in the right direction!

The good news: conditional logic, mixins, and masonry layouts are all currently being worked on in some form or another!

0%
20%
39%
59%
78%
98%
1

Домішки (mixins)

2

Conditional Logic

3

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

4

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

5

6

CSS Functions

7

Better Animations

8

For Loops

9

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

10

Scrollbar Styling

0%
20%
39%
59%
78%
98%
% від тих, хто відповів на питання
На вашу думку, чого наразі взагалі не вистачає у CSS?
Довільна форма

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

While browser support remains the eternal CSS pain point, Tailwind CSS is also proving to be a source of frustration for some – while others complain that it's not used enough!

0%
19%
38%
56%
75%
94%
1

Browser support

2

3

Excessive complexity

5

6

7

Conditional Logic

8

Debugging

9

Animations

10

Layout & positioning

0%
19%
38%
56%
75%
94%
% від тих, хто відповів на питання
Ще якісь проблеми, пов'язані з написанням CSS?
Довільна форма

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

Long-awaited feature, sensible implementation, good browser support: :has() has it all, and tops the rankings of the best new CSS feature of 2024!

0%
9%
19%
28%
37%
47%
1

2

3

4

5

6

7

8

9

10

0%
9%
19%
28%
37%
47%
% від тих, хто відповів на питання
Які ваші улюблені нові функції CSS ви почали використовувати цього року?
Довільна форма
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2024: Scroll-driven Animations

This is a game changer that will soon be supported in all major browsers. It's incredible that what once required a lot of JavaScript is now achievable with just a few lines of CSS.
Ми покликали спільноту CSS поділитися своїм "вибором року"

Ahmad Shadeed

Design Engineer and author of Debugging CSS

Стан вебтехнологій

While we do love to complain about the state of thigns, it turns out happiness levels have remained surprisingly constent over the years.

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

We are even seeing a slight uptick when it comes to CSS specifically, proof that the hard work by browser vendors, working groups, and the CSS community at large is not going unnoticed!

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

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

SVG Essentials & Animation, v2
Sarah Drasner
Netlify

SVG Essentials & Animation, v2

In this course, you'll learn to create immersive graphics and make them alive with animations!
Design for Developers
Sarah Drasner
Netlify

Design for Developers

Learn how to become self-sufficient for the entire process of execution from concept to design to implementation.
Дякуємо нашим партнерам за підтримку! Детальніше.