2022년 6월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
6월에 Chrome 103 및 Firefox 102가 안정화되었습니다.
스트림 및 읽을 수 있는 바이트 스트림 변환
Firefox 102는 변환 스트림을 지원합니다. 이렇게 하면 ReadableStream에서 WritableStream로 파이핑하여 청크에서 변환을 실행할 수 있습니다. 이 기능을 3가지 엔진 모두에서 사용할 수 있게 되어 매우 기쁘게 생각합니다. 스트림에 대해 알아보기에 매우 좋은 시기입니다.
이제 Firefox 102에서 읽을 수 있는 바이트 스트림도 지원되어 ReadableStreamBYOBReader 인터페이스를 통해 BYOB (자체 버퍼 사용) 판독기를 사용할 수 있습니다. 개발자가 제공하는 데이터를 스트리밍하는 데 사용할 수 있습니다.
로컬에 설치된 글꼴에 액세스
Chrome 103에는 사용자가 로컬에 설치된 글꼴에 액세스할 수 있게 해주는 Local Font Access API가 포함되어 있습니다. 기기에 설치된 글꼴에 대한 액세스를 요청한 후 window.queryLocalFonts()를 호출하여 설치된 글꼴의 배열을 가져옵니다.
const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
update 미디어 기능
Firefox 102에는 update 미디어 기능이 포함되어 있습니다. 출력 장치가 렌더링된 후 콘텐츠의 모양을 수정할 수 있는지 여부를 쿼리하는 데 사용됩니다.
새로운 HTTP 상태 코드—103가지 조기 힌트
Chrome 103에서는 새로운 상태 코드인 HTTP 103 Early Hints가 추가됩니다. 서버 또는 CDN이 페이지를 로드하는 데 특정 하위 리소스 집합이 필요하다는 것을 알고 있는 경우, 서버에 출처에 미리 연결하거나, 리소스가 들어올 때 리소스를 미리 로드하도록 알려줄 수 있습니다. 이 기능을 활용하려면 서버 또는 CDN을 업데이트해야 합니다. 사전 힌트에 관해 자세히 알아보세요.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다.
4월의 새로운 베타는 Chrome 104, Firefox 103, Safari 16이었습니다.
미디어 범위 지정 쿼리를 위한 새로운 문법
Chrome 104에는 미디어 쿼리 수준 4 사양의 범위 미디어 쿼리에 관한 새로운 구문이 포함되어 있습니다. 예를 들어 이전에 다음과 같이 작성한 미디어 쿼리를 살펴보겠습니다.
@media (min-width: 400px) { … }
이제 다음과 같이 작성할 수 있습니다.
@media (width >= 400px) { … }
지역 캡처 API
데스크톱의 Chrome 104에는 Region Capture API도 포함되어 있습니다. 이렇게 하면 공유하기 전에 캡처된 동영상에서 콘텐츠를 자르고 삭제할 수 있습니다.
Safari 16은 브라우저에 몇 가지 주요 기능을 제공합니다.
Safari 16은 Safari팀의 또 다른 흥미로운 릴리스가 될 것으로 보입니다. 이 버전에는 Interop 2022에 포함된 여러 기능이 추가되었으며 올해 중반기에 많은 기능이 출시될 예정입니다. 여기에서는 제가 가장 좋아하는 기능 몇 가지를 소개하고자 합니다. 자세한 내용은 출시 노트를 확인하세요.
여러 개발자와 함께 크기 쿼리가 컨테이너 쿼리를 지원하는 것을 보게 되어 매우 기쁩니다. 이 기능은 현재 Chrome에서 플래그로 지원되고 있습니다.
또한 Safari 16에서는 grid-template-columns 및 grid-template-rows의 subgrid 값을 지원합니다. 이 기능은 이미 Firefox에 있고 Chrome에서 개발 중이며 중첩된 그리드에 그리드 트랙 크기 조정을 상속할 수 있습니다.
또한 그리드 레이아웃의 경우 그리드 트랙에 애니메이션을 적용할 수 있습니다.
브라우저 지원
- 107
- 107
- 66
- 16
날짜, 시간, 색상, 파일에 대해 브라우저 선택 도구를 표준 방식으로 표시할 수 있는 showPicker() 메서드가 포함되어 있습니다. 자세한 내용은 날짜, 시간, 색상, 파일에 대한 브라우저 선택 도구 표시에서 확인할 수 있습니다.
display: contents의 접근성 문제도 해결되었으므로 접근성 트리에서 요소를 삭제하는 위험 없이 이 유용한 기능을 안전하게 사용할 수 있습니다.
이 베타 기능은 곧 안정적인 브라우저에서 지원될 예정입니다.