2024년 6월에 안정화 및 베타 웹브라우저에 출시된 몇 가지 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2024년 6월에 Firefox 127 및 Chrome 126이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.
JavaScript Set 메서드
세트는 모든 프로그래밍 언어에서 필수적인 데이터 구조입니다. 이제 자바스크립트의 내장 메서드를 사용하여 집합 작업을 수행할 수 있습니다. 다음 set 메서드를 이제 Firefox 127에서 사용할 수 있으며, 이러한 set 메서드는 새롭게 사용 가능한 기준의 일부가 되었습니다.
intersection()union()difference()symmetricDifference()isSubsetOf()isSupersetOf()isDisjointFrom()
자세한 내용은 JavaScript Set 메서드가 이제 기준의 일부가 됨을 참고하세요.
Async Clipboard API
이제 Clipboard API가 Firefox 127부터 완벽하게 지원됩니다. 이제 Firefox에서 클립보드 인터페이스의 read() 및 write() 메서드와 함께 ClipboardItem 인터페이스를 지원합니다. 클립보드 액세스 차단 해제에서 Clipboard API에 관해 자세히 알아보세요.
CSS 그라데이션의 색상 보간 유형
CSS 그라데이션은 <color-interpolation-method>를 허용하도록 지정되었으며 이제 Firefox에서 지원되므로 모든 주요 엔진에서 상호 운용이 가능합니다.
이제 hsl 색상 시스템과 더 긴 보간 유형을 사용하여 linear-gradient()를 지정할 수 있습니다.
.longer {
background: linear-gradient(90deg in hsl longer hue, red, blue);
}
브라우저 지원
- 111
- 111
- 127
- 16.2
문서 간 뷰 전환
이전에는 View Transitions API를 사용하려면 웹사이트를 SPA로 재설계해야 했습니다. 더 이상 그렇지 않습니다. Chrome 126부터 이제 동일한 출처 탐색에 뷰 전환이 기본적으로 사용 설정됩니다. 서로 다른 동일한 원본 문서 간에 뷰 전환을 만들 수 있습니다.
문서 간 보기 전환을 사용하려면 양측이 모두 선택해야 합니다.
이렇게 하려면 @view-transition at-rule을 사용하고 탐색 설명자를 auto로 설정합니다.
@view-transition {
navigation: auto;
}
문서 간 뷰 전환 문서에서 자세히 알아보세요.
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 맞춤 속성의 대체 값을 설정합니다.