3월에 웹 플랫폼을 처음 사용함

2026년 3월에 안정화 버전 및 베타 웹브라우저에 도입된 흥미로운 기능을 살펴보세요.

Rachel Andrew

게시일: 2026년 3월 31일

안정화 브라우저 출시

Chrome 146, Firefox 149, Safari 26.4가 3월에 안정화 버전으로 출시되었습니다. 이 게시물에서는 이번 달에 플랫폼에 출시되는 새로운 기능을 살펴봅니다.

선택적 컨테이너 쿼리 조건

Firefox 149와 Safari 26.4 모두 조건이 없는 이름 전용 @container 쿼리를 지원합니다. 이렇게 하면 이름만을 기반으로 컨테이너를 일치시킬 수 있으므로 크기나 스타일 제약 조건을 지정하지 않고도 컨테이너 컨텍스트에 따라 요소를 스타일링하는 것이 더 간단해집니다.

스크롤 트리거 애니메이션

Chrome 146에서는 스크롤 위치 기반 애니메이션 제어가 추가됩니다. 이 기능을 사용하면 CSS로 선언적으로 상호작용을 만들어 작업을 작업자 스레드로 오프로드하고 성능을 개선할 수 있습니다. 또한 웹 애니메이션을 위한 JavaScript 인터페이스도 포함됩니다. 자세한 내용은 CSS 스크롤 트리거 애니메이션이 곧 출시됩니다를 참고하세요.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

trigger-scope 속성

스크롤 트리거 애니메이션과 함께 Chrome 146에서는 trigger-scope 속성이 도입되었습니다. 이를 통해 애니메이션 트리거 이름의 공개 상태를 제한하여 애니메이션-트리거 상호작용을 격리하고 전역 이름 충돌을 방지할 수 있습니다.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

팝오버 hint 값

이제 Firefox 149에서 popover 전역 속성의 hint 값을 지원합니다. hint 값이 있는 팝오버는 표시될 때 auto 팝오버를 닫지 않지만 다른 hint 팝오버는 닫아 팝오버 동작을 더 세부적으로 제어할 수 있습니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

그리드 레인

Safari 16.4는 display: grid-lanes를 지원합니다. 이는 메이슨리 스타일 레이아웃을 전환하는 display 값입니다.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.4.

sizes 속성의 수학 함수

Safari 26.4에서는 <img> 요소의 sizes 속성에서 min(), max(), clamp() 수학 함수를 사용하는 기능이 추가되었습니다. 이를 통해 반응형 이미지 로딩의 유연성이 향상됩니다.

JavaScript 반복자 시퀀싱

이제 Chrome 146과 Safari 26.4 모두 반복기 시퀀싱을 지원하여 기존 반복기를 시퀀싱하여 반복기를 만드는 Iterator.concat(...items)를 도입합니다. 이 기능은 이제 Baseline Newly available입니다.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 147.
  • Safari: 26.4.

Source

CloseWatcher 인터페이스

Firefox 149에서는 CloseWatcher 인터페이스 지원이 추가되었습니다. 이를 통해 개발자는 Windows의 Esc 키나 Android의 뒤로 버튼과 같은 기기 기본 메커니즘을 사용하여 내장 대화상자와 팝오버와 동일한 방식으로 닫을 수 있는 구성요소를 구현할 수 있습니다.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox Technology Preview: supported.
  • Safari: not supported.

Source

베타 브라우저 출시

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

Chrome 147 베타

Chrome 147 베타에는 인수의 색상에 대해 가장 높은 대비를 제공하는 색상에 따라 검은색 또는 흰색을 반환하는 CSS 함수인 contrast-color()가 포함되어 있습니다. border-shape 및 요소 범위 뷰 전환도 포함됩니다.

Firefox 150 베타에서는 CSS revert-rule 키워드(요소 및 DocumentOrShadowRoot의 경우 customeElementRegistry, 이미지의 경우 light-dark())가 추가되었습니다.