3월에 새롭게 추가된 웹 플랫폼 기능

2026년 3월 동안 안정(stable) 및 베타(beta) 웹 브라우저에 도입된 흥미로운 기능들을 살펴보세요.

안정 브라우저 출시

3월 동안 Chrome 146, Firefox 149, Safari 26.4가 안정 버전으로 출시되었습니다. 이 포스트에서는 이번 달 플랫폼에 도착한 새로운 기능들을 살펴봅니다.

선택적 컨테이너 쿼리 조건 (Optional container query conditions)

Firefox 149와 Safari 26.4 모두 조건이 없는 이름 전용 @container 쿼리 지원을 포함합니다. 이를 통해 크기나 스타일 제약 조건을 지정할 필요 없이 오직 컨테이너의 이름만을 기반으로 컨테이너를 매칭할 수 있어, 컨테이너 문맥(context)에 따라 요소를 스타일링하는 과정을 더 직관적으로 만들어 줍니다.

스크롤 트리거 애니메이션 (Scroll-triggered animations)

Chrome 146은 스크롤 위치 기반의 애니메이션 제어 기능을 추가했습니다. 이 기능은 CSS를 통해 선언적(declaratively)으로 상호작용을 생성할 수 있게 하며, 작업을 워커 스레드(worker thread)로 오프로딩하여 성능을 향상시킵니다. 또한 웹 애니메이션을 위한 JavaScript 인터페이스도 포함되어 있습니다. 자세한 내용은 'CSS 스크롤 트리거 애니메이션이 다가오고 있습니다'에서 확인하세요.

브라우저 지원

trigger-scope 속성

스크롤 트리거 애니메이션과 함께, Chrome 146은 trigger-scope 속성을 도입했습니다. 이를 통해 애니메이션 트리거 이름의 가시성을 제한할 수 있으며, 애니메이션과 트리거 간의 상호작용을 격리하고 전역 이름 충돌을 방지하는 데 도움을 줍니다.

브라우저 지원

Popover hint 값

Firefox 149는 이제 popover 전역 속성에 대한 hint 값을 지원합니다. hint 값을 가진 Popover는 표시될 때 auto popover를 닫지 않지만, 다른 hint popover는 닫게 되어 popover 동작에 대해 더 세밀한 제어를 제공합니다.

브라우저 지원

그리드 레인 (Grid lanes)

Safari 26.4는 display: grid-lanes를 지원합니다. 이는 메이슨리(masonry) 스타일 레이아웃을 활성화하는 display 값입니다.

브라우저 지원

sizes 속성의 수학 함수 (Math functions in sizes attribute)

Safari 26.4는 <img 요소의 sizes 속성에서 min(), max(), clamp() 수학 함수를 사용하는 것에 대한 지원을 추가했습니다. 이는 반응형 이미지 로딩(responsive image loading)에 더 많은 유연성을 제공합니다.

JavaScript iterator sequencing (반복자 시퀀싱)

Chrome 146과 Safari 26.4 모두 이제 iterator sequencing (반복자 시퀀싱)을 지원하며, 기존 반복자들을 순차적으로 연결하여 새로운 반복자를 생성하는 Iterator.concat(...items)를 도입했습니다. 이 기능은 현재 Baseline의 Newly available (새로 사용 가능) 상태입니다.

CloseWatcher interface (CloseWatcher 인터페이스)

Firefox 149는 CloseWatcher 인터페이스 지원을 추가했습니다. 이를 통해 개발자는 Windows의 Esc 키나 Android의 뒤로 가기(Back) 키와 같은 기기 네이티브 메커니즘을 사용하여, 내장된 대화 상자(dialogs)나 팝오버(popovers)와 동일한 방식으로 닫을 수 있는 컴포넌트를 구현할 수 있습니다.

Beta browser releases (베타 브라우저 출시)

베타 브라우저 버전은 다음 안정화된(stable) 브라우저 출시 버전에 포함될 기능들을 미리 보여줍니다. 안정화 버전이 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제된 기능들을 테스트할 수 있습니다. 이번 달의 새로운 베타 출시 버전에는 Firefox 150과 Chrome 147이 포함됩니다.

Chrome 147 beta

Chrome 147 beta에는 contrast-color()가 포함되어 있습니다. 이는 인자로 전달된 색상에 대해 가장 높은 대비를 제공하는 검은색 또는 흰색을 반환하는 CSS 함수입니다. 또한 border-shape와 요소 범위 뷰 전환(element-scoped view transitions)도 포함되었습니다.

Firefox 150 beta에는 CSS revert-rule 키워드, Elements 및 DocumentOrShadowRoot를 위한 customeElementRegistry, 그리고 이미지를 위한 light-dark()가 추가되었습니다.