Nizbridge

UI Developer
Navigation
 » Blog
 » About Me
 » Projects
 » Github
 » Bookmark
 » XML Feed

사파리 16.0 업데이트 살펴보기

14 Sep 2022 » all, html-css

새로운 Internet Explorer 로 각광(?) 받고 있는 사파리가 16 버전으로 업데이트 되었습니다.

주요 기능

  1. AVIF 이미지 포맷 지원
    1. GIF, JPG, PNG등을 대체하기 위한 이미지 포맷으로 크롬과 파이어폭스는 이미 2020년부터 지원하기 시작했으며, 사파리도 이번 업데이트를 통해서 지원하고 있습니다.
    2. 아직 Edge 브라우저에서 지원되지 않습니다.
  2. resolution 미디어쿼리 지원
    1. 해상도를 기반으로한 스타일을 적용할 수 있습니다.
    2. @media (min-resolutino:326dpi) { ... }
  3. text-align-last 속성 지원
    1. 이 속성은 단락의 마지막줄에 대한 정렬을 설정할 수 있습니다.
    2. text-align-last:right
  4. :has() 클래스로 이제 :target 선택자를 사용할 수 있습니다.
    1. :has(:target) 과 같은 형태로 사용 가능합니다.
    2. 아직 Firefox 브라우저에서는 지원되지 않습니다.
  5. container 쿼리 지원
    1. 컨테이너 미디어쿼리를 사용하면 뷰포트가 아닌 컨테이너의 크기를 기반으로 한 스타일 조정이 가능합니다.
    2. 아직 Firefox 브라우저에서는 지원되지 않습니다. 크롬은 105버전부터 지원됩니다.
  6. subgrid 지원
    1. 그리드 안에 서브그리드를 생성함으로써 정렬을 보다 쉽게 할 수 있습니다.
    2. 현재 사파리, 파이어폭스에서만 지원하며 크롬도 곧 지원 예정입니다.
  7. Motion Path 지원
    1. offset-path 속성을 사용하여 애니메이션 경로를 정의할 수 있습니다.
  8. overscroll-behavior 속성 지원
    1. 사파리에서도 스크롤 체인을 지원합니다.
    2. 스크롤 체인은 스크롤링 컨텐츠가 있는 영역에서 스크롤이 경계에 도달하면 기본페이지가 스크롤되는 것을 의미합니다.

보다 자세한 내용은 아래 링크에서 확인 가능합니다.

https://webkit.org/blog/13152/webkit-features-in-safari-16-0/

Related Posts