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

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

Rachel Andrew

게시일: 2025년 3월 31일

안정적인 브라우저 출시

2025년 3월 Firefox 136, Chrome 134, Safari 18.4가 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

새로운 가상 클래스 :has-slotted 및 :open

Firefox 136에서는 웹 구성요소를 렌더링할 때 <slot> 요소에 콘텐츠가 추가된 <template>의 요소에 스타일을 지정하는 데 사용되는 :has-slotted 가상 클래스를 지원합니다.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 136.
  • Safari: not supported.

Source

:open 가상 클래스를 사용하면 현재 열려 있는 상태의 요소를 선택할 수 있습니다. 이는 선택 도구가 있는 <details>, <dialog>, <input> 요소와 드롭다운 선택 상자가 열려 있을 때의 <select> 요소에 적용됩니다.

Browser Support

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

Source

Intl.DurationFormat

Firefox 136에서는 Intl.DurationFormat도 지원합니다. 이렇게 하면 언어를 고려하여 시간 형식을 지정할 수 있습니다. 이 기능은 기준에 추가되며 Intl.DurationFormat가 이제 기준으로 새로 제공됨에서 자세히 알아볼 수 있습니다.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: 136.
  • Safari: 16.4.

Source

contenteditable 속성의 plaintext-only 값

이번 Firefox 출시에서 새롭게 기준이 되는 또 다른 기능은 contenteditable 전역 속성의 plaintext-only 값입니다. 이제 contenteditable 'plaintext-only' 속성 값 조합이 기준으로 새로 제공됨에서 이 값에 관해 알아보세요.

Browser Support

  • Chrome: 51.
  • Edge: 12.
  • Firefox: 136.
  • Safari: ≤13.1.

CSS의 측면 쓰기 모드

Safari 18.4에는 writing-mode: sideways-rl 및 writing-mode: sideways-lr 지원이 포함되어 있습니다. 이러한 값은 프레젠테이션상의 이유로 텍스트를 세로로 표시하려는 경우에 사용됩니다. 이제 '기준점(신규)'으로 표시됩니다.

Browser Support

  • Chrome: 132.
  • Edge: 132.
  • Firefox: 43.
  • Safari: 18.4.

CSS shape() 함수

또한 Safari 18.4에는 클립 경로에서 반응형 자유 형식 도형을 허용하는 CSS shape() 함수가 있습니다.

Browser Support

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

Source

ClipboardItem.supports()

Safari 18.4는 ClipboardItem()의 supports() 메서드를 구현합니다. 이를 통해 클립보드 작업 중에 지원되는 형식을 확인할 수 있으며, 이제 기준으로 새로 사용할 수 있습니다.

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 127.
  • Safari: 18.4.

Source

<dialog>에 대한 조명 닫기

Popover API의 좋은 기능 중 하나는 가벼운 닫기 동작입니다. 이 동작은 이제 Chrome 134에서 구현된 <dialog>의 일부이며, 동작을 제어하는 새로운 closedby 속성이 있습니다.

Browser Support

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

이제 공유 저장소에서 Web Locks API가 지원됨

Chrome 134에서는 Web Locks API를 Shared Storage에 통합합니다. 이렇게 하면 교차 사이트 도달범위 측정으로 인해 get() 및 set() 로직 내의 잠재적인 경합 상태로 인해 중복 보고가 발생할 수 있는 시나리오를 방지할 수 있습니다.

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 보세요. 새로운 베타는 Firefox 137 및 Chrome 135입니다. 이번 출시에서는 플랫폼에 여러 가지 멋진 기능을 제공합니다. 자세한 내용은 출시 노트를 확인하세요. 몇 가지 주요 내용을 소개합니다.

Firefox 137에는 반복 가능한 객체 (예: 배열)의 합계를 반환하는 Math.sumPrecise 정적 메서드가 포함되어 있습니다. 이 버전에는 Atomics.pause()도 포함되어 있습니다. 이 메서드는 공유 리소스에 대한 액세스를 기다리는 동안 현재 스레드가 스핀락 상태에 있음을 CPU에 힌트합니다.

Chrome 135에는 캐러셀 만들기와 관련된 여러 CSS 기능이 포함되어 있습니다. 또한 맞춤설정 가능한 <select> 요소와 command 및 commandfor 속성이 포함되어 있습니다.