2024년 2월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2024년 2월에 Firefox 123 및 Chrome 122가 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.
선언적 Shadow DOM
Firefox 123은 <template> 요소의 shadowrootmode 속성을 지원하므로 선언적 Shadow DOM을 지원합니다.
이 기능은 이제 모든 주요 브라우저에서 상호 운용이 가능하므로 새로 사용할 수 있는 기준에 조인합니다.
브라우저 지원
- 111
- 111
- 123
- 16.4
103 사전 힌트: 미리 로드
Firefox 123에는 리소스를 미리 로드하기 위한 103 Early Hints 상태 코드가 포함되어 있습니다.
브라우저 지원
- 103
- 103
- 123
- x
CSS ::backdrop 상속 변경사항
::backdrop CSS 의사 요소는 표시 영역의 크기인 상자로, 상단 레이어에 표시되는 요소 바로 아래에 렌더링됩니다.
::backdrop의 원래 사양에서는 어떤 요소에서도 상속받지 않고 상속되지 않는다고 명시했습니다. 즉, ::backdrop는 :root에 선언된 맞춤 속성에 액세스할 수 없었습니다.
::backdrop가 원래 요소에서 속성을 상속할 수 있도록 사양이 변경되었습니다. 이 변경사항은 Chrome 122에 구현됩니다.
::backdrop 변경사항에 관해 자세히 알아보세요.
Storage Buckets API
Chrome 122에는 Storage Buckets API가 포함되어 있습니다. 사이트에서 이 API를 사용하면 기기 내 데이터를 버킷으로 정리할 수 있습니다. 그러면 그룹 데이터를 다른 버킷에 보관된 데이터와 별개로 제거할 수 있습니다.
Storage Buckets API 문서에서 자세히 알아보세요.
브라우저 지원
- 122
- 122
- x
- x
Async Clipboard API: 확인되지 않은 HTML 읽기
Chrome 122 베타에는 Async Clipboard API의 read() 메서드에 정리되지 않은 HTML 형식을 검색할 수 있는 unsanitized 옵션이 포함되어 있습니다.
JavaScript Set 메서드
Chrome 122는 다음 Set 메서드를 구현합니다.
이러한 메서드는 Safari 버전 17부터 이미 구현되었으며 Firefox Nightly에 있습니다.
베타 브라우저 출시
베타 브라우저 버전을 사용하면 브라우저의 다음 안정화 버전에서 출시될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하는 좋은 기회입니다. 새로운 베타는 이번 달에 Firefox 124와 Chrome 123이 출시되었으며 Safari 17.4가 진행 중입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Chrome 123에는 몇 가지 새로운 CSS 기능이 포함되어 있습니다. light-dark() 색 함수를 사용하면 색 구성표를 사용자 환경설정에 더 쉽게 조정할 수 있습니다. field-sizing 속성을 사용하면 텍스트 입력란이 자동으로 증가할 수 있습니다. PIP 모드로 표시되는 앱을 테스트하는 새로운 미디어 기능이 있습니다.
text-spacing-trim 속성은 중국어, 일본어, 한국어 (CJK) 구두점 문자에 커닝을 적용하여 과도한 공백을 조정합니다.
자세한 내용은 CSS의 새로운 네 가지 기능 소개를 참조하세요.
Chrome 123 및 Safari 17.4 베타에서 블록 및 테이블 레이아웃에서 align-content를 지원합니다. align-content 지원 변경사항을 읽어보세요. 그리드 또는 Flex 레이아웃 외부의 속성을 사용할 수 있다면 사이트를 테스트하세요. 이전에는 블록 레이아웃에서 작동하지 않았던 정렬을 유발하기 시작합니다.
Firefox 124는 CSS content-visibility 속성을 지원합니다.
이 속성은 요소가 콘텐츠를 렌더링할지 여부를 제어하므로 브라우저가 필요할 때까지 콘텐츠 렌더링을 생략할 수 있습니다.