2023년 7월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2023년 7월에 Firefox 115 및 Chrome 115가 안정화되었습니다. 이 게시물에서는 이러한 변화가 웹 플랫폼에 어떤 의미가 있는지 살펴봅니다.
CSS display 속성에 여러 값이 있음
Chrome 115에는 CSS display 속성에 여러 값이 포함되어 있습니다. 즉, display: flex는 display: block flex가 되고 display: block는 display: block flow가 됩니다. 단일 값은 기존 키워드로 유지되며 이제 이 값을 3가지 주요 엔진에서 사용할 수 있습니다.
브라우저 지원
- 115
- 115
- 70
- 15
스크롤 기반 애니메이션
또한 Chrome 115에는 웹 애니메이션 사양에 관한 ScrollTimeline 및 ViewTimeline 확장 프로그램이 있습니다. 이를 통해 CSS 및 자바스크립트를 통해 스크롤 기반 애니메이션을 사용할 수 있습니다.
개인 정보 보호 샌드박스 API
개인 정보 보호 샌드박스 관련성 및 측정 API가 Chrome 115에 출시되었습니다. 여기에는 Topics, Protected Audience, Attribution Reporting, Private Aggregation, Shared Storage, Fenced Frames API가 포함됩니다.
이러한 API에 관해 자세히 알아보려면 개인 정보 보호 샌드박스 데모를 확인하세요.
animation-composition 속성
Firefox 115는 CSS animation-composition 속성을 지원합니다. 세 가지 주요 엔진 모두에서 animation-composition를 지원합니다. 자세한 내용은 여러 애니메이션 효과를 애니메이션 컴포지션으로 합성해야 하는 방식 지정하기를 참고하세요.
배열 메서드
또한 Firefox 115와의 상호 운용성은 Array 및 TypedArray의 메서드 모음입니다. Array.toReversed(), Array.toSorted(), Array.toSpliced(), Array.with(), TypedArrays.toReversed(), TypedArrays.toSorted(), TypedArrays.with()는 부분적으로 복사한 요소가 있는 새 배열을 반환합니다.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다. 새로운 베타는 Firefox 116 및 Chrome 116입니다. Safari 17 및 Safari 16.6 베타가 아직 진행 중입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Firefox 116은 Android를 제외한 모든 플랫폼에서 Audio Output Devices API를 지원합니다. 이 API를 사용하면 웹 애플리케이션에서 브라우저나 기본 OS 기본값을 사용할 필요 없이 오디오 출력을 허용된 블루투스 헤드셋, 스피커폰 또는 기타 기기로 리디렉션할 수 있습니다.
Chrome 116에는 개발자가 지정한 경로를 따라 그래픽 객체를 애니메이션으로 만들 수 있는 CSS 모션 경로가 포함되어 있습니다. 이를 통해 translate() 함수에서 사용하는 표준 직사각형 좌표 대신 극좌표 (ray() 함수 사용)를 사용하여 배치하거나 정의된 경로를 따라 요소에 애니메이션을 적용하는 등 여러 가지 강력한 새 변환이 가능합니다. 이를 통해 복잡하고 아름다운 2D 공간 전환을 더 쉽게 정의할 수 있습니다. 경로는 circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray(), url()로 지정할 수 있습니다.
또한 Chrome 116에는 Document Picture-in-Picture API가 있습니다. 그러면 임의의 HTMLElement로 채워질 수 있는 상시 사용 설정 창이 사용 설정됩니다. HTMLVideoElement를 PIP 창에 배치할 수만 있도록 하는 기존 HTMLVideoElement API를 확장합니다.