İçeriğe atla
The State of HTML 2024 survey is currently open! Take the survey now →

State of CSS 2024

CSS Usage

CSS'i nasıl kullanırsanız kullanın, veriler kodunuzun tüm tarayıcılarda çalıştığından emin olmanın, özellikle :has() gibi yeni özellikler için hala bir endişe kaynağı olduğunu göstermektedir.

Testing Environments

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

Masaüstü Bilgisayar

7,133
2

Akıllı Telefon

4,820
3

Tablet

3,108
4

Desktop with keyboard only

2,027
5

Testing Tools (Axe, Lighthouse, etc.)

1,907
6

Sadece temel özelliklere sahip telefonlar (Feature phone)

1,800
7

Ekran okuyucu

1,330
8

Baskı

685
9

Altered Vision Simulator (color blindness, etc.)

398
10

Televizyon

138
11

Akıllı Saat

34
12

Oyun Konsolu

28
13

Other Answers

56
0%
20%
40%
60%
79%
99%
% of question respondents
7,185
74%
Which form factors or environments do you test on?
💡
Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%.

CSS Usage

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

Web apps

6,036
2

Blogs or other text-heavy sites

3,394
3

Marketing sites & landing pages

3,221
4

Design systems

2,792
5

Desktop apps

1,862
6

Mobile apps

1,665
7

Emails

1,202
8

CSS art & illustrations

581
9

Printed documents

572
10

E-Commerce sites

11

Other Answers

118
0%
17%
34%
51%
68%
85%
% of question respondents
7,114
73%
What kind of project do you usually use CSS for?
CSS topluluğu üyelerinden "yılın seçimi" hakkında bilgi paylaşmalarını istedik

Benim 2023 Seçimim: Zag.js

ChakraUI'deki yetenekli insanlar bazı yeni nesil bileşenler ve fikirler geliştiriyor, başka neler bulacaklarını görmek için sabırsızlanıyorum.

CSS topluluğu üyelerinden "yılın seçimi" hakkında bilgi paylaşmalarını istedik

Adam Argyle

Google Chrome Geliştirici İlişkileri

Sektör

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

Programlama & Teknik Araçlar

2,447
2

Danışmanlık & Hizmetler

1,394
3

E-ticaret & Perakende

1,235
4

Pazarlama/Satış/Analitik Araçlar

846
5

Eğitim

842
6

Finans

731
7

Eğlence

613
8

Haber, Medya & Blog Yazarlığı

583
9

Sağlık

468
10

Hükümet

444
0%
8%
16%
23%
31%
39%
% of question respondents
6,310
65%
Hangi sektör(ler)de çalışıyorsunuz?

CSS Usage

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

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

Profesyonel olarak

6,384
2

Öğrenci olarak

186
3

Hobi olarak

501
4

Other Answers

34
0%
18%
36%
54%
72%
90%
% of question respondents
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%
12%
24%
36%
48%
60%
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

Other Answers

129
0%
12%
24%
36%
48%
60%
% of question respondents
6,985
72%
Which of these best describes how you primarily design with CSS?

CSS vs JavaScript Balance

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%
% of question respondents
7,125
73%
4.4
5
How do you divide your time between writing CSS (including HTML markup) and JavaScript code?

Browser Incompatibilities

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

Scrollbar styling

9

Browser support

10

Animate on Scroll

0%
15%
29%
44%
59%
73%
% of question respondents
1,549
16%
Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?
Freeform
CSS topluluğu üyelerinden "yılın seçimi" hakkında bilgi paylaşmalarını istedik

Benim 2023 Seçimim: 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 topluluğu üyelerinden "yılın seçimi" hakkında bilgi paylaşmalarını istedik

Andy Bell

Designer, developer and founder of Piccalilli and Set Studio.

Missing Features

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 Layout

4

Parent Selector

5

6

CSS Functions

7

Better Animations

8

For Loops

9

Browser Support

10

Scrollbar Styling

0%
20%
39%
59%
78%
98%
% of question respondents
1,223
13%
What features do you feel are currently missing from CSS altogether?
Freeform

Other CSS Pain Points

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

4

Safari

5

6

7

Conditional Logic

8

Debugging

9

Animations

10

Layout & positioning

0%
19%
38%
56%
75%
94%
% of question respondents
1,090
11%
Any other pain points related to writing CSS?
Freeform

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%
9%
19%
28%
37%
47%
1

2

3

4

5

6

7

8

9

10

0%
9%
19%
28%
37%
47%
% of question respondents
2,431
25%
What are your favorite new CSS features that you started using this year?
Freeform
CSS topluluğu üyelerinden "yılın seçimi" hakkında bilgi paylaşmalarını istedik

Benim 2023 Seçimim: Kaydırmaya Dayalı Animasyonlar

İki sene öncesine kadar CSS'te kaydırmaya dayalı animasyonları asla hayal edemezdim. Ancak, işte burada!

CSS topluluğu üyelerinden "yılın seçimi" hakkında bilgi paylaşmalarını istedik

Ahmad Shadeed

Tasarım Mühendisi ve Yazar ishadeed.com

State of Web Technologies

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
Average
7,099
73%
2.9
3
How happy are you with the general state of web technologies?

State of 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
2020
2021
2022
2023
2024
0
1
2
3
4
Average
7,106
73%
3.1
3
How happy are you with the general state of CSS?

Recommended Resources

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.
Thanks to our partners for supporting us! Learn more.