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

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

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

집합은 모든 프로그래밍 언어에서 필수적인 데이터 구조입니다. 이제 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 사용자 지정 속성의 대체 값을 설정합니다.