게시일: 2026년 2월 12일
브라우저 간 웹 플랫폼의 주요 기능의 상호 운용성을 높이기 위한 노력인 Interop 2026을 발표하게 되어 기쁩니다. Apple, Google, Igalia, Microsoft, Mozilla 등 브라우저 렌더링 엔진에 상당한 기여를 하는 회사의 대표팀이 운영하는 Interop 2026은 웹 개발자와 최종 사용자에게 우선순위가 높은 기능에 중점을 둡니다.
이전 Interop 노력과 마찬가지로 선택된 테스트는 자동화된 테스트 인프라에서 지속적으로 실행되며 통과율은 Interop 2026 대시보드에 표시됩니다.
중점 분야
2026년의 중점 영역에는 HTML 상태 및 CSS 상태 설문조사에서 최상위 상호 운용성 문제로 확인된 여러 영역이 포함됩니다. 이러한 문제는 webstatus.dev에서 추적합니다. 올해 포함된 많은 기능은 개발자 신호 저장소에서 요청된 문제 상위 20위에도 포함되어 있습니다.
앵커 위치 지정
표시 위치: 주요 상호 운용성 문제, 개발자 신호 앵커 포지셔닝
앵커 포지셔닝을 사용하면 참조하는 콘텐츠 옆에 툴팁을 배치하는 등 다른 요소의 위치를 기반으로 요소를 배치할 수 있습니다. 이 집중 영역은 Interop 2025에서 이어지며 2025년 테스트만 포함합니다.
컨테이너 스타일 쿼리
표시 위치: 주요 상호 운용성 문제, 개발자 신호 컨테이너 스타일 쿼리
컨테이너 스타일 쿼리는 하나 이상의 style() 함수와 함께 @container at-rule을 사용하여 컨테이너의 맞춤 속성의 계산된 값을 기반으로 요소에 스타일을 적용합니다.
대화상자 및 팝오버
표시 위치: 주요 상호 운용성 문제, 개발자 신호 closedby, hint
Interop 2026에서 <dialog> 요소와 Popover API 작업은 다음 사항에 중점을 둡니다.
- 대화상자를 닫는 사용자 작업을 설정하는
<dialog closedby>속성 (예: 대화상자 외부 클릭) - 열린 상태가 있는 요소와 일치하는
:openCSS 의사 클래스 - 다른 자동 팝업에 종속된 팝오버를 생성하는
popover="hint"전역 속성으로, 툴팁에 유용합니다.
스크롤 기반 애니메이션
표시 위치: 상위 상호 운용성 문제
여기에는 사용자의 스크롤 위치에 따라 애니메이션을 진행하는 animation-timeline, scroll-timeline, view-timeline CSS 속성이 포함됩니다.
전환 보기
표시 위치: 주요 상호 운용성 문제, 개발자 신호 교차 문서 보기 전환
Interop 2025에서는 동일 문서 뷰 전환이 새로 출시된 Baseline에 도입되었습니다. Interop 2026에서 뷰 전환 작업은 다음 사항에 중점을 둡니다.
- 동일한 문서 보기 전환 개선
<link>,<script>,<style>의blocking="render"속성<link rel="expect">속성:active-view-transition-type()CSS 가상 클래스- 교차 문서 보기 전환
attr() CSS 함수
개발자 신호에 표시됨 attr()
attr() CSS 함수는 HTML 요소의 속성 값을 반환하며, 이 값을 특정 유형 또는 특정 단위로 반환하는 옵션이 있습니다.
설문조사에서 강조한 이러한 주요 기능 외에도 Interop 2026에는 다음이 포함됩니다.
contrast-color() CSS 함수
contrast-color() CSS 함수는 지정된 전경색 또는 배경색과 대비되는 색상을 선택합니다.
맞춤 주요 특징
맞춤 강조 표시를 사용하면 DOM에 요소를 추가하지 않고도 임의의 텍스트 범위를 스타일 지정할 수 있습니다.
업로드 및 범위 가져오기
fetch() 메서드 작업은 본문의 ReadableStream에 중점을 두어 서버로 데이터를 스트리밍하고, 요청 및 응답에 FormData 및 미디어 유형을 지원하며, Range 헤더를 지원합니다.
IndexedDB
IndexedDB 포커스 영역은 IDBObjectStore 및 IDBIndex의 getAllRecords() 메서드를 타겟팅합니다. 이러한 메서드는 레코드와 기본 키를 일괄적으로 반환하여 대규모 데이터 세트의 읽기 작업을 가속화합니다.
Wasm용 JSPI
JavaScript Promise Integration API (JSPI)를 사용하면 외부 기능에 대한 동기 액세스를 예상하는 Wasm 애플리케이션이 해당 기능이 비동기인 환경에서 작동할 수 있습니다.
미디어 가상 클래스
이 영역에는 상태에 따라 <audio> 및 <video> 요소와 일치하는 :playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked CSS 의사 클래스가 포함됩니다.
Navigation API
올해는 탐색 API의 상호 운용성을 지속적으로 개선하고 핸들러가 해결될 때까지 커밋을 지연하는 precommitHandler 옵션을 navigateEvent.intercept()로 변경하는 데 중점을 둘 예정입니다.
범위가 지정된 맞춤 요소 레지스트리
CustomElementRegistry() 생성자는 전역 레지스트리와 별도의 새 맞춤 요소 레지스트리를 만들어 동일한 태그 이름이 있는 여러 맞춤 요소가 공존할 수 있도록 합니다.
스크롤 스냅
이 포커스 영역에서는 스크롤 컨테이너 내에서 패닝 및 스크롤 동작을 제어하는 CSS 스크롤 스냅을 다룹니다.
shape() CSS 함수
shape() CSS 함수는 line, move, curve와 같은 명령어를 사용하여 도형을 만들며 clip-path 및 shape-outside와 함께 사용할 수 있습니다.
웹 호환성
이 영역은 다음과 같은 실제 문제를 일으키는 특정 상호 운용성 문제를 타겟팅합니다.
- ESM 모듈 로드
- 애니메이션 이벤트와 관련된 스크롤 이벤트의 타이밍입니다.
-webkit-user-select속성의 접두사 삭제
WebRTC
Interop 2026에서는 Interop 2025 집중 분야에서 실패한 테스트를 수정하고 WebRTC 상호 운용성을 계속 개선하는 데 중점을 둡니다.
WebTransport API
이 영역에서는 HTTP/3 프로토콜을 사용하여 클라이언트와 서버 간에 데이터를 전송하는 WebTransport API를 다룹니다.
zoom CSS 속성
Interop 2025에 이어 이 영역에서는 요소의 크기를 조정하고 페이지 레이아웃에 영향을 미치는 zoom CSS 속성에 중점을 둡니다.
조사 노력
Interop 2026에는 향후 기능의 테스트 및 상호 운용성 작업을 준비하기 위한 조사 노력도 포함됩니다.
- 접근성 테스트: 브라우저 전반에서 일관된 접근성 트리를 생성하고 WPT 인프라를 개선하기 위해 노력하고 있습니다.
- JPEG XL: 점진적 렌더링 요구사항 정의 등 JPEG XL 이미지 형식을 테스트할 수 있도록 하는 데 중점을 둡니다.
- 모바일 테스트: 동적 뷰포트 변경과 같은 모바일 전용 기능을 테스트하기 위해 WPT 인프라를 개선합니다.
- WebVTT: 표준 준수 이해도를 높이기 위해 테스트를 수정하고 문서를 업데이트합니다.
2026년까지 진행 상황 추적
Interop 2026 대시보드에서 프로젝트를 확인하세요.