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

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

Rachel Andrew

게시일: 2025년 4월 30일

안정적인 브라우저 출시

2025년 4월 Firefox 137, Firefox 138, Chrome 135, Chrome 136이 안정화되었습니다. 이 게시물에서는 Chrome과 Firefox에서 두 번의 출시가 있었던 한 달 동안 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

Chrome에 캐러셀이 도입됨

버전 135에서 Chrome에 도입된 여러 기능을 사용하면 웹에서 캐러셀 및 기타 페이지 환경을 만들 수 있습니다.

::scroll-button() 및 ::scroll-marker() 가상 요소를 사용하면 사이트의 스크롤 가능한 영역에 버튼과 마커를 추가하여 탐색 컨트롤을 제공하고 사용자가 캐러셀을 진행할 때 현재 위치를 표시할 수 있습니다.

Browser Support

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

Source

열 프래그먼트에 스타일을 지정할 수 있는 ::column 가상 요소입니다.

Browser Support

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

Source

interactivity 속성은 요소와 그 평면 트리 자손 (텍스트 행 포함)이 비활성 상태인지 여부를 지정합니다.

Browser Support

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

요소를 비활성화하면 요소에 포커스를 맞추거나, 수정하거나, 선택하거나, 페이지 내 검색을 통해 검색할 수 있는지에 영향을 미칩니다. 접근성 트리에 표시되는지 여부에도 영향을 미칩니다.

CSS를 사용한 캐러셀에서 자세히 알아보세요.

command 및 commandfor 속성

Chrome 135에는 command 및 commandfor 속성도 있습니다. 이러한 속성은 popovertargetaction 및 popovertarget 속성을 개선하고 대체합니다. 이러한 새 속성을 버튼에 추가하면 브라우저가 단순성과 접근성 관련 핵심 문제를 해결하고 내장된 공통 기능을 제공할 수 있습니다.

command 및 commandfor 소개에서 자세히 알아보세요.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: behind a flag.
  • Safari Technology Preview: supported.

Source

CSS shape() 함수

Chrome 135의 shape() CSS 함수는 clip-path 및 offset-path 속성의 도형을 정의하는 데 사용됩니다. 반응형 클리핑에 이를 사용하는 방법을 알아보세요. 이 기능은 Safari 18.4에서 출시되었으며 Firefox Nightly에도 있습니다. 곧 새로운 기준으로 제공될 예정입니다.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox Technology Preview: supported.
  • Safari: 18.4.

Source

Atomics.pause()

Firefox 137에는 이 기능을 새 기준으로 사용할 수 있게 하는 Atomics.pause()가 포함되어 있습니다. 이 정적 메서드는 공유 리소스에 대한 액세스를 기다리는 동안 호출자가 스핀 중임을 CPU에 힌트하는 마이크로 대기 프리미티브를 제공합니다. 이렇게 하면 시스템이 현재 스레드를 생성하지 않고도 코어 (예: 전원) 또는 스레드에 할당된 리소스를 줄일 수 있습니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 137.
  • Safari: 18.4.

Source

CSS hyphenate-limit-chars

Firefox 137에는 CSS hyphenate-limit-chars 속성도 포함되어 있습니다. 이 속성은 단어의 낱말 띄어쓰기를 허용하기 위한 최소 단어 길이와 하이픈 앞뒤의 최소 문자 수를 지정합니다.

Browser Support

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

Source

RegExp.escape

RegExp.escape정적 메서드는 몇 개월 내에 모든 브라우저에 출시되었으며 Chrome 136에 출시되면서 새로운 기준으로 제공됩니다.

이 메서드는 문자열에서 잠재적인 정규 표현식 문법 문자를 이스케이프 처리하여 RegExp() 생성자의 리터럴 패턴으로 안전하게 사용할 수 있는 새 문자열을 반환합니다.

Browser Support

  • Chrome: 136.
  • Edge: 136.
  • Firefox: 134.
  • Safari: 18.2.

Source

Error.isError()

Error.isError()정적 메서드는 전달된 값이 오류인지 여부를 결정합니다. Firefox 138에 포함되어 있습니다. 모든 브라우저에서 브라우저 지원을 받지만 Safari에서 현재 DOMException 인스턴스에 대해 false를 반환하므로 아직 새로운 기준으로 간주되지는 않습니다.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 138.
  • Safari: 18.4.

Source

FedCM용 Login Status API

Firefox 138은 Federated Credential Management (FedCM) API를 사용할 때 Login Status API를 지원합니다. 브라우저 사용자가 ID 제공업체에 로그인했는지 설정하고 확인하는 데 사용됩니다. Firefox 138에는 NavigatorLogin 인터페이스, navigator.login 속성, Set-Login HTTP 응답 헤더에 대한 지원이 포함되어 있습니다.

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 138.
  • Safari: not supported.

Source

Importmap 무결성

Firefox 138에서는 <script> 요소의 type 속성의 importmap 값이 integrity 키를 지원합니다. 이렇게 하면 가져오기 맵에서 참조된 ES 모듈 URL을 무결성 메타데이터와 일치시킬 수 있습니다. 이 기능은 이제 기준점 새로 사용할 수 있습니다.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 138.
  • Safari: 18.

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 보세요. 새로운 베타는 Firefox 139 및 Safari 18.5입니다.

지금까지 Safari 18.5 베타에는 대규모 18.4 출시 이후 몇 가지 버그 수정사항만 포함되어 있습니다.

이 글을 작성하는 시점에서 Firefox는 출시 노트를 게시하지 않았지만 베타에는 Temporal API의 출시가 포함되어 있는 것으로 보이며, 이로써 Firefox는 이 향상된 버전의 Date를 출시하는 최초의 브라우저가 되었습니다. 또한 이 메서드를 새로 사용할 수 있는 기준으로 가져오는 <dialog> request.close()를 구현했습니다.