작년 말 Interop 2023이 마무리되었습니다. 브라우저에서 공급업체 및 기타 당사자들은 보다 상호운용성이 높은 웹을 만드는 것을 목표로 하며, 브라우저 간의 차이로 인해 문제가 발생할 수 있습니다. 이 게시물에서는 최종 결과를 공유하고 Chrome팀에서 즐겨 사용하는 기능 중 일부에 대한 업데이트도 제공했습니다.
최종 점수
<ph type="x-smartling-placeholder">
초록색이 너무 많아서 기뻐요. 2023년 초의 점수와 비교해 보세요. YouTube는 지금까지 점수가 크게 상승하는 것을 확인할 수 있었습니다.
무엇에 중점을 두고 있나요?
Interop 2023 대시보드에서 2023년 중점 영역의 전체 목록을 확인하세요. 일부 중점 영역(예: :has(),
컨테이너 쿼리, inert 속성에 대해 전체 기능을 다뤘습니다. 기타,
예를 들어 Flexbox 작업은
코드에서 미묘한 테스트 실패를
교차 브라우저 기능을 지원하지 않습니다.
:has()
"마지막으로 CSS의 상위 선택자가 되었습니다. 거의 첫날부터 요청이 있었으며, 마침내 모든 브라우저에서 이 기능을 사용할 수 있게 되었다는 점도 환상적입니다. 즉, 개발자는 이 선택자를 에뮬레이션하기 위해 더 적은 자바스크립트를 실행할 필요가 없습니다."—토마스 스타이너, Chrome 개발자 관계 엔지니어.
기능적 의사 클래스에 대한 기대감은 엄청납니다
:has(): 개발자의 주요 요청을 플랫폼에 가져왔기 때문입니다. 그것은
상위 선택자가 제공되는데, 선택한 요소를 기반으로 요소를 선택할 수 있습니다.
있습니다. 그러나 훨씬 더 많은 용도로 사용할 수 있습니다. CSS 래핑됨에서 설명한 대로
훨씬 더 클 수 있으며, 가로 선택도 가능합니다.
:has() 데모: 도크우나 크라베츠, Chrome팀의 개발자 관계 엔지니어 설명:
":has() 선택기는 새로 출시된 CSS 기능 중 가장 유연하고 강력합니다. 이 기능을 사용하면 존재 여부, 상태 또는 하위 요소의 개수에 따라 상위 요소의 스타일을 지정할 수 있습니다. 그러나 더 중요한 점은 다른 결합자와 결합하여 동위 요소에 스타일을 지정하고 UI에 대해 새로운 수준의 스타일 제어를 얻을 수 있다는 것입니다. 매우 유연한 기능입니다. :has()의 강력한 기능을 활용할 때 추가 스크립팅에 의존할 필요를 줄여주는 멋진 데모는 이미 많이 보았습니다."
Chrome의 소프트웨어 엔지니어 필립 제겐스테트가 떠올린 것처럼 :has()은
지원 부족으로 개발자들이 어려움을 겪는
가장 큰 문제는
2023년 CSS 현황 설문조사에서 확인할 수 있습니다.
따라서 이 기능을 제공하는 데에 Google만 설레는 것은 아닙니다.
우나와 아담 아가일의 이야기를 듣고 The CSS 팟캐스트에서 has()에 관해 이야기한 다음
웹 커뮤니티의 이 게시물 중 :has()개
컨테이너 쿼리
불가능한 일로 여겨졌던 2023년은 멋진 한 해였습니다. 포함
:has() 외에도 웹 플랫폼에는 드디어
살펴보겠습니다 컨테이너 (또는 요소) 쿼리를 시작한 이후로
반응형 디자인이라는 개념이 도입되고 겨우 1년이 지난 후였습니다. 이제
모든 주요 브라우저 엔진에서 사용할 수 있습니다.
우나와 아담은 CSS 팟캐스트에서 컨테이너 쿼리에 대해 논의했습니다. 와 우나는 브라우저에서 디자인하기. 커뮤니티에서도 많은 팁과 아이디어.
서브 그리드
Subgrid는 상호 운용성 2023에 제가 가장 좋아하는 기능입니다. 이 기능을 사용하면 스프레드시트의 그리드를 그런 다음 해당 상위 요소에 정의된 트랙 크기를 사용할 수 있습니다. 이 기본 그리드 내에 중첩된 그리드를 표시할 수 있습니다. Microsoft Edge의 웹 개발자 덕분에 플랫폼 엔지니어인 2023년 한 해 동안 모든 주요 브라우저 엔진에서 하위 그리드를 사용할 수 있게 되었습니다. Chrome의 점수를 높이고 이 흥미로운 기능을 모두에게 선보일 수 있습니다.
Chrome 개발자 관계 엔지니어 Adriana Jara가 알려준 그리드와 서브그리드 멋진 UI를 더 쉽게 만들 수 있게 되었고
"저는 시각 요소와 레이아웃, 일관된 화면, 화면에 적응하는 것이 별로 좋지 않습니다. 그러나 그리드와 서브 그리드를 사용하면 다양한 화면 크기에서 작동하고 콘텐츠에 자동으로 적용되는 디자인을 만들 수 있습니다. 전문 지식이 많지 않아도 사용자에게 훌륭한 환경을 제공하는 웹사이트를 만들 수 있는 기본적인 요구사항을 충족시켜 주므로 제가 가장 좋아하는 도구입니다."
12 Days of Web 도움말에 다른 기능들과 서브그리드의 사용 사례를 정리했습니다. 이 게시물에서 CSS 팟캐스트 에피소드를 모두 들어보세요. 웹 곳곳에서도 다양한 리소스를 찾아볼 수 있습니다.
색상 공간 및 함수
Chrome CSS 개발자인 Adam Argyle이 색상 공간과 기능에 대해 가장 좋아하는 기능이었습니다.
'어색한 HSL 채널 값 변수 계산은 이제 그만, 적시 색상 옵션 한줄에 오신 것을 환영합니다. 새로운 색상 공간과 함수는 색상 워크플로 문제를 해결할 뿐만 아니라 더 고급스럽고 안정적이며 선명한 색상과 그라데이션을 제공합니다. 생활을 편리하게 만드는 동시에 몇 가지 기능을 잠금 해제하는 것 중 마음에 들지 않는 점이 있습니다. 상호 운용성의 양념을 뿌려보세요. 이 요리는 다채롭게 즐거워집니다."
아담은 이러한 새로운 기능을 이해하는 데 도움이 되는 몇 가지 훌륭한 콘텐츠를 만들어 왔습니다. 기능(예: 고화질 CSS 색상 가이드) 및 gradient.style을 사용하는 것이 좋습니다. CSS 팟캐스트의 색상 함수에 대해서도 알아보세요.
모든 주요 브라우저 엔진에서 이러한 기능을 사용할 수 있게 되어 기쁩니다. 다음 도움말에서 자세히 알아보세요.
Interop 2024의 기대
특성이 상호 운용될 수 있게 되면 기준: 새로 제공됩니다. 최근 몇 년 동안 2023년 한 해 동안 이 그룹에 출전한 기능은 거의 없었습니다. 상호 운용성 2023에 참여하는 모든 직원의 작업, 곧 발표될 예정입니다. 2024년 중점 분야를 선정해 왔으며, 올해 웹 플랫폼이 훨씬 더 나아질 수 있습니다.