2024년 1월에 안정적인 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2024년 1월에 Firefox 122, Chrome 121, Safari 17.3이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.
<select>
효과의 <hr>
Firefox 122에서는 <hr>
요소를 <select>
요소의 허용되는 하위 요소로 추가합니다.
이렇게 하면 다양한 옵션이 있는 선택 목록의 가독성을 높이는 데 도움이 됩니다.
이제 모든 기본 브라우저 엔진에서 이 기능을 지원합니다. 그러나 현재 <hr>
를 접근성 트리에 노출하는 브라우저가 없습니다.
브라우저 지원
- 119
- 119
- 122
- 17
HTMLSelectElement.showPicker
또한 Firefox의 <select>
요소의 경우 HTMLSelectElement
의 showPicker()
메서드가 있습니다. 이는 요소가 선택될 때 일반적으로 표시되는 것과 동일한 선택 도구이지만 버튼 누르기 또는 다른 사용자 상호작용으로 트리거될 수 있습니다.
최대 콘텐츠 렌더링 시간 (LCP) API
Firefox 122는 LCP API도 지원합니다. 이 성능 API는 사용자가 웹페이지와 상호작용하기 전에 가장 큰 이미지 또는 텍스트 페인트에 관한 타이밍 정보를 제공합니다. LCP 문서에서 LCP에 대해 자세히 알아보세요.
CSS 스크롤바 속성
Chrome 121에서는 스크롤바 속성 scrollbar-color
및 scrollbar-width
지원을 추가합니다. 자세한 내용은 스크롤바 스타일 지정 문서를 참고하세요.
CSS font-palette
애니메이션
font-palette
속성을 사용하면 특정 팔레트를 선택하여 색상 글꼴을 렌더링할 수 있습니다.
이 속성은 이제 애니메이션을 지원하므로, 팔레트 간 전환은 선택된 두 팔레트 간에 매끄럽게 전환됩니다.
ArrayBuffer
의 transfer()
및 transferToFixedLength()
메서드
Firefox에는 ArrayBuffer
의 JavaScript transfer()
및 transferToFixedLength()
메서드가 포함되어 있습니다.
transfer()
메서드는 현재 ArrayBuffer
와 동일한 바이트 콘텐츠로 새 ArrayBuffer
를 만든 다음 원래 ArrayBuffer
를 분리합니다. transferToFixedLength()
메서드는 동일한 방식으로 작동하지만, 고정된 크기의 ArrayBuffer
를 만듭니다.
Speculation Rules API 업데이트
사이트는 Speculation Rules API를 사용하여 Chrome에 사전 렌더링할 페이지를 프로그래매틱 방식으로 알려 페이지 탐색 시간을 줄여 더 나은 사용자 환경을 제공합니다.
Chrome 121에는 문서 규칙 지원이 포함되어 있습니다. 이는 브라우저가 페이지의 요소에서 추측 로드를 위한 URL 목록을 가져올 수 있는 추측 규칙 구문의 확장 프로그램입니다. 문서 규칙에는 이러한 링크를 사용할 수 있는 기준이 포함될 수 있습니다. 이 기능과 함께 새로운 'eagerness' 필드와 함께 마우스 오버 또는 마우스 다운 시 페이지의 링크를 자동으로 미리 가져오거나 사전 렌더링할 수 있습니다.
베타 브라우저 출시
베타 브라우저 버전을 사용하면 브라우저의 다음 안정화 버전에서 출시될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하는 좋은 기회입니다. 새로운 베타는 Firefox 123, Chrome 122, Safari 17.4입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Firefox 123 베타에는 선언적 Shadow DOM이 포함되어 있습니다.
또한 Firefox 123에서는 서버가 전체 응답을 준비하는 동안 페이지에 필요할 수 있는 리소스를 미리 로드하기 위한 103 Early Hints
HTTP 정보 응답 상태 코드가 지원됩니다.
Safari 17.4 베타에는 다양한 기능이 있습니다. CSS의 경우 블록 컨테이너 및 테이블 셀의 @scope
, align-content
, ::grammar-error
및 ::spelling-error
유사 요소 등 다양한 지원이 지원됩니다.
양식에서는 양식 컨트롤에서 세로 쓰기 모드, <input type="date">
의 showPicker()
메서드, iOS의 <select>
내 <hr>
를 지원합니다.
JavaScript에는 ArrayBuffer
의 detached()
, transfer()
, transferToFixedLength()
메서드를 지원하는 새로운 기능도 제공됩니다.
Chrome 122 베타에는 Async Clipboard API의 read()
메서드에 정리되지 않은 HTML 형식을 검색할 수 있는 unsanitized
옵션이 포함되어 있습니다.
JavaScript의 경우 새로운 반복기 도우미와 기본 제공 Set
클래스의 새 메서드가 있습니다.
또한 Chrome 122에는 메모리 압박이 심한 상황에서 영구 스토리지 제거를 보다 예측 가능하게 해주는 Storage Buckets API가 있습니다.