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

State of CSS 2026

Pain Points

Проблеми компонування

Similar to last year, Grid is the most frequently mentioned item when it comes to layout pain points. This is a reflection both of its increased usage (having now become the default CSS layout method for many developers), but also of its undeniable learning curve.

And while widespread Subgrid browser support is certainly welcome, that feature does add one more layer of complexity to an already-intricate layout system.

Які CSS-проблеми компонування найбільше вас розчаровують?
Множинний вибір
Головні проблеми загалом.

Вигляд:

Елементи, що не є одним(-ою) із “limitations”
0%
20%
40%
60%
80%
100%
01
3
02
Browser vendor issues
4
03
1
+4
04
Element sizing
4
+21
05
Positioning
2
06
Cognitive overload
4
07
Чуйний (responsive) дизайн
+1
08
09
Проблеми позиціонування
10
Developer Experience
11
Переповнення (Overflow)
12
Вбудоване підтримання сітки вільного плину для компонування у стилі Pinterest.
-7
13
width and height
14
15
Проблеми вирівнювання
1
-5
16
Stacking contexts & z-index
17
18
Typography
1
19
Education
1
20
21
Environments & Consumers
1
22
Table Styling
23
24
-11
25
Animations
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
632
13%
25
5

Проблеми форми та графіки

CSS is getting better and better at letting us go beyond the rectangle and draw all kinds of fancy shapes without having to resort to Canvas or even SVG.

The issue now is browser support: until all browsers implement these features, it'll be hard to convince developers to start using them.

Які CSS-проблеми форми та графіки найбільше вас розчаровують?
Множинний вибір
Головні проблеми загалом.

Вигляд:

Елементи, що не є одним(-ою) із “limitations”
0%
20%
40%
60%
80%
100%
01
Browser vendor issues
3
02
Complex element shapes
3
03
SVG
2
04
Cognitive overload
4
05
2
06
Developer Experience
07
Education
2
08
09
-4
10
11
Syntax issues
12
CSS inside SVG
1
13
Element sizing
14
Rendering
15
16
Animations
17
Advanced borders
18
Tooling
1
19
20
21
Bugs and stability issues
22
Typography
23
Positioning
24
Icons issues
25
1
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
355
7%
25
5

Проблеми кольорів

In recent years, CSS has given us many innovative ways to define colors. The challenge now seems to be finding ways to actually use this new rainbow of possibilities without turning our stylesheets into a mess of color theory math formulas.

This is where Theming comes in, especially as we move away from the binary light/dark duality, towards a conception of themes that also takes proper contrast and accessibility into account.

Які CSS-проблеми кольорів найбільше вас розчаровують?
Множинний вибір
Головні проблеми загалом.

Вигляд:

Елементи, що не є одним(-ою) із “limitations”
0%
20%
40%
60%
80%
100%
01
Accessibility
2
02
Theming
2
03
Cognitive overload
6
04
Browser vendor issues
3
05
2
06
+4
07
+9
08
Tooling
3
09
+9
10
Syntax issues
11
RGB colors (hex, rgb() and rgba(), HSL etc)
12
1
13
Education
1
14
-1
15
16
Проблеми маніпуляції кольором
1
-5
17
18
Color conversion
19
Maintenance
1
20
Ecosystem issues
21
Design systems
1
22
Data structures
23
Debugging
1
24
25
-1
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
573
12%
25
5

Проблеми взаємодії

Just like with shapes and graphics, interactions and animations is another area where browser support is lagging a bit behind.

CSS Carousels also generated some feedback, especially centered around accessibility concerns.

Які CSS-проблеми взаємодії найбільше вас розчаровують?
Множинний вибір
Головні проблеми загалом.

Вигляд:

Елементи, що не є одним(-ою) із “limitations”
0%
20%
40%
60%
80%
100%
01
Animations
8
02
Browser vendor issues
4
03
Accessibility
04
+8
05
Cognitive overload
4
06
-3
07
Reliance on JavaScript
+9
08
Developer Experience
09
Scrollbars
2
10
Element sizing
1
11
Syntax issues
12
Input element issues
1
13
Education
1
14
Scope Creep
15
Швидкодія
-1
16
Environments & Consumers
1
17
Tooling
1
18
-5
19
Bugs and stability issues
20
Poor developer experience
21
Interaction-state pseudo-classes
22
Touch & pointer gestures
23
Debugging
24
:active, :focus, and :hover
25
-5
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
429
9%
25
5

Проблеми інших функцій

Besides being the top three most-mentioned features in this category, what Cascade Layers, CSS Nesting, and if() have in common is that they all have the potential to drastically change how we write CSS code.

Despite that, respondents were overall fairly enthusiatic about adopting them, mainly being held back by the lack of proper browser and tooling support.

Які CSS-проблеми наведених вище функцій найбільше вас розчаровують?
Множинний вибір
Головні проблеми загалом.

Вигляд:

Елементи, що не є одним(-ою) із “limitations”
0%
20%
40%
60%
80%
100%
01
Browser vendor issues
4
02
Cognitive overload
3
03
Education
1
04
05
-3
06
Tooling
1
07
08
Conditional logic
1
09
1
10
Custom Functions
1
11
12
-7
13
-10
14
15
Separation of Concerns
16
Preprocessors
1
17
Bugs and stability issues
18
display: contents
-10
19
Developer Experience
20
children-count()
21
Cascade Management
22
Accessibility
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
231
5%
5

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

While Browser issues are once again very present in people's mind, it's worth noting how many respondents reported general cognitive overload issues, with many worrying about CSS becoming excessively complex*. A very understandable worry given the language's high speed of change, and the rate at which new features have been added over the past few years.
Ще якісь проблеми, пов'язані з написанням CSS?
Множинний вибір
Головні проблеми загалом.

Вигляд:

Елементи, що не є одним(-ою) із “limitations”
0%
20%
40%
60%
80%
100%
01
Cognitive overload
7
02
Browser vendor issues
4
03
Tooling
3
04
Maintenance
1
+18
05
Education
3
06
Syntax issues
07
Ecosystem issues
2
08
AI tools
09
+4
10
Debugging
11
Animations
12
Cascade Management
13
+1
14
Element sizing
1
15
Positioning
1
16
Developer Experience
17
Specificity
18
Inconsistencies across web platform features
19
Environments & Consumers
20
Theming
21
Швидкодія
-12
22
CSS layout issues
1
23
Community issues
24
25
Custom Functions
1
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
398
8%
25
5

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

Ultimate CSS Grid & Layout Techniques, v3
Jen Kramer
AnnieCannons

Ultimate CSS Grid & Layout Techniques, v3

CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. With its two-dimensional structure, precise positioning, and overlapping elements, you’ll learn to achieve complex layouts with minimal code.
CSS Animations and Transitions
David Khourshid
Microsoft

CSS Animations and Transitions

Learn CSS animation basics and transition to advanced concepts like orchestration and choreography.
Спонсорований вміст від наших партнерів. Детальніше.