2024년 9월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.
안정적인 브라우저 출시
2024년 9월에 Firefox 130, Safari 18, Chrome 129가 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.
<details>
의 name
속성이 있는 전용 아코디언
Firefox 130은 <details>
요소의 name
속성을 지원합니다. <details>
요소를 그룹화하며, 한 번에 그룹 내 요소를 하나만 열 수 있습니다. 이렇게 하면 JavaScript를 사용하지 않고도 전용 아코디언을 만들 수 있습니다.
브라우저 지원
자동 모드 및 기타 기능
Chrome 129에서는 CSS interpolate-size
속성과 calc-size()
함수를 추가합니다.
CSS interpolate-size
속성을 사용하면 페이지에서 auto
, min-content
, fit-content
와 같은 CSS 고유 크기 조정 키워드의 애니메이션과 전환을 선택할 수 있습니다(해당 키워드에 애니메이션을 적용할 수 있는 경우).
CSS calc-size()
함수는 calc()
와 유사한 CSS 함수이지만 지원되는 크기 조정 키워드에 대한 작업도 지원합니다.
지원되는 크기 조정 키워드는 auto
, min-content
, max-content
, fit-content
입니다.
CSS의 height: auto; 및 기타 고유 크기 키워드에 애니메이션 적용에서 자세히 알아보세요.
JavaScript에서 기간 형식 지정
또한 Chrome 129에서는 Intl.DurationFormat
가 있어 여러 언어를 지원하는 기간 형식(예: '1시간 40분 30초') 방법을 제공합니다.
웹 코덱 API
이제 Web Codecs API가 Firefox 130의 데스크톱에서 지원되므로 웹 개발자는 동영상 스트림의 개별 프레임과 오디오 청크에 대한 낮은 수준의 액세스 권한을 가질 수 있습니다. 새로운 인터페이스에는 VideoEncoder
, VideoDecoder
, EncodedVideoChunk
, VideoFrame
, VideoColorSpace
가 포함됩니다. 이 API는 아직 Firefox Android에서 지원되지 않으므로 Baseline을 새로 사용할 수 있는 것은 아닙니다. 하지만 Android용 Firefox Nightly는 지원됩니다.
맞춤 속성용 CSS 스타일 쿼리
Safari 18에서는 CSS 스타일 쿼리 등 여러 가지 새로운 기능을 지원합니다. 스타일 쿼리를 사용하면 재사용 가능한 스타일을 만들고 그룹으로 적용할 수 있습니다. 예를 들어 여러 변형이 있는 재사용 가능한 구성요소가 있는 경우
CSS 스타일 쿼리에 대해 자세히 알아보세요.
동일한 문서 보기 전환
Safari 18은 SPA의 동일한 문서 뷰 전환도 지원하므로 앱의 여러 상태 간에 시각적 전환을 만들 수 있습니다.
동일 문서 뷰 전환 자세히 알아보기
베타 브라우저 출시
베타 브라우저 버전에서는 다음 안정화 버전의 브라우저에 포함될 내용을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능이나 삭제를 테스트해 보세요. 새로운 베타는 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은 기존 기능의 버그 수정사항이 포함된 버전입니다.