게시일: 2024년 12월 6일
CSS 상태 2024 및 HTML 상태 2024의 결과가 현재 게시되어 있습니다. 이 게시물에서는 이러한 설문조사에서 가장 흥미로운 결과를 간략히 살펴봅니다.
웹 플랫폼에 대한 낙관론
HTML 및 CSS와 관련하여 사람들이 겪고 있는 몇 가지 문제를 살펴보기 전에 설문조사에서는 플랫폼에 대한 낙관적인 전망을 많이 전달합니다. 웹 플랫폼이 전반적으로 올바른 방향으로 나아가고 있는지에 관한 질문에 HTML 상태를 조사한 사용자의 58% 가 동의했으며 18% 는 '매우 동의'했습니다.
CSS의 경우 :has()가 가장 좋아하는 새로운 CSS 기능으로 급부상했으며 36% 의 사용자가 이 기능을 최고의 새 기능으로 꼽았습니다. 두 번째로 좋아하는 것은 CSS 중첩과 함께 17% 를 차지하는 @container입니다.
어떤 것을 사용하고 계신가요?
CSS 데이터에 몇 가지 놀라운 사실이 있었습니다. 예를 들어 75% 이상의 사용자가 CSS 필터 효과를 사용했으며 이는 가장 많이 사용되는 기능입니다. 지난 몇 년간 계단식 구조에 대한 불만이 많았던 점을 고려할 때 계단식 구조 레이어를 사용하는 사용자는 18.9% 에 불과하다는 점이 흥미롭습니다. Tailwind와 같은 도구를 채택하면 사람들이 캐스케이드 관련 문제에 자주 노출되는 것을 방지할 수 있습니다.
<main> 및 <nav>와 같은 랜드마크 요소가 사용 중인 항목에 관한 HTML 설문조사에서 가장 많이 사용되는 것으로 나타났습니다. 많은 사용자가 지연 로드 및 반응형 이미지 기법을 사용하고 있어 기쁩니다.
주요 브라우저 지원 문제
상호 운용성 문제 또는 기능에 대한 브라우저 지원 문제는 개발자와 대화할 때 항상 발생합니다. 설문조사에서는 발생한 문제를 직접 질문했습니다. 문제가 되는 상위 10개 기능은 다음과 같습니다(해당 기능을 선택한 사용자의 비율로 순위 지정).
- Popover API
- 앵커 위치 지정
- 컨테이너 쿼리
:has()- CSS 중첩 보기
- Transition API
- 하위 그리드
- 그리드
<dialog>- 프로그레시브 웹 앱
앵커 위치 지정은 두 설문조사에서 모두 11%, 뷰 전환 API는 CSS 상태에서 9%, HTML 상태에서 8% 를 기록하여 개발자가 이러한 기능을 얼마나 가치 있게 생각하는지 보여줍니다.
흥미롭게도 여러 기능이 상호 운용됩니다. 컨테이너 쿼리, :has(), CSS 중첩, 하위 그리드가 새로운 기준으로 제공됩니다. Popover API도 제공되지만 iOS의 밝은 닫기 문제로 인해 제공되지 않습니다. 이제 <dialog> 요소는 CSS 그리드 레이아웃과 마찬가지로 광범위하게 사용할 수 있습니다. 이러한 결과를 자세히 살펴보고 어떤 문제가 있는지 알아볼 수 있습니다. 예를 들어 그리드에 대한 응답은 실제 상호 운용성 문제를 언급하기보다는 학습하기 어렵다는 점을 언급하는 경우가 많습니다.
Google은 개발자가 기준을 통해 상황을 파악하고 발생한 문제가 브라우저 호환성 부족 때문인지 다른 문제 때문인지 파악하는 데 도움이 되기를 바랍니다. 이러한 설문조사에서 기능의 기준 상태가 강조 표시되는 것을 확인할 수 있어 기쁩니다. webstatus.dev에서 주요 CSS 문제의 브라우저별 가용성 상태도 확인할 수 있습니다.
기능이 누락됨
또한 설문조사에서는 플랫폼에 누락된 기능과 기능을 묻습니다. 이를 통해 아직 어려운 부분을 파악할 수 있습니다. 이 질문에 대한 응답률은 낮았지만 CSS 현황 설문조사에서는 사람들이 가장 많이 요청한 기능이 믹스인, 조건부 로직, 마사리 레이아웃이었습니다.
흥미롭게도 상위 선택자(:has()가 이 기능을 제공함)와 중첩(이미 존재하며 새로운 기준으로 제공됨)도 요청되었습니다.
HTML 상태에 관한 설문조사 응답자에게는 'HTML에 요소 3개를 추가할 수 있다면 어떤 요소를 추가하겠어요?'라는 질문이 주어졌습니다. 51% 의 사용자가 데이터 표를 요청했으며 탭과 전환 요소도 인기 있는 선택사항이었습니다.
어떤 내용에 대해 자세히 알고 싶으신가요?
설문조사를 완료한 후 자세히 알아보려는 항목이 있으면 읽기 목록에 추가할 수 있는 기능이 설문조사에 있습니다. 이는 특히 개발자 콘텐츠를 만드는 비즈니스에 종사하는 경우 유용한 데이터입니다. 다음 목록은 두 설문조사에서 가장 많이 언급된 기능 10가지로, 목록에 추가한 설문조사 참여자의 비율을 기준으로 순위가 매겨졌습니다.
- CSS
hanging-punctuation - CSS
offset-path @scope- 앵커 위치 지정
- 맞춤설정 가능한 선택
view-timelinescroll-timeline- 속성
focusgroup개 - 불연속 속성 애니메이션
image()
CSS 읽기 목록 및 HTML 읽기 목록을 사용하여 전체 결과를 살펴보세요.
웹 커뮤니티의 신호 1개
Chrome에서는 이러한 설문조사를 지원합니다. 설문조사를 통해 사용자의 주요 불만사항과 웹 플랫폼에서 가장 관심이 있는 사항에 관한 정보를 얻을 수 있기 때문입니다. 리뷰는 YouTube에서 사용하는 유일한 신호는 아니지만 사용자의 의견을 직접 전달할 수 있는 공간입니다. 이러한 설문조사 중 하나 또는 둘 다를 작성해 주셔서 감사합니다. 여러분의 의견은 Google에서 웹을 개선하는 데 큰 도움이 됩니다. 참여하고 싶다면 아직 The State of JS에 참여할 수 있습니다.