2022년 7월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
7월에 Firefox 103 및 Safari 15.6이 안정화되었으며, 이에 따라 몇 가지 훌륭한 CSS 기능이 상호 운용될 수 있게 되었습니다.
backdrop-filter 속성
Firefox 103에는 요소 뒤 영역에 블러와 같은 효과를 적용하는 데 사용되는 backdrop-filter 속성이 포함되어 있습니다. Safari에서는 -webkit 접두사가 필요하지만 Firefox에서 이 값을 사용하면 세 가지 엔진 모두에서 사용할 수 있습니다.
scroll-snap-stop 속성
Firefox는 scroll-snap-stop 속성도 구현했습니다. 이 속성을 사용하면 스크롤 요소가 가능한 맞추기 위치 (기본값 normal 사용)를 통과할지 아니면 첫 번째 위치에 맞춰야 하는지 (값 always) 제어할 수 있습니다. scroll-snap-stop 속성은 이제 세 가지 브라우저 엔진 모두에 있습니다.
Safari 15.6은 주로 문제 해결에 중점을 둔 버전이지만 :modal 유사 클래스를 사용하는 새로운 CSS 기능이 하나 도입되었습니다. 이 기능은 Firefox 103에서도 제공되었습니다. :modal 유사 클래스는 요소를 닫을 때까지 해당 요소 외부의 모든 항목과 상호작용할 수 없는 경우 요소를 선택합니다. 예를 들어 showModal()로 열린 dialog 요소가 있습니다.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다.
출시일이 월 바로 아래인 관계로 6월에는 Firefox 104만 새롭게 베타 버전으로 제공됩니다.
Firefox 104에는 웹 작업자의 CSS Font Loading API와 CSS animation-composition 속성을 포함합니다. 이 속성은 여러 애니메이션이 동시에 동일한 속성에 영향을 미칠 때 사용되는 합성 작업을 정의합니다.
지난달에 소개한 Safari 16 베타도 아직 진행 중입니다.
이 베타 기능은 곧 안정적인 브라우저에서 지원될 예정입니다.