10월에 도입된 새로운 웹 플랫폼

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

2024년 10월에 Firefox 131, Firefox 132, Safari 18.1, Chrome 130이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

Firefox 131에서는 동기식 반복자 도우미 지원을 추가합니다. 예를 들어 Iterator.prototype.forEach()Iterator.prototype.map()이 있습니다. 이러한 도우미를 사용하면 중간 배열 객체를 만들지 않고도 반복자에 배열과 유사한 작업을 실행할 수 있습니다. 여기에는 중간 배열을 만들 수 없는 매우 큰 데이터 세트도 포함됩니다.

Browser Support

  • Chrome: 122.
  • Edge: 122.
  • Firefox: 131.
  • Safari: not supported.

Source

텍스트 프래그먼트

Firefox 131에서는 CSS ::target-text 가상 요소와 함께 텍스트 프래그먼트도 지원됩니다.

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 131.
  • Safari: 18.2.

Source

Cookies Having Independent Partitioned State (CHIPS)

Firefox 131에는 Set-Cookie HTTP 헤더의 partitioned 디렉티브를 사용하여 쿠키를 파티션된 저장소로 선택할 수 있는 CHIPS가 포함되어 있습니다.

Browser Support

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

Source

미디어 업데이트

10월의 두 번째 Firefox 출시에는 모두 Baseline Newly available에 포함되는 미디어 기능이 있습니다. Firefox 132에는 HTMLVideoElementrequestVideoFrameCallback()cancelVideoFrameCallback() 메서드가 포함되어 있습니다.

Browser Support

  • Chrome: 83.
  • Edge: 83.
  • Firefox: 132.
  • Safari: 15.4.

Source

MediaStreamTrack.getCapabilities() 메서드도 포함되어 있습니다.

Browser Support

  • Chrome: 59.
  • Edge: 12.
  • Firefox: 132.
  • Safari: 11.

Source

fetchPriority

Fetch Priority API는 브라우저에 대한 리소스의 상대적 우선순위를 나타냅니다. Firefox 132부터 지원되므로 이제 이 유용한 API를 기준으로 새로 사용할 수 있습니다.

Fetch Priority API로 리소스 로드 최적화에서 자세히 알아보세요.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 132.
  • Safari: 17.2.

Source

전체 box-decoration-break 지원

Chrome 130에는 접두사가 없는 CSS box-decoration-break 속성의 전체 지원이 포함되어 있습니다. 여기에는 블록 및 인라인 단편화의 clone 값이 포함됩니다.

Browser Support

  • Chrome: 130.
  • Edge: 130.
  • Firefox: 32.
  • Safari: 7.

Source

Chrome 130의 box-decoration-break 속성에서 이 속성에 관해 자세히 알아보세요.

중첩 선언 규칙

Chrome 130 및 Firefox 132는 CSS 중첩 선언을 지원합니다. 즉, CSSNestedDeclarations로 CSS 중첩이 개선됨에 설명된 대로 중첩된 CSS가 올바르게 파싱됩니다.

Browser Support

  • Chrome: 130.
  • Edge: 130.
  • Firefox: 132.
  • Safari: 18.2.

Source

웹 직렬 connected 속성 및 RFCOMM 연결 이벤트

Chrome 130에서는 불리언 SerialPort.connected 속성을 추가합니다. 이 속성은 직렬 포트가 논리적으로 연결된 경우 true를 반환합니다.

이 기능을 사용하면 블루투스 RFCOMM 직렬 포트가 포트가 논리적으로 연결되거나 연결 해제될 때 이러한 이벤트를 전달합니다.

이 기능은 애플리케이션이 포트를 열지 않고도 블루투스 RFCOMM 직렬 포트를 사용할 수 있는 시점을 감지할 수 있도록 지원하기 위한 것입니다.

웹 직렬의 블루투스 RFCOMM 업데이트에서 자세히 알아보세요.

Browser Support

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

Source

Safari의 접근성 수정사항

Safari 18.1은 Safari 18 직후에 출시되었으며, 특히 display: contents와 관련된 여러 접근성 문제를 수정했습니다.

베타 브라우저 출시

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

Firefox 133은 WebCodecs APIImageDecoder, ImageTrackList, ImageTrack 인터페이스를 지원하여 기본 스레드와 작업자 스레드에서 이미지 디코딩을 지원합니다.

Firefox 133은 WorkerNavigator.permissions도 지원합니다.

Chrome 131에는 ::selection::highlight와 같은 CSS 강조 표시 의사 클래스가 요소 체인이 아닌 의사 강조 표시 체인을 통해 속성을 상속하는 CSS 강조 표시 상속이 포함되어 있습니다. 그 결과 강조 표시의 속성 상속에 대한 더 직관적인 모델이 생성됩니다.

또한 Chrome 131에서는 CSS 페이지 매김 미디어 @page 여백 상자를 지원하므로 웹에서 인쇄할 때 맞춤 헤더와 바닥글을 제공할 수 있습니다.