Ugrás a tartalomhoz

State of CSS 2024

A CSS használata

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

Tesztelési környezetek

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

Milyen felbontásokat és tesztelési környezetet szoktál használni teszteléshez?
Multiple
0%
20%
40%
60%
80%
100%
1

Asztali számítógép

7,133
2

Okostelefon

4,820
3

Tablet

3,108
4

Asztali számítógép csak billentyűzettel

2,027
5

Tesztelői eszközök (Axe, Lighthouse, stb.)

1,907
6

Hagyományos mobiltelefon

1,800
7

Képernyőolvasó

1,330
8

Nyomtató

685
9

Alternatív látás szimulátor (színvakság, stb.)

398
10

TV

138
11

Okosóra

34
12

Játékkonzol

28
13

Egyéb

56
0%
20%
40%
60%
80%
100%
A kérdésre válaszolók százaléka
7,185
74%
💡
Tudományosan bizonyított, hogy ha ezt a felméréest megosztod Twitteren, Facebookon, vagy emailben, akár 15%-kal javulhat a kódolási teljesítményed.

Főleg mire használod a CSS-t?

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

Főleg milyen projektekhez használod a CSS-t?
Multiple
0%
20%
40%
60%
80%
100%
1

Webapplikációk

6,036
2

Blogok vagy egyéb főleg szövegből álló weboldalak

3,394
3

Marketing oldalak & főoldalak

3,221
4

Dizájnrendszerek

2,792
5

Asztali alkalmazások

1,862
6

Mobilapplikációk

1,665
7

Emailek

1,202
8

CSS művészet & illusztráció

581
9

Nyomtatott dokumentumok

572
10

E-Commerce sites

11

Egyéb

100
0%
20%
40%
60%
80%
100%
A kérdésre válaszolók százaléka
7,114
73%
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

Iparág

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

Mely iparágban/iparágakban dolgozol?
Multiple
0%
20%
40%
60%
80%
100%
1

Programozási & technikai eszközök

2,447
2

Konzultáció és szolgáltatások

1,394
3

E-kommersz & kiskereskedelem

1,235
4

Marketing/eladás/analitikai eszközök

846
5

Oktatás

842
6

Pénzügy

731
7

Szórakoztatás

613
8

Hírek, média & blogolás

583
9

Egészségügy

468
10

Kormányzati

444
0%
20%
40%
60%
80%
100%
A kérdésre válaszolók százaléka
6,310
65%

CSS Usage

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

In what context do you primarily use CSS?
0%
20%
40%
60%
80%
100%
1

Professzionálisan

6,384
2

Tanulóként

186
3

Hobbiként

501
4

Egyéb

33
0%
20%
40%
60%
80%
100%
A kérdésre válaszolók százaléka
7,061
73%

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.

Which of these best describes how you primarily design with CSS?
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

Egyéb

129
0%
20%
40%
60%
80%
100%
A kérdésre válaszolók százaléka
6,985
72%

CSS vs JavaScript egyensúly

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.

Hogyan oszlik meg az időd a CSS (a HTML-t is beleértve) és a JavaScript írása között?
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%
A kérdésre válaszolók százaléka
7,125
73%
55%
63%

Böngésző inkompatilibitás

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!

Vannak olyan funkciói a CSS-nek amit nehéz használni a böngészők közötti különbségek miatt?
(szabad formátumú válasz)
Multiple
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%
A kérdésre válaszolók százaléka
1,549
16%
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.

Hiányzó funkciók

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!

Mely funkciók hiányoznak jelenleg a CSS-ből teljes egészében a véleményed szerint?
(szabad formátumú válasz)
Multiple
0%
20%
40%
60%
80%
100%
1

Mixinek

2

Conditional Logic

3

Masonry elrendezés

4

Szülő elemek kiválasztása

5

6

CSS Functions

7

Better Animations

8

For Loops

9

Böngészőtámogatás

10

Scrollbar Styling

0%
20%
40%
60%
80%
100%
A kérdésre válaszolók százaléka
1,223
13%

A CSS egyéb hiányosságai

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!

Van egyéb CSS hiányosság, amivel küzdesz?
(szabad formátumú válasz)
Multiple
0%
20%
40%
60%
80%
100%
1

Browser support

2

3

Excessive complexity

4

Safari

5

6

7

Conditional Logic

8

Debugging

9

Animations

10

Layout & positioning

0%
20%
40%
60%
80%
100%
A kérdésre válaszolók százaléka
1,090
11%

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!

What are your favorite new CSS features that you started using this year?
(szabad formátumú válasz)
Multiple
0%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

9

10

0%
20%
40%
60%
80%
100%
A kérdésre válaszolók százaléka
2,431
25%
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

Webes technológiák állapota

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

Mennyire vagy megelégedve a jelenlegi webes technológiákkal?
1
2
3
4
5
2020
2021
2022
2023
2024
1
2
3
4
5
Átlag {axis}
7,100
73%
3.9
4

CSS állapota

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!

How happy are you with the general state of CSS?
1
2
3
4
5
2020
2021
2022
2023
2024
1
2
3
4
5
Átlag {axis}
7,107
73%
4.1
4

Ajánlott források

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.
Köszönet partnereink támogatásáért! Tudj meg többet.