2023년 3월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2023년 3월에 Firefox 111, Chrome 111, Safari 16.4가 안정화되었습니다. 이것이 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.
전역 HTML 속성
Firefox 111에는 몇 가지 유용한 전역 HTML 속성 지원이 추가되었습니다. autocapitalize 속성은 사용자가 가상 키보드에서 입력할 때 텍스트를 자동으로 대문자로 표시할지 여부를 제어합니다.
translate 속성은 페이지가 현지화될 때 요소를 번역해야 하는지 여부를 나타냅니다.
Origin Private File System (OPFS)
Firefox는 File System Access API를 사용할 때 Origin Private File System (OPFS)에 대한 지원을 추가합니다. OPFS에 대해 자세히 알아보기
View Transitions API
Chrome 111에서는 뷰 스냅샷을 생성하고 상태 간에 겹치지 않고 DOM을 변경할 수 있도록 하여 단일 페이지 앱 (SPA)에서 세련된 전환을 더 간단하게 만들 수 있도록 View Transitions API를 추가합니다.
자세한 내용은 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 출시 노트에서 전체 기능 목록을 확인하세요.
이 버전에서는 :user-invalid, :user-valid, :dir(), :modal, :fullscreen 등 다양한 CSS 의사 클래스가 추가로 지원됩니다.
미디어 쿼리의 새 범위 구문
이번 Safari 릴리스에서는 미디어 쿼리에 대한 훨씬 더 세련되고 유용한 범위 구문이 세 엔진 모두에서 상호 운용될 수 있게 되었습니다. Chrome에 구문이 제공되었을 때 게시된 이 게시물에서 이러한 구문의 예를 확인하세요.
CSS 속성 및 값
Safari 16.4에서는 @property 지원을 추가하여 스타일시트에서 직접 CSS 맞춤 속성을 등록할 수 있습니다. 자세한 내용은 @property: CSS 변수에 초능력 제공하기를 참고하세요.
CSS API 지원
CSS Typed 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 속성 지원이 추가되어 모든 엔진에서 이 유용한 속성을 사용할 수 있습니다. inert에 관한 자세한 내용은 inert 소개를 참고하세요. Firefox에서 linear() 이징 함수도 지원됩니다.
Chrome 112 및 Safari 16.5에는 모두 많은 개발자가 기대하는 기능인 CSS 중첩에 대한 지원이 추가됩니다.
Chrome 112에는 animation-composition 지원도 포함됩니다. 이 속성의 작동 방식은 여러 애니메이션 효과를 애니메이션 컴포지션으로 합성해야 하는 방식 지정에서 알아보세요.
예를 들어 Puppeteer에서 Chrome의 헤드리스 모드를 사용하면 112에서 완전히 새로운 헤드리스 모드를 제공합니다. 자세한 내용은 Chrome의 헤드리스 모드 업그레이드를 참고하세요.