콘텐츠로 건너뛰기

State of CSS 2024

기능

CSS에 새로운 기능이 빠르게 추가되고 있다는 것은 비밀이 아닙니다. 그래서 이번에는 무려 50개의 기능에 대해 질문하게 되었습니다!

기능

필터 효과(blur(), contrast() 등)가 2024년 가장 많이 사용된 CSS 기능으로, 응답자의 75.4%가 이를 사용했다고 말했습니다. :has() 선택자가 그 뒤를 이어 72.8%로 근접하게 나타났습니다. 반면, 선호도 순위에서는 Subgrid가 가장 사랑받는 기능으로 선정되었으며, 응답자의 51.5%가 다시 사용하고 싶다고 답했습니다. 가장 적게 사용된 기능은? 바로 hanging-punctuation으로, 응답자의 84.7%가 들어본 적조차 없다고 답했습니다!

Filter by:

Group by:

Sort by:

1

75.3%
17.1%
6.9%
8,495
2

72.9%
20.9%
3.6%
7,277
3

72.5%
15.8%
11.1%
8,484
4

72.1%
17.5%
9.8%
9,501
5

66.9%
17.8%
14.6%
7,744
6

65%
22.7%
11.8%
7,338
7

59%
18.1%
22.5%
8,483
8

52.1%
20.5%
27%
7,366
9

51.3%
39.5%
4.7%
7,297
10

51.3%
30.7%
17.5%
7,393

Experience

  • Used it: Respondents who have used an item.
  • Heard of it: Respondents who have heard about an item, but haven't used it.
  • Never heard of it: Respondents who have never heard about an item.

Sentiment

  • Positive: Respondents who are interested in learning more about a technology; or are willing to use it again.
  • Neutral: Responents who did not indicate any sentiment about a technology.
  • Negative: Respondents who are not interested in learning more about a technology; or have used it and had a negative experience.
“Used” average:27%
“Positive” average:37%
“Negative” average:3%
우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청했습니다.

2024년 나의 선택: Google의 CSS 기여

최근 특히 지난 1년간 CSS 분야에서 구글이 강력한 영향력을 발휘해왔다는 이야기를 하고 싶어집니다. Rachel Andrew, Adam Argyle, Bramus Van Damme, Una Kravets, Tab Atkins, fantasai—이들은 모두 주로 공개적으로 대단하고 멋진 작업을 하고 있습니다.

참고: fantasai는 현재 Apple에서 근무하고 있습니다.

우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청했습니다.

Chris Coyier

CodePen 창립자이자 Shoptalk Show 진행자

Reading List

읽기 목록을 통해 설문조사가 완료된 후 더 배우고 싶은 항목을 저장할 수 있습니다. 그러니 가장 적게 알려진 기능인 hanging-punctuation이 개발자들이 가장 많이 저장한 항목으로 읽기 목록 순위에서 1위를 차지한 것은 우연이 아닙니다!

0%
10%
21%
31%
42%
52%
1

1,712
2

1,632
3

1,611
4

1,600
5

1,563
6

1,557
7

1,459
8

1,416
9

1,410
10

1,377
0%
10%
21%
31%
42%
52%
% of question respondents
How many time each item was added to respondent's Reading List, a feature that lets people learn more about specific topics as they take the survey.
3,299
34%

추천하는 리소스

Dynamic CSS with Custom Properties (aka CSS Variables)
Lea Verou
MIT

Dynamic CSS with Custom Properties (aka CSS Variables)

Modern browsers ship with CSS Custom Properties, also known as “CSS variables”, a superpower that enables us to create reusable components without any JavaScript dependencies needed
Website Accessibility, v2
Jon Kuperman
Cloudflare

Website Accessibility, v2

Learn how to make your website applications accessible to a wider audience. Use keyboard shortcuts and navigation to help both power users and those with disabilities.
우리를 지원해 준 파트너들께 감사 드립니다! 더 알아보기.