9월의 웹 플랫폼 신규 출시

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

안정적인 브라우저 출시

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

<details>name 속성이 있는 전용 아코디언

Firefox 130은 <details> 요소의 name 속성을 지원합니다. <details> 요소를 그룹화하며, 한 번에 그룹 내 요소를 하나만 열 수 있습니다. 이렇게 하면 JavaScript를 사용하지 않고도 전용 아코디언을 만들 수 있습니다.

브라우저 지원

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

자동 모드 및 기타 기능

Chrome 129에서는 CSS interpolate-size 속성과 calc-size() 함수를 추가합니다.

CSS interpolate-size 속성을 사용하면 페이지에서 auto, min-content, fit-content와 같은 CSS 고유 크기 조정 키워드의 애니메이션과 전환을 선택할 수 있습니다(해당 키워드에 애니메이션을 적용할 수 있는 경우).

브라우저 지원

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

소스

CSS calc-size() 함수는 calc()와 유사한 CSS 함수이지만 지원되는 크기 조정 키워드에 대한 작업도 지원합니다. 지원되는 크기 조정 키워드는 auto, min-content, max-content, fit-content입니다.

브라우저 지원

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

소스

CSS의 height: auto; 및 기타 고유 크기 키워드에 애니메이션 적용에서 자세히 알아보세요.

JavaScript에서 기간 형식 지정

또한 Chrome 129에서는 Intl.DurationFormat가 있어 여러 언어를 지원하는 기간 형식(예: '1시간 40분 30초') 방법을 제공합니다.

브라우저 지원

  • Chrome: 129
  • Edge: 129
  • Firefox: 지원되지 않음
  • Safari: 16.4.

소스

웹 코덱 API

이제 Web Codecs API가 Firefox 130의 데스크톱에서 지원되므로 웹 개발자는 동영상 스트림의 개별 프레임과 오디오 청크에 대한 낮은 수준의 액세스 권한을 가질 수 있습니다. 새로운 인터페이스에는 VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame, VideoColorSpace가 포함됩니다. 이 API는 아직 Firefox Android에서 지원되지 않으므로 Baseline을 새로 사용할 수 있는 것은 아닙니다. 하지만 Android용 Firefox Nightly는 지원됩니다.

브라우저 지원

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130
  • Safari: 16.4.

소스

맞춤 속성용 CSS 스타일 쿼리

Safari 18에서는 CSS 스타일 쿼리 등 여러 가지 새로운 기능을 지원합니다. 스타일 쿼리를 사용하면 재사용 가능한 스타일을 만들고 그룹으로 적용할 수 있습니다. 예를 들어 여러 변형이 있는 재사용 가능한 구성요소가 있는 경우

브라우저 지원

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 지원되지 않음
  • Safari: 18

소스

CSS 스타일 쿼리에 대해 자세히 알아보세요.

동일한 문서 보기 전환

Safari 18은 SPA의 동일한 문서 뷰 전환도 지원하므로 앱의 여러 상태 간에 시각적 전환을 만들 수 있습니다.

브라우저 지원

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 지원되지 않음
  • Safari: 18

소스

동일 문서 뷰 전환 자세히 알아보기

베타 브라우저 출시

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

Firefox 131에는 새로운 JavaScript 반복자 도우미가 포함되어 있으며 이제 Cookies Having Independent Partitioned State(CHIPS)가 사용 설정됩니다.

Chrome 130에는 인라인 단편화(줄 레이아웃)와 블록 단편화(인쇄 및 멀티컬럼용으로 생성된 프래그먼트) 모두에 관한 box-decoration-break: clone 지원이 포함되어 있습니다. IndexedDB의 오류 보고도 개선되었으며 웹 시리얼 SerialPort 인터페이스의 새로운 connected 속성도 추가되었습니다.

Safari 18.1은 기존 기능의 버그 수정사항이 포함된 버전입니다.