2월에 웹 플랫폼을 새로 도입

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

Rachel Andrew

게시일: 2025년 2월 28일

안정적인 브라우저 출시

2025년 2월에 Firefox 135 및 Chrome 133이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

WebAuthn 기능 확인

Firefox 135와 Chrome 133 모두 PublicKeyCredential.getClientCapabilities() 정적인 메서드에 대한 지원을 추가합니다. 이렇게 하면 브라우저 스니핑에 의존하지 않고도 브라우저가 Web Authentication API의 기능을 지원하는지 확인할 수 있습니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

Firefox 135에는 소스 제안서를 사용한 JSON 파싱의 기능인 JSON.parse reviver 매개변수 context 인수, JSON.isRawJSON(), JSON.rawJSON()도 포함되어 있습니다.

Browser Support

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

Source

팝오버 속성의 힌트 값

Chrome 133에서는 popover 속성의 세 번째 값인 popover="hint"를 추가합니다. '도움말' 유형 동작과 가장 자주 연결되는 힌트는 약간 다른 동작을 보입니다. 이제 기존 자동 팝오버 스택이 열려 있는 동안 관련 없는 힌트 팝오버를 열 수 있습니다.

표준적인 예는 <select> 선택 도구가 열려 있고 (popover="auto") 마우스 오버 트리거 도움말 (popover="hint")이 표시된 경우입니다. 이 작업으로 <select> 선택 도구가 닫히지 않습니다.

Browser Support

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

Popover = 힌트에서 자세히 알아보세요.

CSS 고급 attr() 함수

Chrome 133에는 CSS 추가 기능이 많이 있습니다. 이 Chrome 출시에는 CSS 수준 5에 지정된 attr()의 확장이 포함되어 있습니다. 이 확장은 <string> 이외의 유형을 허용하고 모든 CSS 속성에서 사용할 수 있도록 합니다 (의사소재 콘텐츠에 대한 기존 지원 외에도).

Browser Support

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

CSS attr() 업그레이드에서 자세히 알아보세요.

CSS 스크롤 상태 컨테이너 쿼리

또한 Chrome 133에서는 컨테이너 쿼리를 사용하여 스크롤 상태에 따라 컨테이너의 자손에 스타일을 지정합니다.

쿼리 컨테이너는 스크롤 컨테이너이거나 스크롤 컨테이너의 스크롤 위치의 영향을 받는 요소입니다. 다음 상태를 쿼리할 수 있습니다.

  • stuck: 고정된 위치의 컨테이너가 스크롤 상자의 가장자리 중 하나에 고정됩니다.
  • snapped: 스크롤 스냅 정렬 컨테이너가 현재 가로 또는 세로로 스냅되어 있습니다.
  • scrollable: 스크롤 컨테이너를 쿼리된 방향으로 스크롤할 수 있는지 여부입니다.

컨테이너를 쿼리할 수 있는 container-type의 새 값 scroll-state도 있습니다.

Browser Support

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

자세한 내용은 CSS scroll-state()을 참고하세요.

CSS text-box, text-box-trim, text-box-edge

Chrome 133의 CSS에는 text-box-trim 및 text-box-edge 속성과 함께 text-box 약어 속성이 있습니다. 이를 통해 텍스트의 세로 정렬을 더 세부적으로 제어할 수 있습니다.

Browser Support

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

이 유용한 속성이 CSS text-box-trim에서 작동하는 방식을 자세히 알아보세요.

DOM 상태 보존 이동

Chrome 133에는 요소의 상태를 재설정하지 않고 DOM 트리에서 요소를 이동할 수 있는 DOM 원시 (Node.prototype.moveBefore)가 추가되었습니다.

삭제 및 삽입 대신 이동하면 다음과 같은 상태가 보존됩니다.

  • <iframe> 요소는 로드된 상태로 유지됩니다.
  • 활성 요소는 포커스를 유지합니다.
  • 팝오버, 전체 화면, 모달 대화상자는 계속 열려 있습니다.
  • CSS 전환 및 애니메이션이 계속됩니다.

Browser Support

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

FileSystemObserver 인터페이스

Chrome 133에 추가된 FileSystemObserver 인터페이스는 웹사이트에 파일 시스템 변경사항을 알립니다. 사이트는 사용자가 이전에 권한을 부여한 파일 및 디렉터리의 변경사항을 사용자의 로컬 기기 또는 버킷 파일 시스템 (원본 비공개 파일 시스템이라고도 함)에서 관찰하고 변경 유형과 같은 기본 변경 정보에 관해 알림을 받습니다.

Browser Support

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

베타 브라우저 출시

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

최신 Safari 베타에는 이 브라우저가 안정화되면 새로운 기준으로 제공될 것으로 예상되는 몇 가지 기능을 비롯한 수많은 추가 사항과 개선사항이 포함되어 있습니다. 예를 들어 writing-mode: sideways-rl 및 writing-mode: sideways-lr, ClipboardItem의 supports() 정적 메서드, Iterator Helpers 제안서의 모든 항목 목록이 있습니다.

Safari 18.4 베타와 Firefox 136 모두 Cookie Store API를 포함하며, 이 API는 두 브라우저가 모두 출시되면 새로운 기준으로 제공되어야 합니다.

Firefox 136에는 :open 및 :has-slotted 가상 클래스가 포함되어 있으며, 후자는 Chrome 134에도 있습니다. 여기에는 Intl.DurationFormat도 포함되며, 이 경우 Intl.DurationFormat가 새롭게 사용 가능한 기준이 됩니다.

Chrome 134에는 맞춤설정 가능한 <select> 요소, CSS dynamic-range-limit 속성, <dialog> 요소의 조용히 닫기 기능이 포함되어 있습니다.