지난해 말 Interop 2023 종료 브라우저 공급업체 및 기타 업체의 이러한 노력은 브라우저 간 차이는 줄이면서 상호 운용 가능한 웹을 만드는 것을 목표로 합니다. 이 게시물에서는 최종 결과와 Chrome팀이 좋아하는 몇 가지 기능을 소개합니다
최종 점수
2023년 초의 점수와 비교해 보니 무척 기쁘고, 모든 브라우저에서 점수가 크게 상승하는 등 Google은 많은 여정을 거쳤습니다.
우리가 기대하는 바는 무엇일까요?
상호 운용성 2023 대시보드에서 2023년의 중점 분야 전체 목록을 확인하세요. :has(), 컨테이너 쿼리, inert 속성과 같은 일부 포커스 영역은 전체 기능을 다루었습니다. Flexbox에서의 작업과 같은 다른 테스트는 기존 교차 브라우저 기능의 일부 미묘한 테스트 실패를 처리했습니다.
:has()
"마지막으로 CSS의 상위 선택기가 되었습니다. 이는 거의 첫날부터 요청되었으며, 마지막으로 모든 브라우저에서 이 기능을 사용할 수 있다는 것은 멋진 일이며, 이는 개발자가 이 선택자를 에뮬레이션하기 위해 JavaScript를 적게 실행할 필요가 있다는 것을 의미합니다."—토마스 슈타이너, Chrome 개발자 관계 엔지니어.
기능적 의사 클래스 :has()에 대한 기대가 엄청나는데, 이는 개발자의 주요 요청을 플랫폼에 가져온 것이었기 때문입니다. 이 선택기는 내부에 있는 항목을 기반으로 요소를 선택할 수 있는 상위 선택기를 제공합니다. 훨씬 더 많은 용도로 사용할 수 있습니다. 래핑된 CSS에서 설명한 것처럼 상위 요소보다 훨씬 더 많은 요소를 선택할 수 있으며 옆으로 선택할 수도 있습니다.
:has() 데모: 도크Chrome팀의 개발자 관계 엔지니어인 우나 크라베츠는 다음과 같이 설명합니다.
":has() 선택자는 새로 사용할 수 있는 가장 유연하고 강력한 CSS 기능 중 하나입니다. 이를 통해 존재 여부, 상태 또는 짝수 하위 요소의 수를 기반으로 모든 상위 요소의 스타일을 지정할 수 있습니다. 뿐만 아니라 다른 컴비네이터와 결합하여 동위 요소에 스타일을 지정하고 실제로 UI에 대한 새로운 수준의 스타일 제어를 얻을 수 있습니다. 이처럼 매우 유연한 기능입니다. 저는 :has()의 강력한 기능을 활용할 때 추가적인 스크립팅에 의존할 필요가 없도록 하는 멋진 데모를 이미 많이 보았습니다."
Chrome의 소프트웨어 엔지니어인 필립 예겐슈테트가 언급했듯이 2023년 CSS 현황 설문조사에서 지원 부족으로 개발자가 어려움을 겪은 가장 큰 기능은 :has()였습니다.
Google만 이러한 기능을 사용할 수 있게 된 것은 아닙니다.
Una는 아담 아가일과 함께 CSS 팟캐스트의 has()에 대해 이야기한 후 웹 커뮤니티의 이러한 게시물에서 :has()에 대해 자세히 알아볼 수 있습니다.
컨테이너 쿼리
2023년은 한때 불가능하다고 여겨졌던 것들에 대해 좋은 한 해였습니다. :has() 외에도 웹 플랫폼은 마침내 컨테이너 쿼리를 위한 브라우저 간 지원을 얻었습니다. 반응형 디자인 개념이 도입된 지 겨우 1년이 지난 2011년부터 컨테이너 (또는 요소) 쿼리를 요청해 왔습니다. 이제 출시되었으며 모든 주요 브라우저 엔진에서 사용할 수 있습니다.
Una와 아담은 CSS 팟캐스트에서 컨테이너 쿼리에 대해 논의했고, Una는 '브라우저에서 디자인하기' 에피소드에서 이를 소개했습니다. 커뮤니티는 많은 팁과 아이디어도 공유해 왔습니다
서브 그리드
Subgrid는 Interop 2023에서 가장 마음에 드는 기능입니다. 이를 통해 상위 요소에 그리드를 정의한 다음 이 기본 그리드 내에 중첩된 그리드에서 상위 요소에 정의된 트랙 크기를 사용할 수 있습니다. Microsoft Edge의 웹 플랫폼 엔지니어들의 노력 덕분에 2023년에 모든 주요 브라우저 엔진에서 Subgrid를 사용할 수 있게 되었습니다. 이는 Chrome의 성능을 높이고 이 흥미로운 기능을 모든 사람에게 제공하기 위한 것입니다.
Chrome 개발자 관계 엔지니어 아드리아나 자라는 그리드와 서브 그리드를 통해 훌륭한 UI를 더 쉽게 만들 수 있었던 방법을
"저는 시각적 요소, 레이아웃, 일관된 모양 유지, 화면 적응에 소질이 없습니다. 그러나 그리드와 서브 그리드를 사용하면 여러 화면 크기에 맞게 작동하고 콘텐츠에 자동으로 조정되는 디자인을 만들 수 있습니다. 이 도구는 많은 전문 지식 없이도 사용자에게 적절한 경험을 제공하는 웹사이트를 만드는 데 필요한 기본적인 니즈를 해결할 수 있다는 점에서 매우 유용합니다."
12 Days of Web 기사에서 서브그리드 사용 사례를 설명해 드렸으며, 이 게시물의 다른 기능과 마찬가지로 관련 CSS 팟캐스트 에피소드를 청취하실 수 있습니다. 웹에도 다양한 리소스가 있습니다.
색상 공간 및 함수
Chrome CSS 개발자인 Adam Argyle이 색상 공간과 함수가 가장 좋아했던 기능이라고 말한 것은 놀라운 일이 아닙니다.
"어색한 HSL 채널 값 변수 계산은 이제 그만, 적시 색상 옵션 한 줄 소개는 이제 그만. 새로운 색상 공간과 함수는 색상 워크플로 문제도 해결할 뿐만 아니라 더 발전하고 안정적이며 생생한 색상과 그라데이션을 제공합니다. 몇 가지 기능을 활용하면서 삶이 더 편안해지죠. 상호 운용성의 노력에 양념을 뿌려보세요. 그러면 이 요리의 색이 다채롭습니다."
아담은 이러한 새로운 기능을 이해하는 데 도움이 되는 멋진 콘텐츠를 만들고 있습니다. 이러한 새 기능(예: 고화질 CSS 색상 가이드 및 gradient.style)을 만들고 CSS 팟캐스트의 색상 함수에 관해 이야기했습니다.
이러한 기능을 모든 주요 브라우저 엔진에서 사용할 수 있게 되어 정말 기쁩니다. 다음 도움말에서 자세히 알아보세요.
Interop 2024 기대
기능이 상호 운용될 수 있게 되면 기준의 일부가 되며 새로 사용할 수 있습니다. Interop 2023에 참여한 모든 사용자의 노력 덕분에 2023년 한 해 이 그룹에 추가된 새로운 기능이 많아질 기미가 보입니다. 2024년에 선별된 중점 분야를 발표할 시간이 머지않아 발표될 예정입니다. 모두가 올해 웹 플랫폼이 얼마나 개선될지 기대하고 있습니다.