Lompat menuju konten

State of CSS 2024

Pamakaian CSS

Tak peduli bagaimana anda menggunnakan CSS, datanya menunjukkan bahwa memastikan kode anda bekerja di semua browser masih menjadi perhatian, terutama untuk fitur-fitur baru seperti :has().

Lingkungan Pengujian

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

Desktop

7,133
2

Gawai

4,820
3

Tablet

3,108
4

Desktop dengan hanya menggunakan keyboard

2,027
5

Alat Pengujian (Axe, Lighthouse, DLL.)

1,907
6

Ponsel

1,800
7

Pembaca Layar

1,330
8

Print

685
9

Simulator Pengubah Penglihatan (Buta Warna, DLL.)

398
10

TV

138
11

Jam Tangan Pintar

34
12

Konsol Gim

28
13

Lainnya

56
0%
20%
40%
60%
79%
99%
% dari pertanyaan responden
7,185
74%
Lingkungan apa saja yang Anda uji?
💡
Dengan memagikan survei ini ke Twitter, Facebook, atau dengan email, terbukti secara ilmiah dapat meningkatkan kemampuan koding anda sebanyak 15%.

Pemakaian CSS

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

Aplikasi web

6,036
2

Blog atau situs berorientasi teks lainnya

3,394
3

Situs web pemasaran & halaman awal

3,221
4

Sistem desain

2,792
5

Aplikasi desktop

1,862
6

Aplikasi mobile

1,665
7

Email

1,202
8

Seni & ilustrasi CSS

581
9

Dokumen cetak

572
10

E-Commerce sites

11

Lainnya

118
0%
17%
34%
51%
68%
85%
% dari pertanyaan responden
7,114
73%
Anda menggunakan CSS untuk jenis proyek seperti apa?
We asked members of the CSS community to share their “pick of the year”

My 2023 Pick: Zag.js

The talented folks at ChakraUI are building some next-gen components and ideas, can't wait to see what else they come up with.

We asked members of the CSS community to share their “pick of the year”

Adam Argyle

Google Chrome Developer Relations

Sektor Industri

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

Pemrograman & Peralatan Teknis

2,447
2

Konsultan & Jasa

1,394
3

Toko Online & Ritel

1,235
4

Pemasaran/Penjualan/Alat Analisa

846
5

Edukasi

842
6

Keuangan

731
7

Dunia Hiburan

613
8

Berita, Media Massa, & Menulis Blog

583
9

Kesehatan

468
10

Pemerintahan

444
0%
8%
16%
23%
31%
39%
% dari pertanyaan responden
6,310
65%
Anda sedang bekerja pada sektor industri apa?

Pengunaan CSS

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

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

Secara profesional

6,384
2

Sebagai Pelajar

186
3

Sebagai Hobi

501
4

Lainnya

34
0%
18%
36%
54%
72%
90%
% dari pertanyaan responden
7,061
73%
Dalam konteks apakah Anda menggunakan CSS?

Metodologi desain

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

Saya mengimplementasikan desain orang lain

4,216
2

Saya membuat desain saya sendiri di aplikasi desain, kemudian mengimplementasikannya dengan CSS

1,004
3

Saya mengimplementasi desain saya sendiri secara langsung dengan CSS

1,765
4

Lainnya

129
0%
12%
24%
36%
48%
60%
% dari pertanyaan responden
6,985
72%
Manakah yang paling baik menggambarkan bagaimana anda merancang dengan CSS?

Keseimbangan 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%
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%
% dari pertanyaan responden
7,125
73%
4.4
5
Berapa banyak waktu yang Anda gunakan untuk menulis CSS (termasuk menulis HTML) dan kode JavaScript?

Ketidakcocokan antar browser

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

Penggayaan Scrollbar

9

Browser support

10

Animate on Scroll

0%
15%
29%
44%
59%
73%
% dari pertanyaan responden
1,549
16%
Apakah ada fitur-fitur CSS yang Anda sulit gunakan (atau hindari) karena kurangnya dukungan, atau karena perbedaan antar browser?
(Pertanyaan bebas)
We asked members of the CSS community to share their “pick of the year”

My 2023 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.

Fitur Yang Hilang

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

Mixin

2

Conditional Logic

3

Tata Letak Masonry

4

Selektor Orang Tua

5

6

CSS Functions

7

Better Animations

8

For Loops

9

Dukungan Browser

10

Scrollbar Styling

0%
20%
39%
59%
78%
98%
% dari pertanyaan responden
1,223
13%
Fitur apa yang Anda rasa saat ini hilang dari CSS?
(Pertanyaan bebas)

Titik Sakit CSS Lainnya

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%
% dari pertanyaan responden
1,090
11%
Ada titik sakit lainnya yang berhubungan dengan menulis CSS?
(Pertanyaan bebas)

Fitur Baru Favorit

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%
% dari pertanyaan responden
2,431
25%
Fitur CSS baru manakah yang anda mulai pakai tahun ini?
(Pertanyaan bebas)
We asked members of the CSS community to share their “pick of the year”

My 2023 Pick: Scroll-Driven Animations

If I went back 2 years, I'd never have imagined CSS having scroll-driven animations. Yet, here we are!

We asked members of the CSS community to share their “pick of the year”

Ahmad Shadeed

Design Engineer and Writer at ishadeed.com

Keadaan Teknologi 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
Rata-rata {axis}
7,099
73%
2.9
3
Seberapa senang Anda dengan keadaan umum teknologi web?

Keadaan 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
Rata-rata {axis}
7,106
73%
3.1
3
How happy are you with the general state of CSS?

Rekomendasi Sumber

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.
Terima kasih kepada semua Mitra yang telah mendukung Kami! Pelajari lebih lanjut.