4월의 웹 플랫폼 새로운 기능

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

Rachel Andrew

게시일: 2026년 4월 24일

안정화 브라우저 출시

Chrome 147 및 Firefox 150이 4월에 안정화 버전으로 출시되었습니다. 이번 달에는 Safari의 안정화 버전이 출시되지 않았습니다. 이번 달에는 다양한 새로운 기능이 출시되었습니다.

contrast-color() CSS 함수가 Baseline이 됨

Chrome 147에서 contrast-color() 함수를 제공하므로 이제 이 유용한 접근성 기능을 모든 주요 엔진에서 사용할 수 있어 Baseline Newly available이 됩니다.

이 함수는 색상 값을 가져와 제공된 색상에 대해 가장 높은 대비를 제공하는 색상에 따라 검은색 또는 흰색을 반환합니다. 이를 통해 텍스트가 접근성 대비 요구사항을 충족하는지 확인할 수 있습니다.

Browser Support

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

Source

스크롤 기반 애니메이션 범위 속성이 이제 기준입니다.

Firefox 150에는 animation-range-start 및 animation-range-end 속성과 animation-range 약어에 대한 지원이 포함되어 있습니다. 이렇게 하면 이러한 속성이 기준선 새로 사용 가능이 됩니다.

이러한 속성을 사용하면 스크롤 기반 애니메이션 타임라인에서 애니메이션이 시작되고 종료되는 위치를 제어할 수 있습니다.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: not supported.
  • Safari: 26.

Source

ariaNotify() 메서드

Firefox 150에서는 Document 및 Element에서 ariaNotify() 메서드를 지원합니다. 이 메서드를 사용하면 콘텐츠 작성자가 스크린 리더가 알릴 텍스트 문자열을 대기열에 추가할 수 있습니다.

이를 통해 특히 DOM 업데이트와 연결되지 않은 공지사항의 경우 ARIA 라이브 리전에 비해 더 안정적이고 인체공학적인 대안을 제공할 수 있습니다.

Browser Support

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

Source

지연 로드된 이미지의 자동 크기

이제 Firefox 150에서 <img> 요소의 sizes 속성에 "auto" 키워드를 지원합니다. 이를 통해 지연 로드된 이미지는 계산된 이미지 레이아웃 크기를 사용하여 srcset에서 최적의 소스를 선택할 수 있으므로 반응형 이미지 설정이 간소화됩니다.

Browser Support

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

Source

요소 범위 뷰 전환

Chrome 147은 임의의 HTML 요소에 element.startViewTransition()를 노출합니다. 이를 통해 특정 요소로 범위가 지정된 전환이 가능합니다. 즉, 의사 요소는 상위 클립과 변환의 영향을 받으며 여러 전환이 동시에 실행될 수 있습니다.

CSS border-shape 속성

Chrome 147에서는 border-shape 속성이 도입되어 다각형이나 원과 같은 모양으로 직사각형이 아닌 테두리를 만들 수 있습니다.

SVG <textPath> 경로 속성

Chrome 147에서는 SVG <textPath> 요소에 path 속성을 지원하여 텍스트 경로 지오메트리를 인라인으로 정의할 수 있습니다.

Browser Support

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

JSON 및 스타일의 modulepreload 지원

Chrome 147에서는 JSON 및 스타일 모듈 유형을 <link rel="modulepreload"> 대상으로 지원합니다.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: 26.2.

Math.sumPrecise

Chrome 147은 Math.sumPrecise에 관한 TC39 제안을 구현하여 반복 가능한 항목의 정확한 값 합계를 반환합니다. 이 메서드는 이제 Baseline Newly available입니다.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 137.
  • Safari: 26.2.

Source

베타 브라우저 출시

베타 브라우저 버전에서는 다음 안정화 버전 브라우저에 포함될 내용을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새 기능이나 삭제를 테스트하기에 좋은 시기입니다. 이번 달의 새로운 베타는 Chrome 148, Firefox 151, Safari 26.5입니다.

Chrome 148 베타에는 CSS의 이름 전용 컨테이너 쿼리, 동영상 및 오디오 요소의 지연 로드, @supports의 기능 감지를 위한 at-rule() 함수가 포함되어 있습니다.

Firefox 151 베타에는 CSS 컨테이너 스타일 쿼리가 포함되어 있습니다.

Safari 26.5 베타에는 <details>, <dialog>, <select>, <input> 요소의 :open 가상 클래스 지원과 함께 다양한 문제 해결이 포함되어 있습니다.