상호 운용성 2024

Interop 2022의 성공 이어가기 및 Interop 2023, 모든 주요 브라우저 공급업체 및 기타 관련 이해관계자와 다시 협력할 수 있는 기회를 갖게 되어 기쁩니다. 공동의 목표는 웹 플랫폼 간의 상호 운용성을 향상하는 것입니다. 개발자의 작업을 단순화하고 인터넷 사용자의 전반적인 경험을 풍부하게 만듭니다.

Interop은 웹 표준에 대한 Google의 공동 노력에 기반하여 개별 브라우저의 준수 여부를 평가하기 위해 설계된 일련의 포괄적인 테스트 및 벤치마크입니다. 궁극적으로 Interop은 브라우저 간의 불일치를 제거하고 업계 내에서 통합 비전을 조성하기 위해 노력하고 있습니다.

Interop 2024의 경우 초기 기능 목록을 제공하기 위한 공개 제안 프로세스가 있었습니다. 이 목록을 토대로 모든 관계자가 협력하여 2024년 중점 분야 목록을 작성했습니다. 다음 목록에는 올해 말까지 선정된 테스트 중 100% 통과하기를 원하는 영역이 나와 있습니다.

2024년 중점 분야

Interop 2024에는 12가지 새로운 중점 영역이 포함되어 있습니다. + 5개는 2023년에 이월되었으며 아직 몇 가지 수정이 진행 중입니다. 영역은 다음과 같습니다.

  • 접근성
  • CSS 중첩
  • 커스텀 속성
  • 선언적 Shadow DOM
  • font-size-adjust
  • WebSocket용 HTTPS URL
  • IndexedDB
  • 레이아웃
  • 포인터 및 마우스 이벤트
  • 팝오버
  • 상대 색상 구문
  • requestVideoFrameCallback
  • 스크롤바 스타일 지정
  • @starting 스타일 및 전환 동작
  • 텍스트 방향
  • 텍스트 줄바꿈: 균형
  • URL

모든 중점 영역의 세부정보를 보려면 Interop 2024 대시보드를 방문하세요. 여기에 필요한 기능과 작업에 대한 세부정보가 표시되어 있고 각 브라우저의 현재 점수를 확인할 수 있습니다 이 도움말의 나머지 부분에서는 에서 100%를 구현하기 위해 Chrome이 가장 많은 노력을 기울여야 하는 부분에 대해 알아볼 수 있습니다.

중첩

CSS 중첩 모듈은 선택기를 중첩하기 위한 문법을 정의합니다. 하나의 스타일 규칙을 다른 스타일 규칙 내에 중첩할 수 있는 기능을 제공하여 상위 규칙의 선택기를 기준으로 하위 규칙의 선택기를 사용합니다.

CSS 중첩은 CSS 전처리기로 사전 컴파일되는 것이 아니라 브라우저에서 파싱된다는 점에서 Sass와 같은 CSS 전처리기와 다릅니다.

CSS 중첩은 CSS 스타일시트의 가독성, 모듈성 및 유지관리성에 도움이 됩니다. 또한 잠재적으로 CSS 파일의 크기를 줄이는 데 도움이 됩니다. 사용자가 다운로드하는 데이터의 양이 줄어듭니다.

모든 브라우저가 CSS 중첩을 지원하지만 사양 변경으로 인해 구현에 몇 가지 차이점이 있습니다. Interop 2024 기간 동안의 목표는 모든 브라우저가 최신 사양을 준수하도록 하는 것입니다.

CSS 중첩에 대해 자세히 알아보기 사양에 대한 주요 업데이트를 기본 요소 태그 이름의 중첩.

텍스트 줄바꿈: 균형

CSS text-wrap의 잔액 값입니다. 속성은 텍스트 줄의 균형을 맞출 것을 브라우저에 나타냅니다. 일반적으로 활자 모양을 피하기 위해 제목이나 기타 짧은 텍스트 섹션에 사용됩니다.

<ph type="x-smartling-placeholder">
</ph> 두 줄로 줄바꿈된 헤드라인과 두 번째 줄에 2개의 단어가 있습니다.
불균형한 광고 제목
<ph type="x-smartling-placeholder">
</ph> 두 줄로 줄바꿈된 광고 제목이며 각 줄이 동일합니다.
균형 잡힌 광고 제목

브라우저에서는 이 속성의 다양한 긴 형식 버전과 약식 버전을 지원하는 방식이 다릅니다. 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 대시보드

지난 몇 년과 마찬가지로 실험 및 안정화 버전의 브라우저 버전에 관한 최신 점수가 대시보드에서 점수를 확인할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 점수가 있는 대시보드 스크린샷 - Interop: 65, Investigations: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
시험용 브라우저 버전 점수(2024년 2월 1일 기준)

올 한 해 동안 모든 중점 영역에서 얼마나 많이 개선될 수 있을지 몹시 기대됩니다.

Interop 2024 자세히 알아보기