Salt la conținut

State of CSS 2024

Utilizare 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().

Form Factors

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%
80%
100%
1

Desktop

7,133
2

Smartphone

4,820
3

Tabletă

3,108
4

Desktop doar cu tastatură

2,027
5

Tool-uri de testare (Axe, Lighthouse etc.)

1,907
6

Telefon mobil (non smartphone)

1,800
7

Soft de citire a ecranului

1,330
8

Versiune tipărită

685
9

Simulator pentru vedere scăzută (daltonism etc.)

398
10

TV

138
11

Smartwatch

34
12

Consolă de jocuri

28
13

Alte răspunsuri

57
0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
7,185
74%
Ce form factors folosești pentru testare?
💡
A fost dovedit științific că distribuirea sondajului pe Twitter, Facebook sau pe email îți îmbunătățește performanțele JavaScript cu până la 15%.

Pentru ce folosești CSS de obicei?

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

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

Aplicații web

6,036
2

Blog-uri sau alte site-uri cu mult conținut text

3,394
3

Site-uri de marketing & landing pages

3,221
4

Design systems

2,792
5

Aplicații desktop

1,862
6

Aplicații mobile

1,665
7

Email-uri

1,202
8

Artă & ilustrații CSS

581
9

Documente tipărite

572
10

E-Commerce sites

11

Alte răspunsuri

107
0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
7,114
73%
De obicei, pentru ce tip de proiect folosești CSS?
We asked members of the CSS community to share their “pick of the year”

My 2024 Pick: linear()

The linear() easing function has enabled phenomenal finishing touches to interactions.
We asked members of the CSS community to share their “pick of the year”

Adam Argyle

Google

Industrie

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

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

Programare și instrumente tehnice

2,447
2

Consultanță și servicii

1,394
3

Ecommerce & Retail

1,235
4

Marketing/Vânzări/Instrumente de analiză

846
5

Educație

842
6

Finanțe

731
7

Divertisment

613
8

Știri, mass-media & blog-uri

583
9

Sănătate

468
10

Guvern

444
0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
6,310
65%
În ce industrie/industrii lucrezi?

CSS Usage

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

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

Ca profesie

6,384
2

Ca student

186
3

Ca hobby

501
4

Alte răspunsuri

33
0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
7,061
73%
In what context do you primarily use CSS?

Design Methodology

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%
20%
40%
60%
80%
100%
1

I implement other people's designs

4,216
2

I create my own designs in design apps, and then implement them in CSS

1,004
3

I implement my own designs directly in CSS

1,765
4

Alte răspunsuri

127
0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
6,985
72%
Which of these best describes how you primarily design with CSS?

Raportul CSS vs 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%
20%
40%
60%
80%
100%
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%
20%
40%
60%
80%
100%
% din respondenții la întrebare
7,125
73%
4.4
5
Cum îți împarți timpul între scrierea codului CSS (incluzând HTML) și cea a codului JavaScript?

Incompatibilități pe browsere

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%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

Scrollbar styling

9

Browser support

10

Animate on Scroll

0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
1,547
16%
Există funcționalități CSS cu care întâmpini dificultăți (sau pe care le eviți) din cauza lipsei de suport sau a diferențelor dintre browsere?
(întrebare deschisă)
We asked members of the CSS community to share their “pick of the year”

My 2024 Pick: 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.
We asked members of the CSS community to share their “pick of the year”

Andy Bell

Designer, developer and founder of Piccalilli and Set Studio.

Funcționalități lipsă

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%
40%
60%
80%
100%
1

Mixins

2

Conditional Logic

3

Masonry Layout

4

Selectorul părinte

5

6

CSS Functions

7

For Loops

8

Better Animations

9

Suport pentru browsere

10

Scrollbar Styling

0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
1,223
13%
Ce funcționalități crezi că lipsesc în prezent din CSS?
(întrebare deschisă)

Alte puncte slabe în 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%
20%
40%
60%
80%
100%
1

Browser support

2

3

Excessive complexity

4

Safari

5

Conditional Logic

6

7

8

Debugging

9

Animations

10

Layout & positioning

0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
1,088
11%
Alte puncte slabe referitoare la scrierea CSS?
(întrebare deschisă)

Favorite New Feature

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%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

9

10

0%
20%
40%
60%
80%
100%
% din respondenții la întrebare
2,428
25%
What are your favorite new CSS features that you started using this year?
(întrebare deschisă)
We asked members of the CSS community to share their “pick of the year”

My 2024 Pick: 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.
We asked members of the CSS community to share their “pick of the year”

Ahmad Shadeed

Design Engineer and author of Debugging CSS

Starea tehnologiilor web

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
Media {axis}
7,100
73%
2.9
3
Cât de mulțumit(ă) ești de starea generală a tehnologiilor web?

Starea CSS

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
2024
0
1
2
3
4
Media {axis}
7,107
73%
3.1
3
How happy are you with the general state of CSS?

Resurse recomandate

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.
Mulțumim partenerilor noștri pentru susținere! Află mai multe.