올해 Chrome팀은 CSS Day 컨퍼런스에 대거 참여했습니다. Google은 CSS 헬프데스크를 운영하여 참석자의 질문에 답변하는 한편, 화이트보드를 통해 CSS에서 아직 부족하다고 생각하는 점을 물었습니다. 이 게시물에서는 이 질문에 대한 결과를 공유하고 이 간단한 설문조사를 완료하여 HTML 및 CSS에서 누락된 부분이 무엇이라고 생각하는지 알려주시기 바랍니다. CSS Day 참석자들의 의견에 동의하시나요?
상위 10개 요청
참석자들은 스티커 메모에 아이디어를 적어 보드에 추가하도록 요청받았습니다. 스티커를 추가하여 아이디어에 대한 의견을 표시할 수도 있습니다. 상위 10개 기능은 다음과 같습니다.
입력 스타일 지정 지원
이 기능은 21표를 받아 가장 많이 요청된 기능이었습니다. 이러한 일반적인 UI 요소를 일관된 방식으로 스타일을 지정하는 방법을 원할 것입니다.
Chrome에서는 개발자의 가장 큰 문제로 이 영역을 잘 알고 있으며 개발자를 위한 더 나은 솔루션을 만들기 위해 노력하고 있습니다. 예를 들어 맞춤설정 가능한 선택 요소는 새로운 스타일 지정 동작을 선택하는 방법을 제공하는 것을 목표로 합니다. 그런 다음 이미지를 추가하거나 옵션에 더 정교한 스타일을 지정하는 등의 작업을 할 수 있습니다. 이 접근 방식의 장점은 일반 선택 메뉴로 대체되어 점진적 개선이 가능하다는 것입니다.
시각적으로 숨겨짐
CSS Day에서 19표를 얻어 두 번째로 인기 있는 요청이었습니다. 스크린 리더에서만 사용되는 콘텐츠를 추가하는 방법을 요청합니다. 콘텐츠가 표시되지 않고 화면 리더기에서만 읽어주는 HTML 요소일 수 있습니다.
일반적으로 사람들은 콘텐츠를 숨기지만 스크린 리더가 액세스할 수 있도록 .visually-hidden 클래스를 만들어 이를 달성합니다.
이 기능은 많은 사용자가 요청했지만, 이 기능을 구현해서는 안 된다고 생각하는 사용자도 있습니다. 자세한 내용은 시각적으로 숨겨진 콘텐츠는 해결해야 하는 해킹이지 신성한 것이 아닙니다 및 CSS WG 문제 560에 관한 토론을 참고하세요.
overflow: hidden 내의 position:sticky
이 요청은 16표를 받았습니다. 현재 position: sticky는 모든 상위 요소가 overflow: visible인 경우에만 작동합니다.
이를 요청하는 2017년의 미해결 문제가 있으며, 플로팅을 지우기 위해 overflow: hidden 사용을 지원하는 초기 사용 사례는 오늘날 덜 필요할 수 있지만 스레드에 자세히 설명된 다른 시나리오가 많이 있습니다.
height: auto로 애니메이션 처리
12표를 받은 height: auto에 애니메이션을 적용하고 싶다는 참석자가 많았습니다. CSS interpolate-size 속성 및 calc-size() 함수를 통해 웹 플랫폼에서 이 기능을 사용할 수 있게 되어 기쁩니다.
이러한 기능은 Chrome 129부터 사용할 수 있습니다.
이러한 기능에 관한 자세한 내용은 향후 게시물을 참고하세요.
추가 입력 유형
HTML5에서는 다양한 <input> 요소 유형을 제공합니다. 예를 들어 이메일 주소의 경우 type="email", 범위 슬라이더의 경우 type="range"이 있습니다.
CSS Day에서 이 유형을 더 많이 지원해 달라는 요청이 10표나 있었습니다. 예를 들어 이중 범위나 맞춤 데이터 목록을 사용한 자동 완성 등이 있습니다.
CSS의 실제 난수
CSS에서 실제 난수를 요청하는 또 다른 요청은 10표를 받았습니다. 이는 이전에 요청되었으며 무작위 animation-duration에 대해 해결되었습니다.
믹스인 스타일 클래스
CSS에는 이전 CSS 전처리기에서 볼 수 있었던 여러 기능(맞춤 속성이 있는 변수, 이제는 CSS 중첩)이 추가되었습니다. 하지만 재사용 가능한 믹신은 아직 언어의 일부가 되지 않았지만 CSS Day 참석자 7명은 이를 보고 싶어 했습니다.
이 기능의 사양 작업을 시작하기 위한 CSS 작업 그룹 결의안이 있으며, 해당 문제의 토론에 의견과 사용 사례를 추가할 수 있습니다.
섀도우 DOM의 전역 스타일
사용 사례에 관한 대규모 토론 스레드가 있는 또 다른 문제는 전역 CSS 스타일이 섀도우 DOM 내에 적용되도록 허용해 달라는 요청입니다. CSS Day에서 6명이 이 요청을 했습니다. 이 기능을 사용하면 전역 재설정 스타일을 웹 구성요소에도 적용할 수 있고 단일 CSS 파일을 사이트의 모든 구성요소에서 사용할 수 있습니다. 이 사용 사례 요약을 살펴보고 이 기능이 필요하신지 알려주세요.
혼합 단위 나누기
혼합 단위(예: calc(100vw / 1px))로 나눌 수 있는 기능을 요청하는 Interop 2024 제안이 있었습니다. Interop 2024에는 너무 광범위한 것으로 간주되었지만 CSS Day의 6명을 포함한 많은 개발자가 이를 구현하고 싶어 합니다.
nth-letter
CSS에는 콘텐츠의 일부 섹션을 span으로 래핑한 것처럼 작동하는 여러 의사 요소가 있습니다. 예를 들어 ::first-letter 의사 요소는 적용된 블록 컨테이너의 첫 번째 줄의 첫 글자를 타겟팅합니다.
이 목록에서 누락된 것은 ::nth-letter이며, 약 20년 동안 ::nth-letter를 요청해 왔으므로 웹 개발자들의 오랜 요청임을 알고 있습니다. CSS Day에서 6명이 이 기능을 선택하여 10가지 인기 기능 중 마지막을 차지했습니다.
CSS Day 상위 10개에 동의하시나요?
이러한 문제에 대해 더 많은 시청자의 의견을 듣고 싶습니다. 이 중에서 가장 중요한 10가지에 포함되는 문제가 있나요? 아니라면 CSS와 HTML에서 보고 싶은 다른 기능이 있나요? 이 간단한 양식을 작성하여 알려주시면 다른 게시물에서 답변을 요약해 드리겠습니다.