2023년 3월에 안정화 및 베타 웹브라우저에 출시된 몇 가지 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2023년 3월, Firefox 111, Chrome 111, Safari 16.4가 안정화되었습니다. 이것이 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.
전체 HTML 속성
Firefox 111은 몇 가지 유용한 전역 HTML 속성에 대한 지원을 추가했습니다. autocapitalize 속성은 사용자가 가상 키보드에서 입력할 때 텍스트를 자동으로 대문자로 표시할 수 있는지를 제어합니다.
translate 속성은 페이지가 현지화될 때 요소를 번역해야 하는지 여부를 나타냅니다.
원본 비공개 파일 시스템 (OPFS)
Firefox는 File System Access API를 사용할 때 OPFS (Origin Private File System)에 대한 지원을 추가합니다. OPFS 자세히 알아보기
View Transitions API
Chrome 111에 View Transitions API가 추가되어 뷰 스냅샷을 생성하고 상태 간에 겹치지 않고 DOM을 변경하여 단일 페이지 앱 (SPA)에서 더 간단하게 세련된 전환을 만들 수 있습니다.
자세한 내용은 Chrome 111의 SPA 뷰 전환 출시 게시물을 참고하세요.
새로운 CSS 색상 공간 및 함수
Chrome 111에는 웹에서 색상을 사용할 수 있는 완전히 새로운 방법이 포함되어 있습니다. 이제 Chrome은 color() 및 color-mix() 함수와 함께 RGB 색 공간 밖의 색상에 액세스하는 색상 공간을 지원합니다. 고화질 CSS 색상 가이드 및 color-mix() 블로그 게시물에서 자세히 알아보세요.
Chrome 버전에는 이 새로운 색상 기능을 사용하는 데 도움이 되는 새로운 DevTools도 포함되어 있습니다.
:nth-child() 선택 항목에 대한 추가 제어
Chrome 111에는 선택기 목록을 :nth-child() 및 nth-last-child()에 전달하는 기능이 추가되었습니다. 이에 대해 자세히 알아보고 S 문법으로 :nth-child() 선택에 대한 제어 기능 강화 게시물에서 예를 참고하세요.
브라우저 지원
- 111
- 111
- 113
- 9
Media Session API의 이전 및 다음 슬라이드 지원
마지막으로 이 Chrome 111 추가사항 목록에는 미디어 세션 API("previousslide" 및 "nextslide")의 슬라이드 발표 작업이 있습니다.
브라우저 지원
- 111
- 111
- x
- x
Safari에서 가명 클래스 지원
Safari 16.4는 웹 플랫폼을 위한 놀라운 릴리스입니다. 이 문서에서 모든 추가사항을 다루지는 않으므로 Safari 16.4 출시 노트에서 전체 기능 목록을 확인하세요.
이 출시 버전에는 지원되는 CSS 의사 클래스(:user-invalid, :user-valid, :dir(), :modal, :fullscreen)가 많이 있습니다.
미디어 쿼리를 위한 새로운 범위 구문
이번 Safari 릴리스에서는 미디어 쿼리에 대한 더욱 정교하고 유용한 범위 구문을 세 가지 엔진 모두에서 상호 운용할 수 있습니다. 구문이 Chrome에 제공될 때 게시된 이 게시물에서 이러한 구문의 예를 확인하세요.
CSS 속성 및 값
Safari 16.4에는 @property 지원이 추가되어 스타일 시트에서 직접 CSS 맞춤 속성을 등록할 수 있습니다. 자세한 내용은 @property: CSS 변수에 기능 제공을 참고하세요.
CSS API 지원
CSS 유형 OM이 지원되면서 CSS를 위한 유용한 기능이 계속 추가되고 있습니다. 이 API는 CSS 값을 문자열이 아닌 유형이 있는 JavaScript 객체로 노출합니다. JavaScript에서 CSS를 더 쉽게 사용할 수 있으며 기존 메서드보다 성능이 우수합니다.
CSSStyleSheet()로 구성 가능한 스타일시트도 지원됩니다. 이렇게 하면 문서와 Shadow DOM 하위 트리 간에 스타일시트를 공유할 수 있습니다. 이 버전의 Safari에서는 구성 가능한 스타일시트가 이제 세 가지 엔진 모두에서 지원됩니다.
웹 푸시 및 Badging API
Safari는 이제 Badging API와 함께 웹 푸시를 지원합니다. 이는 앱 개발자에게 반가운 소식입니다. 특히 이번 버전에서는 모든 주요 엔진에서 푸시 알림이 지원됩니다.
지도 가져오기
상호 운용 가능한 상태에 기능을 더한 또 다른 추가 기능은 JavaScript 맵 가져오기가 추가된 것으로, ES 모듈을 훨씬 더 쉽게 가져올 수 있습니다.
브라우저 지원
- 89
- 89
- 108
- 16.4
베타 브라우저 출시
베타 브라우저 버전은 브라우저의 다음 안정화 버전에 적용될 내용을 미리 보여줍니다. 이 버전이 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제 기능을 테스트해 보는 것이 좋습니다. 새로운 베타는 Firefox 112, Safari 16.5 및 Chrome 112입니다. 이러한 릴리스는 플랫폼에 많은 훌륭한 기능을 제공합니다. 자세한 내용은 출시 노트에서 몇 가지 주요 사항을 확인하세요.
Firefox 112에는 inert 속성 지원이 추가되어 모든 엔진에서 이 유용한 속성을 사용할 수 있습니다. 비활성에 관한 자세한 내용은 비활성 소개를 참고하세요. Firefox는 linear() 이징 함수도 지원합니다.
Chrome 112 및 Safari 16.5 모두 많은 개발자가 기대하는 기능인 CSS 중첩 지원을 추가합니다.
Chrome 112에는 animation-composition 지원도 포함됩니다. 이 속성의 작동 방식은 여러 애니메이션 효과를 애니메이션 구성과 합성하는 방식 지정을 참고하세요.
Chrome의 헤드리스 모드(예: Puppeteer)를 사용하는 경우 112에서는 완전히 새로운 헤드리스 모드를 제공합니다. Chrome의 헤드리스 모드가 업그레이드됨에서 자세히 알아보세요.
웹을 처음 접하는 시리즈의 일부