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

Функції

Синтаксис, ключові слова та інші атрибути мови.
80%
Percentage of respondents who have used `:has()`.

Of all the features included in the survey, :has() is both the most-used and the most-loved one. Also worth pointing out: Subgrid gets second place in the most-loved rankings, while aspect-ratio is #2 in usage and #3 in sentiment.

After Subgrid, line-clamp got the most comments, many of them from respondents with a negative opinion of the feature.

The least-used features were sibling-count and sibling-index, which makes sense since their browser support is still very new and limited. And the least-loved feature overall was Trigonometric Functions… no doubt due to the “trigonometry” part!

Finally, be sure to filter by “Widely Available” Baseline Status to see what features are available to use right now!

Категорія:

Статус бази сумісності:

Групувати за:

Сортувати за:

1

80.4%
15%
4.3%
4,085
2

76.2%
14.7%
8.6%
5,375
3

75%
15.1%
9.4%
4,784
4

69.3%
20%
10.1%
4,134
5

67.9%
18.5%
13%
4,287

Досвід

  • Використовував(-ла): Респонденти, які це використовували.
  • Чув(-ла) про це: Респонденти, які чули про це, але не використовували.
  • Вперше чую: Респонденти, які не чули про це.

Ставлення

  • Позитивно: Респонденти, які зацікавлені у вивченні технології або хочуть використовувати її ще.
  • Нейтрально: Респонденти, які не висловили жодного ставлення до технології.
  • Негативно: Респонденти, які не зацікавлені у вивченні технології або використовували її і мали негативний досвід.
23%
Year-over-year percentage increase in respondents who had heard about `light-dark()`.

Функції з часом

Looking at trends over time and in context paints quite an interesting picture. The feature with the single largest year-over-year usage increase is text-wrap: pretty, while the one with the largest awareness increase is light-dark().

Color functions also stand out for placing towards the bottom of the chart in terms of usage, which might mean they haven't yet found their audience.

Finally, the Appreciation tab lets us look at the difference in positivity between respondents interested in a feature and those who have actually used it. Anchor positioning shows a -12% drop-off, which could mean that the API isn't as user-friendly as people expect.

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

Частка респондентів, які використовували це

Готові фільтри:

Секції:

0%
20%
40%
60%
80%
100%
2024
2025
0%
20%
40%
60%
80%
100%
:has()
aspect-ratio
Ключові слова для природного розміру (intrinsic sizing)
Функції порівняння в CSS
scroll-behavior
backdrop-filter
Вкладеність CSS
@supports
text-wrap: balance
Одиниці вимірювання на основі малої, великої та динамічної області перегляду
We asked members of the CSS community to share their “pick of the year”

My 2025 Pick: linear() Easing Generator

Description: The linear() timing function has quickly become one of my favourite modern features, and this lovely tool makes it easy to quickly generate CSS springs from JS logic!
We asked members of the CSS community to share their “pick of the year”

Josh W. Comeau

Indie developer and educator

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

While Grid is undeniably powerful, that power also comes with a steep learning curve that can turn using this fairly complex feature into a real pain point.

Further down the rankings, dealing with height, overflow, positioning, and alignment still all prove to be common issues for CSS developers.

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

2

Flexbox issues

3

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

4

Height issues

5

Overflow issues

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

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

Now that we're fairly comfortable with rectangles, we've started looking towards the wider world of triangles, circles, and polygons. Sadly drawing these complex shapes remains tough with CSS only.

Which is why many of us resort to SVG–which is not without its own issues.

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

Shape drawing issues

2

SVG issues

3

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

4

Gradient issues

5

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

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

Many respondents would like CSS to go beyond the light/dark dichotomy, and actually provide more tools for managing full-fledged theming, as well as do a better job ensuring proper contrast when picking colors.

And while new color spaces such as oklch() are certainly powerful, they also come with their own range of issues.

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

Theming issues

2

Contrast issues

3

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

4

5

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

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

While many of us are waiting for better browser support for scroll-driven animations, others are pointing out potential accessibility issues with new interaction patterns such as carousels.

Another common pain point was the difficulty of “animating to auto”, something that is thankfully now possible!

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

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

2

Animations

3

Scrolling issues

4

5

Доступність

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

My 2025 Pick: text-wrap: balance;

I can’t remember the last time a new CSS property was introduced that I could just add to any stylesheet new and old. It’s a little magic one liner that makes your titles much nicer with zero downsides. Add it to your css resets!
We asked members of the CSS community to share their “pick of the year”

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

Controlling vertical text alignment (a.k.a. leading) in the browser has been an issue for as long as I can remember. Thankfully text-box-edge and text-box-trim promise to give us more granular tools to properly set type online.

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

line-height issues

2

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

3

4

5

Font sizing issues

6

Responsive design

7

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

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

Проблеми математики

Many respondents has gripes about calc(), especially when it comes to handling units inside calculations.

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

2

Handling units

3

Lack of random() function

4

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

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

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

No surprise here, but Browser Support remains the top pain point for the CSS features mentioned in this section.

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

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

2

3

4

Excessive complexity

5

6

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

Відповіді, що відповідають ключу "Інші відповіді" 182
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
We asked members of the CSS community to share their “pick of the year”

My 2025 Pick: Font Clamp Generators

My pick of the year is all the font clamp generators that people have been creating and sharing. What’s great about them is that they are all so different so it accommodates different learning styles. Especially, if reading documentation alone doesn’t help understanding how something works.
We asked members of the CSS community to share their “pick of the year”

Список читання

Little-known ::target-text (only 82% of respondents had never heard of it) tops the Reading List rankings of the features respondents were most curious about.

0%
20%
40%
60%
80%
100%
1

881
2

868
3

810
4

-2
809
5

795
6

-5
789
7

-4
783
8

760
9

757
10

753
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
Скільки разів кожен з елементів був доданий до списку читання респондента — функції, що дає змогу користувачам дізнатися більше про відповідні теми під час опитування.

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

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