2022년 6월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.
안정적인 브라우저 출시
6월에 Chrome 103 및 Firefox 102가 안정화되었습니다.
스트림 및 읽을 수 있는 바이트 스트림 변환
Firefox 102에는 변환 스트림 지원이 포함되어 있습니다. 이렇게 하면 ReadableStream
에서 WritableStream
로 파이핑하여 청크에서 변환을 실행할 수 있습니다. 이제 세 가지 엔진 모두에서 이 기능을 사용할 수 있게 되었습니다. 스트림에 대해 알아볼 좋은 기회입니다.
이제 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) { … }
Region Capture 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에서 개발 중이며, 그리드 트랙 크기를 중첩된 그리드에서 상속할 수 있습니다.
그리드 레이아웃의 경우 그리드 트랙에 애니메이션을 적용할 수도 있습니다.
브라우저 지원
날짜, 시간, 색상, 파일의 브라우저 선택 도구를 표시하는 표준적인 방법을 지원하는 showPicker()
메서드가 포함되어 있습니다. 자세한 내용은 날짜, 시간, 색상, 파일의 브라우저 선택 도구 표시를 참고하세요.
display: contents
의 접근성 문제도 해결되어 접근성 트리에서 요소가 삭제될 위험 없이 이 유용한 기능을 안전하게 사용할 수 있습니다.
이 베타 기능은 곧 안정화 브라우저에 제공될 예정입니다.
웹 시리즈 초보자의 일부