2023년에도 모든 주요 브라우저 공급업체 및 기타 이해관계자들이 협력하여 주요 브라우저 호환성 문제를 해결하고자 합니다.
2023년에 모든 주요 브라우저 공급업체와 기타 이해관계자들이 주요 브라우저 호환성 문제를 해결하기 위해 다시 협력하고 있습니다. 이러한 노력은 Interop 2022를 통해 시작되었으며, 연말 게시물에서 Google과 함께 이룬 성과를 확인할 수 있습니다. 관련된 모든 사람이 이 변경사항이 전 세계 웹 개발자의 사용 환경을 개선하는 데 도움이 될 것이라고 믿습니다. Google은 올해 처음으로 제안서 프로세스를 공개적으로 발표했으며 전 세계의 프레임워크, 대기업, 브라우저 공급업체 및 개발자로부터 다양한 제안을 받았습니다.
Interop 2023 중점 분야
이번에는 26개 이상의 중점 분야가 있으며 프로젝트 문서에 자세히 설명되어 있습니다. 알파벳순으로 표시됩니다.
- CSS의 테두리 이미지
- CSS에서 공간 및 함수 색상 지정
- CSS의 컨테이너 쿼리
- CSS의 포함
- CSS 유사 클래스
- CSS의 맞춤 속성
- Flexbox
- 글꼴 기능 감지 및 팔레트
- Forms
- 그리드
- :has()
- Inert
- CSS의 마스킹
- CSS의 수학 함수
- 미디어 쿼리
- 웹 작업자의 모듈
- CSS 애니메이션의 모션 경로
- 오프스크린 캔버스
- 포인터 및 마우스 이벤트
- URL
- Web Compat 2023: 알려진 사이트 호환성 문제를 일으키는 작은 버그를 위한 포괄적인 포커스 영역
- 웹 코덱 (동영상)
- 웹 구성요소
모든 중점 분야에 대한 자세한 내용은 MDN 웹 문서에 기반한 웹 플랫폼 테스트에서 확인할 수 있으며, 여러분이 매우 흥미로운 몇 가지를 소개해 드리겠습니다.
컨테이너 쿼리
컨테이너 쿼리는 수년간 개발자들의 가장 큰 요청이 되어 왔으며 2022년에는 Chrome과 Safari에서 컨테이너 쿼리를 선보였습니다. Firefox는 컨테이너 쿼리를 Firefox 110에 제공할 것으로 예상하며, 이 포커스 영역에 대한 테스트를 통해 컨테이너 쿼리가 사양에 따라 브라우저 간에 안정적으로 작동하도록 할 수 있습니다.
:has(...)
개발자들은 오랫동안 CSS에서 상위 선택기를 구현해 달라고 요청해 왔습니다. :has() 의사 클래스를 사용하면 상위 선택기의 많은 사용 사례뿐만 아니라 참조 요소와 관련하여 이전 동위 요소를 선택할 수 있습니다. 예를 들어, 이렇게 하면 캡션이 있는 인물과 그렇지 않은 인물의 스타일을 다르게 지정할 수 있습니다. :has(), 계열 선택기에서 has()의 사용 사례에 관해 자세히 알아보세요.
커스텀 속성
CSS 변수라고도 하는 CSS 맞춤 속성을 사용하면 스타일시트에 값을 한 번 정의하면 여러 위치에서 이를 재사용하여 반복을 줄일 수 있습니다. 예를 들어 스타일시트에서 공통 색상이나 글꼴 크기를 한 번 정의하여 이를 모든 구성요소에서 사용할 수 있습니다. 맞춤 속성에 대한 기본 지원은 브라우저에서 오래 전부터 제공되어 왔습니다. Interop 2023은 @property 규칙에 중점을 둡니다. @property는 스타일시트의 맞춤 속성 등록을 나타내며, 속성 유형 확인, 기본값 설정 및 속성이 값을 상속해야 하는지 여부를 허용합니다. @property: CSS 변수에 초능력 부여에서 자세히 알아보세요.
CSS 마스킹
CSS 마스킹은 CSS를 사용하여 그래픽 애플리케이션에서 볼 수 있는 이미지 효과를 적용하는 방법을 제공합니다. 다양한 마스킹 속성에 대한 지원이 고르지 않아 마스킹을 사용하기가 더 어려워집니다. 개발자는 이 중점 영역을 브라우저 간에 자신 있게 광고 소재 효과를 사용할 수 있습니다. 이미지 마스킹에 대한 도움말에서 이미지에 효과를 적용하는 방법을 자세히 알아보세요.
OffscreenCanvas
<canvas> 요소와 Canvas API를 사용하면 스크립트로 화면에 그래픽을 그릴 수 있습니다. 그러나 이렇게 하면 작업이 사용자 상호작용과 동일한 스레드에서 완료되므로 성능 문제가 발생할 수 있습니다. OffscreenCanvas는 개발자에게 DOM 및 Canvas API에서 분리된 캔버스를 제공합니다. 개발자는 기본 스레드와는 별개로 Web Worker에서 렌더링 작업을 실행할 수도 있습니다. OffscreenCanvas의 성능 이점을 자세히 알아보세요.
포인터 및 마우스 이벤트
포인터 이벤트는 마우스, 펜, 스타일러스, 터치 스크린을 사용하여 페이지와 상호작용할 때 실행됩니다. 마우스를 사용하면 마우스 이벤트가 실행되지만 기록상의 이유로 터치에도 발생합니다. 이 포커스 영역은 페이지가 조회 테스트 및 스크롤 영역과 상호작용하는 방식을 포함하여 페이지와의 포인터 및 마우스 상호작용 동작을 다룹니다. 터치와 스타일러스는 2023년의 중점 영역에서 제외됩니다. 터치와 스타일러스는 웹 플랫폼 테스트가 충분하지 않기 때문입니다.
WebCodecs
WebCodecs API는 개발자가 동영상의 개별 프레임과 오디오 청크에 액세스할 수 있는 메서드를 제공합니다. 브라우저에서 이미 사용할 수 있는 코덱에 대한 액세스와 코덱과 상호작용할 수 있는 다양한 인터페이스를 제공합니다. WebCodecs로 동영상 처리 도움말에서는 API를 사용하여 개별 프레임을 디코딩하고 캔버스에 렌더링하는 방법을 설명합니다.
웹 구성요소
웹 구성요소는 맞춤 요소, Shadow DOM과 같이 재사용 가능한 구성요소를 만드는 데 사용되는 여러 기술을 포괄하는 용어입니다. Interop 2023은 이러한 기본 기술의 상호 운용성을 개선하는 데 중점을 둡니다.
대시보드
Interop 2023 대시보드에서 한 해 동안의 진행 상황을 살펴보세요. 모든 주요 브라우저 엔진의 현재 점수와 중점 영역의 해결 상태를 확인할 수 있습니다.
중점 영역 점수는 시험 합격률을 기준으로 계산됩니다. 의견이 있거나 WPT를 개선하는 데 기여하려면 문제를 제출하여 점수에 사용된 테스트 세트의 업데이트를 요청하세요.
