사파리 15.4 업데이트에 추가된 새로운 기능들 몇가지를 소개하려고 합니다.
img lazy 로딩
lazy 로딩은 이미지 등의 로딩 시간을 지연시킴으로써 전체적인 페이지 로드 시간을 개선할 때 사용할 수 있습니다.
<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
위의 예처럼 loading="lazy" 를 사용하여 lazy로딩을 적용할 수 있으며,
사용자가 해당 속성이 있는 요소에 접근하기 전까지는 이미지나 iframe을 로드하지 않습니다.
지원 : 최신 웹킷 브라우저
출처 : MDN
dialog, ::backdrop
<dialog> 를 통해서 정말 쉽고 간단하게 팝업을 구현할 수 있습니다.
<!-- html -->
<dialog open>
<p>여러분 안녕하세요!</p>
</dialog>
dialog 엘리먼트에 open을 추가함으로써 보여주고 감추는 기능 처리가 가능합니다.
하지만 일반적으로 다이얼로그가 나올때는 배경이 딤드처리가 되죠.
그 역할을 해주는게 바로 ::backdrop 입니다.
/* css */
dialog::backdrop {
background: rgba(0,0,0,.3);
}
::backdrop 을 하게되면 해당 요소는 맨 위 레이어로 취급되어 아래에 있는 항목들을 감출수가 있게 됩니다.
그래서 dialog 와 backdrop 을 같이 쓰게되면 정말 멋진 팝업을 쉽게 만들수 있게 됩니다.
지원 : 최신 웹킷 브라우저
출처 : MDN_dialog, MDN_backdrop
:has(), @layer
이 두 기능은 이전 글에서 설명한 적이 있습니다. 예전에는 사파리에서 지원이 안됐었는데, 이번 업데이트를 통해서 지원이 가능합니다. 자세한 내용은 아래 글을 참고해주세요~
https://nizbridge.github.io/all/html-css/2022/03/17/css2022_3.html
사파리 15.4버전에 대한 보다 자세한 내용은 아래 링크에서 확인 가능합니다.
https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/