1월 웹 플랫폼 신규 출시

2024년 1월에 안정적인 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.

레이첼 앤드류

안정적인 브라우저 버전

2024년 1월에 Firefox 122, Chrome 121, Safari 17.3이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

<select> 효과의 <hr>

Firefox 122에서는 <hr> 요소를 <select> 요소의 허용되는 하위 요소로 추가합니다. 이렇게 하면 다양한 옵션이 있는 선택 목록의 가독성을 높이는 데 도움이 됩니다. 이제 모든 기본 브라우저 엔진에서 이 기능을 지원합니다. 그러나 현재 <hr>를 접근성 트리에 노출하는 브라우저가 없습니다.

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가 있습니다.