8월의 웹 플랫폼 신규 출시

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

안정적인 브라우저 출시

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

루비 형식 업데이트

HTML <ruby> 요소는 특히 동아시아 언어의 텍스트 표현을 개선하는 데 유용한 도구입니다. 이 요소를 사용하면 기본 텍스트 위 또는 옆에 음성 주석이나 기타 보조 정보를 표시할 수 있습니다. Chrome 128부터 루비 주석은 줄바꿈이 가능하며 ruby-align CSS 속성으로 루비 텍스트의 스타일을 지정할 수 있습니다.

줄바꿈 <ruby> 및 CSS ruby-align 속성에서 자세히 알아보세요.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties: 멀티펜 잉크

Chrome 128에서 제공되는 이 변경사항은 화면과 상호작용하는 개별 펜 (포인터)을 식별하여 디지털화 도구와 상호작용하는 각 기기의 특정 색상 또는 펜 모양을 설정하는 안전하고 안정적인 방법을 제공합니다. 새 속성 deviceProperties를 포함하도록 PointerEvent 인터페이스를 확장합니다. 여기에는 uniqueId 속성이 포함되어 있습니다. 이 속성은 세션 지속형, 문서 격리형, 고유 식별자를 나타내며, 이 식별자를 안정적으로 사용하여 페이지와 상호작용하는 개별 펜을 식별할 수 있습니다.

Promise.try

또한 Chrome 128에서는 Promise.try를 사용하여 Promises로 오류를 더 쉽게 처리할 수 있습니다. 함수 f가 있는 패턴이 있습니다. 이 함수는 비동기일 수 있으며 프로미스를 반환할 수도 있고 반환하지 않을 수도 있습니다. Promise 시맨틱을 사용하여 두 경우 모두 오류를 처리하려면 함수를 Promise로 래핑합니다. 이는 일반적으로 new Promise(resolve => resolve(f()))를 사용하여 실행됩니다.

Promise.try는 동일한 작업을 더 간단하게 실행하는 방법입니다. 이를 통해 동기 및 비동기 예외 흐름을 모두 처리할 필요 없이 .catch 핸들러에서 모든 오류를 포착하는 Promise 체인을 시작할 수 있습니다.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

진입 효과 애니메이션

Firefox 129에는 진입 효과 애니메이션에 사용되는 두 가지 CSS 기능이 포함되어 있으며, 이제 이러한 기능이 기준으로 새로 제공됩니다.

@starting-style 규칙은 요소가 페이지에 렌더링되기 전에 요소의 초기 스타일을 정의합니다. display: none에서 애니메이션으로 표시되는 요소에는 애니메이션을 시작할 상태가 필요하므로 이 속성이 필요합니다.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

진입 효과에는 값 간에 보간할 수 없는 불연속 속성의 애니메이션도 필요합니다. 이제 전환 바로가기에서 transition-behavior: allow-discrete 또는 allow-discrete 값을 사용하여 이를 실행할 수 있습니다. 이제 Firefox 129에서도 지원됩니다.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

이제 기준에 포함됨: 진입 효과 애니메이션에서 자세히 알아보세요.

PerformanceResourceTiming에 추가

Firefox 129에서는 PerformanceResourceTiming 인터페이스의 contentTyperesponseStatus 속성을 추가합니다. 이는 가져온 리소스의 콘텐츠 유형과 리소스를 가져올 때 반환된 HTTP 응답 상태 코드를 각각 나타냅니다.

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

위치정보 toJSON() 메서드

Firefox 129에는 GeolocationCoordinates.toJSON()GeolocationPosition.toJSON()도 있습니다.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

이제 Firefox 129에서 WebDriver BiDi를 지원합니다. 즉, 자동화를 위해 Chrome 또는 Firefox와 함께 Puppeteer를 사용할 수 있습니다. Firefox, Chrome, Puppeteer에서 WebDriver BiDi 프로덕션 버전 지원Firefox의 공식 Puppeteer 지원 발표에서 자세히 알아보세요.

베타 브라우저 출시

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

Firefox 130은 <details> 요소를 그룹화하는 <details> 요소의 이름 속성을 지원합니다. 이 경우 한 번에 그룹 내의 요소 하나만 열 수 있습니다. 이렇게 하면 JavaScript를 사용하지 않고도 전용 아코디언을 만들 수 있습니다.

Chrome 129에서는 CSS interpolate-size 속성과 calc-size() 함수를 추가합니다.

CSS interpolate-size 속성을 사용하면 페이지에서 auto, min-content, fit-content와 같은 CSS 고유 크기 조정 키워드의 애니메이션과 전환을 선택할 수 있습니다(해당 키워드에 애니메이션을 적용할 수 있는 경우).

CSS calc-size() 함수는 calc()와 유사한 CSS 함수이지만, 지원되는 크기 조절 키워드 하나에 대한 작업도 지원합니다. 현재 지원되는 크기 조정 키워드는 auto, min-content, max-content, fit-content입니다.

Chrome 129에는 Intl.DurationFormat도 있습니다. Intl.DurationFormat는 여러 언어를 지원하는 '1시간 40분 30초'와 같은 시간 형식을 지정하는 메서드를 제공합니다.