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

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

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

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

브라우저 지원

  • Chrome: 122
  • Edge: 122.
  • Firefox: 131.
  • Safari: 지원되지 않음

소스

텍스트 프래그먼트

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

브라우저 지원

  • Chrome: 89
  • Edge: 89.
  • Firefox: 131.
  • Safari Technology Preview: 지원됨

소스

Cookies Having Independent Partitioned State(CHIPS)

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

브라우저 지원

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 131.
  • Safari: 지원되지 않음

소스

미디어 업데이트

10월에 출시되는 두 번째 Firefox 버전에는 Newly 사용 가능한 기준과 결합된 일련의 미디어 기능이 포함되어 있습니다. Firefox 132에는 HTMLVideoElementrequestVideoFrameCallback()cancelVideoFrameCallback() 메서드가 포함되어 있습니다.

브라우저 지원

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

소스

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

브라우저 지원

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

소스

fetchPriority

Fetch Priority API는 브라우저에 대한 리소스의 상대적 우선순위를 나타냅니다. Firefox 132부터 지원됩니다. 즉, 이 유용한 API는 이제 Baseline Newly API입니다.

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

브라우저 지원

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

소스

box-decoration-break 완전 지원

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

브라우저 지원

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

소스

이 속성에 관한 자세한 내용은 Chrome 130의box-decoration-break 속성을 참고하세요.

중첩 선언 규칙

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

브라우저 지원

  • Chrome: 130
  • Edge: 130.
  • Firefox: 132.
  • Safari: 지원되지 않음

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

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

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

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

웹 일련번호의 블루투스 RFCOMM 업데이트에서 자세히 알아보세요.

브라우저 지원

  • Chrome: 130
  • Edge: 지원되지 않음
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

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 여백 상자를 지원하므로 웹에서 인쇄할 때 맞춤 헤더와 바닥글을 제공할 수 있습니다.