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에는 Web Workers의 CSS Font Loading API 및 여러 애니메이션이 동일한 속성에 동시에 영향을 미칠 때 사용되는 합성 작업을 정의하는 CSS animation-composition 속성이 포함되어 있습니다.
지난달에 언급된 Safari 16 베타 버전도 아직 진행 중입니다.
이 베타 기능은 안정적인 브라우저에서 곧 제공될 예정입니다.
웹을 처음 접하는 시리즈의 일부