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

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

Rachel Andrew

게시일: 2025년 6월 30일

안정적인 브라우저 출시

2025년 6월에 Firefox 140 및 Chrome 138이 안정화되었습니다. 이 게시물에서는 이러한 출시와 함께 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

HTML을 직렬화할 때 속성에서 < 및 > 이스케이프 처리

Chrome 138 및 Firefox 140에는 HTML이 직렬화된 후 DOM에 다시 삽입되는 악용을 방지하기 위한 이 변경사항이 포함되어 있습니다. 이 변경사항은 Safari 26의 베타에도 포함되어 있습니다. 이 변경사항이 필요한 이유 자세히 알아보기

CSS Custom Highlight API

Firefox 140은 CSS Custom Highlight API를 구현합니다. 이렇게 하면 ::grammar-error와 같은 다른 강조 표시 CSS 가상 요소와 마찬가지로 문서에서 임의의 텍스트 범위를 정의하고 스타일을 지정할 수 있습니다.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 140.
  • Safari: 17.2.

Source

이 작업에는 JavaScript API 외에도 등록된 강조 표시에 스타일을 적용하는 데 사용되는 CSS ::highlight 가상 요소가 포함되어 있습니다. 이 기능은 이제 광범위하게 상호 운용 가능하지만 ::highlight 가상 요소와 관련된 몇 가지 문제로 인해 아직 기준은 아닙니다.

Cookie Store API는 쿠키를 관리하기 위한 비동기식 API이며 Firefox 140부터 지원됩니다. 이제 모든 브라우저에서 이 API를 기본적으로 지원하지만 아직 상호 운용되지 않는 부분에 관한 정보는 MDN의 호환성 차트를 확인하세요.

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 140.
  • Safari: 18.4.

Source

변형 이벤트 삭제

Interop 2025에는 올해의 삭제가 포함되어 있습니다. DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved와 같은 기존 변형 이벤트는 DOM 변경사항을 감시하고 DOM 변경사항이 발생하면 이벤트 리스너 콜백을 실행합니다. 이러한 변형 이벤트는 성능이 더 우수하고 오류가 적은 MutationObserver API를 대신하여 지원 중단되었습니다.

Firefox 140에서는 이러한 이벤트를 삭제하며, Chrome에서는 이미 삭제되었습니다.

Browser Support

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

Source

Chrome 138의 CSS 함수

Chrome 138에는 전체 CSS 함수가 포함되어 있습니다. 이 중 일부는 플랫폼에 새로 도입된 함수이고, 일부는 Chrome에 포함되면서 기준이 되는 함수입니다.

서명 관련 함수 abs() 및 sign()가 Chrome 138에서 새로 사용할 수 있는 기준이 됩니다.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 118.
  • Safari: 15.4.

Source

플랫폼에 새로 추가된 함수는 보간 함수 progress()입니다.

Chrome 138에는 sibling-index() 및 sibling-count()도 포함되어 있습니다. 이러한 값은 CSS 속성 값에서 정수로 사용하여 요소의 형제 중 위치 또는 총 형제 수를 각각 기준으로 요소의 스타일을 지정할 수 있습니다.

번역, 언어 감지, 요약을 위한 기본 제공 AI API

Chrome 138에는 세 가지 기본 제공 JavaScript AI API가 포함되어 있습니다. Translator 및 Language Detector API를 사용하면 텍스트가 작성된 언어를 감지하고 해당 텍스트를 다른 언어로 번역할 수 있습니다. 브라우저 자체의 내부 AI 모델을 사용하므로 기기 내에서 작업이 실행됩니다.

Browser Support

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

Summarizer API는 브라우저의 내부 AI 모델을 사용하여 기기 내에서 텍스트를 요약합니다.

Browser Support

  • Chrome: 138.
  • Edge: behind a flag.
  • Firefox: not supported.
  • Safari: not supported.

WebCodecs의 동영상 프레임 방향 지원

또한 Chrome 138에서는 개발자가 방향이 있는 프레임 소스를 사용할 수 있도록 WebCodecs의 다양한 동영상 관련 인터페이스에 rotation: int 및 flip: bool 값을 추가합니다.

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 보세요. 새로운 베타는 Firefox 141, Safari 26, Chrome 139입니다.

Safari 26은 기능이 풍부한 브라우저 버전이 될 것으로 기대됩니다. CSS의 경우 overflow-block 및 overflow-inline 지원, 스크롤 기반 애니메이션, 앵커 위치 지정, CSS progress() 함수 등이 포함됩니다. AudioEncoder 및 AudioDecoder API, URLPattern API, Digital Credentials API, Trusted Types, WebAuthn Signal API도 지원됩니다.

Chrome 139에는 CSS 맞춤 함수, 모서리 도형, caret-animation 속성이 포함되어 있습니다. 온디바이스 Web Speech API, 웹 앱 범위 확장 프로그램, request-close 호출자 명령도 포함되어 있습니다.

Firefox 141에서는 showPopover() 및 togglePopover()에 options.source 인수를 추가하여 팝오버와 호출자 간의 관계를 설정합니다. CSS font-variant-emoji 속성도 지원됩니다.