6월의 웹 플랫폼 새로운 기능

2022년 6월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.

Rachel Andrew

안정적인 브라우저 출시

6월에 Chrome 103 및 Firefox 102가 안정화되었습니다.

스트림 및 읽을 수 있는 바이트 스트림 변환

Firefox 102에는 변환 스트림 지원이 포함되어 있습니다. 이렇게 하면 ReadableStream에서 WritableStream로 파이핑하여 청크에서 변환을 실행할 수 있습니다. 이제 세 가지 엔진 모두에서 이 기능을 사용할 수 있게 되었습니다. 스트림에 대해 알아볼 좋은 기회입니다.

브라우저 지원

  • Chrome: 67
  • Edge: 79
  • Firefox: 102.
  • Safari: 14.1

소스

이제 Firefox 102에서도 읽을 수 있는 바이트 스트림이 지원되므로 ReadableStreamBYOBReader 인터페이스를 사용하여 BYOB (버퍼 직접 가져오기) 리더를 사용할 수 있습니다. 개발자가 제공한 데이터를 스트리밍하는 데 사용할 수 있습니다.

브라우저 지원

  • Chrome: 89
  • Edge: 89.
  • Firefox: 102.
  • Safari: 지원되지 않음

소스

로컬에 설치된 글꼴에 액세스

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 미디어 기능이 포함되어 있습니다. 출력 장치가 콘텐츠가 렌더링된 후 콘텐츠의 모양을 수정할 수 있는지 쿼리하는 데 사용됩니다.

브라우저 지원

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17

소스

새로운 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) { … }

브라우저 지원

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

소스

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에서 개발 중이며, 그리드 트랙 크기를 중첩된 그리드에서 상속할 수 있습니다.

브라우저 지원

  • Chrome: 117
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16

소스

그리드 레이아웃의 경우 그리드 트랙에 애니메이션을 적용할 수도 있습니다.

브라우저 지원

  • Chrome: 107
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16

날짜, 시간, 색상, 파일의 브라우저 선택 도구를 표시하는 표준적인 방법을 지원하는 showPicker() 메서드가 포함되어 있습니다. 자세한 내용은 날짜, 시간, 색상, 파일의 브라우저 선택 도구 표시를 참고하세요.

브라우저 지원

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16

소스

display: contents의 접근성 문제도 해결되어 접근성 트리에서 요소가 삭제될 위험 없이 이 유용한 기능을 안전하게 사용할 수 있습니다.

이 베타 기능은 곧 안정화 브라우저에 제공될 예정입니다.

웹 시리즈 초보자용의 일부