Interop 2022 및 Interop 2023의 성공에 힘입어 모든 주요 브라우저 공급업체 및 기타 관련 이해관계자와 다시 협력할 기회를 갖게 되어 기쁩니다. Google의 공동 목표는 웹 플랫폼 간의 상호 운용성을 향상하여 개발자의 작업을 간소화하고 인터넷 사용자를 위한 전반적인 환경을 개선하는 것입니다.
Interop은 웹 표준에 대한 Google의 공동 노력에 따라 개별 브라우저의 규정 준수 여부를 평가하기 위해 설계된 일련의 포괄적인 테스트 및 벤치마크입니다. 궁극적으로, Interop은 브라우저 간의 불일치를 제거하고 업계의 통일된 비전을 구축하기 위해 노력합니다.
Interop 2024의 경우, 기능의 초기 목록을 소싱하기 위한 공개 제안 프로세스가 있었습니다. 이 목록을 바탕으로 모든 당사자가 협력하여 2024년 중점 분야 목록을 작성했습니다. 올해 말까지 선정된 테스트의 100% 가 통과하기를 바라는 분야가 아래에 나와 있습니다.
2024년의 모든 중점 분야
Interop 2024에는 12개의 새로운 중점 영역과 2023년 이후 5개가 이월되었으며, 일부 수정이 아직 진행 중입니다. 해당 영역은 다음과 같습니다.
- 접근성
- CSS 중첩
- 커스텀 속성
- 선언적 Shadow DOM
- font-size-adjust
- WebSocket용 HTTPS URL
- IndexedDB
- 레이아웃
- 포인터 및 마우스 이벤트
- 팝오버
- 상대 색상 구문
- requestVideoFrameCallback
- 스크롤바 스타일 지정
- @starting-style 및 conversion-behavior
- 텍스트 방향
- 텍스트 줄바꿈: 균형
- URL
모든 중점 영역의 세부정보를 보려면 Interop 2024 대시보드를 방문하세요. 여기에는 필요한 기능 및 작업에 관한 세부정보와 각 브라우저의 현재 점수가 표시됩니다. 이 도움말의 나머지 부분에서는 Chrome이 100%에 도달하기 위해 가장 많은 작업을 해야 하는 영역을 확인할 수 있습니다.
중첩
CSS 중첩 모듈은 선택자를 중첩하기 위한 문법을 정의하며, 이를 통해 한 스타일 규칙을 다른 스타일 규칙을 중첩할 수 있으며, 상위 규칙의 선택기를 기준으로 하위 규칙의 선택기를 사용할 수 있습니다.
CSS 중첩은 CSS 전처리기에서 사전 컴파일되지 않고 브라우저에서 파싱된다는 점에서 Sass와 같은 CSS 전처리기와 다릅니다.
CSS 중첩은 CSS 스타일시트의 가독성, 모듈성 및 유지관리성에 도움이 됩니다. 또한 CSS 파일의 크기를 줄여 사용자가 다운로드하는 데이터의 양을 줄이는 데 도움이 됩니다.
모든 브라우저가 CSS 중첩을 지원하지만 사양 변경으로 인한 구현에는 약간의 차이가 있습니다. Interop 2024 동안 목표는 모든 브라우저가 현재 사양을 준수하도록 하는 것입니다.
CSS 중첩에 관해 자세히 알아보고 기본 요소 태그 이름 중첩을 사용 설정하는 사양의 주요 업데이트를 살펴보세요.
텍스트 줄바꿈: 균형
CSS text-wrap 속성의 균형 값은 브라우저에 텍스트 줄의 균형을 맞추도록 지정합니다. 일반적으로 제목이나 다른 짧은 텍스트 섹션에서 활자 누락을 방지하기 위해 사용됩니다.
브라우저는 이 속성의 다양한 긴 버전 및 약식 버전을 지원하는 방식이 다릅니다. Interop 2024 중에는 이러한 상호 운용이 가능하도록 하는 것이 Google의 목표입니다.
제목과 기타 짧은 텍스트 섹션의 균형을 맞추는 것은 개발자가 자주 요청하는 기능입니다. 자세한 내용은 CSS text-wrap: balance, 웹의 활자 창 끝 또는 텍스트 줄바꿈을 사용한 CSS 텍스트 균형: 균형에서 자세히 알아보세요.
WebSocket의 HTTP(S) URL
WebSocket 생성자는 원래 ws: 및 wss: URL을 요구하여 상대 URL의 사용을 방지하고 해결 방법 코드를 만들었습니다.
http(s) 스키마 및 상대 URL을 허용하도록 사양이 업데이트되었습니다. 이러한 스키마는 ws: 및 wss:로 정규화됩니다.
Interop 2024 동안 http(s) 스키마를 지원하도록 구현을 업데이트할 예정입니다.
상대 색상 구문
상대 색상 구문은 CSS 색상 5 사양에 정의되어 있으며 CSS에서 색상을 조작하는 방법을 제공합니다. 예를 들어 색상을 어둡게 하거나 밝게 하거나 채도를 낮춥니다.
상대 색상 구문은 대략적으로 상호 운용 가능하지만 브라우저에서 currentcolor 키워드를 구현하지 않았습니다. 이러한 테스트는 Interop 2024에 포함되어 있습니다.
CSS 상대 색상 구문에서 이 기능으로 할 수 있는 모든 작업에 대해 알아보세요.
Interop 2024 대시보드
지난 몇 년과 마찬가지로 실험용 및 안정화 브라우저 버전의 현재 점수가 대시보드에 게시되므로 점수가 어떻게 변화하는지 확인할 수 있습니다.
올해 모든 중점 영역에서 얼마나 개선될 수 있을지 무척 기대됩니다.