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

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

Rachel Andrew

안정적인 브라우저 출시

2024년 6월에 Firefox 127 및 Chrome 126이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

JavaScript Set 메서드

집합은 모든 프로그래밍 언어에서 필수적인 데이터 구조입니다. 이제 JavaScript의 기본 제공 메서드를 사용하여 집합 연산을 실행할 수 있습니다. 이제 Firefox 127부터 다음 세트 메서드를 사용할 수 있으며, 새로 제공되는 기준의 일부가 되었습니다.

브라우저 지원

  • Chrome: 122
  • Edge: 122.
  • Firefox: 127.
  • Safari: 17

소스

자세한 내용은 이제 JavaScript Set 메서드가 기준점의 일부입니다를 참고하세요.

Async Clipboard API

이제 클립보드 API가 Firefox 127부터 완전히 지원됩니다. 이제 Firefox는 클립보드 인터페이스의 read() 및 write() 메서드와 함께 ClipboardItem 인터페이스를 지원합니다. 클립보드 액세스 차단 해제에서 클립보드 API에 대해 자세히 알아보세요.

브라우저 지원

  • Chrome: 76
  • Edge: 79
  • Firefox: 127.
  • Safari: 13.1.

소스

CSS 그라디언트의 색상 보간

CSS 그라데이션은 <color-interpolation-method>를 허용하도록 지정되며 이제 Firefox에서 지원되므로 모든 주요 엔진에서 상호 운용할 수 있습니다. 예를 들어 이제 hsl 색상 시스템과 더 긴 보간을 사용하여 linear-gradient()를 지정할 수 있습니다.

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

브라우저 지원

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 127.
  • Safari: 16.2.

교차 문서 뷰 전환

이전에는 View Transitions API를 사용하려면 웹사이트를 SPA로 재구성해야 했습니다. 더 이상 그렇지 않습니다. Chrome 126부터 동일 출처 탐색에 대해 뷰 전환이 기본적으로 사용 설정됩니다. 두 개의 서로 다른 동일 출처 문서 간에 뷰 전환을 만들 수 있습니다.

교차 문서 뷰 전환을 사용 설정하려면 양쪽 모두에서 선택해야 합니다. 이렇게 하려면 @view-transition at-rule을 사용하고 탐색 설명자를 auto로 설정합니다.

@view-transition {
  navigation: auto;
}

브라우저 지원

  • Chrome: 126
  • Edge: 126.
  • Firefox: 지원되지 않음
  • Safari 기술 미리보기: 지원됨

문서 간 뷰 전환 문서에서 자세히 알아보세요.

Gamepad API trigger-rumble 확장 프로그램

Chrome 126에서는 GamepadHapticActuator 인터페이스를 확장하여 호환되는 게임패드의 trigger-rumble 기능을 웹에 노출합니다. 이 확장 프로그램을 사용하면 Gamepad API를 활용하는 웹 애플리케이션에서 이 기능이 탑재된 게임패드 기기의 트리거를 진동시킬 수도 있습니다.

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 보세요. 새로운 베타는 Firefox 128, Chrome 127, Safari 18, Safari 17.6입니다. 이번 출시에서는 플랫폼에 여러 가지 멋진 기능이 추가되었습니다. 자세한 내용은 출시 노트를 참고하세요. 다음은 몇 가지 주요 내용입니다.

Safari 17.6은 기존 기능의 수정사항이 포함된 버전입니다. Safari 18에는 스타일 컨테이너 쿼리, 싱글페이지 앱용 뷰 전환 API, flexbox 속성의 safe 키워드 지원 등 다양한 새로운 기능이 있습니다.

Chrome 127에는 font-size-adjust CSS 속성, 생성된 콘텐츠의 대체 텍스트를 임의 개수의 요소로 지정하는 기능, MediaMetaData에서 개별 챕터 정보를 추가하는 기능이 포함되어 있습니다.

Firefox 128에는 CSS 속성과 값이 포함되어 있어 이 기능의 기준을 새로 사용할 수 있습니다. @property를 사용하여 type를 정의하고 CSS 사용자 지정 속성의 대체 값을 설정합니다.