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

2025년 12월에 안정화 및 베타 웹브라우저에 도입된 흥미로운 기능을 알아보세요.

Rachel Andrew

게시일: 2025년 12월 16일

안정화 브라우저 출시

Chrome 143, Firefox 146, Safari 26.2가 12월에 안정 버전으로 출시되었습니다. 이번 달에는 여러 기능이 새로 사용 가능해지면서 많은 새로운 기능이 추가되었습니다.

이제 @scope CSS @규칙이 기준입니다.

Firefox 146에는 특정 DOM 하위 트리의 요소를 선택할 수 있는 @scope CSS 규칙이 포함되어 있습니다. 선택기가 요소를 타겟팅할 수 있는 범위를 정의하여 지나치게 구체적이고 긴 선택기를 피할 수 있습니다. 예를 들어 다음 CSS는 클래스가 .card인 요소 내에 있는 경우에만 <img> 요소를 타겟팅합니다.

@scope (.card) {
    img {
        border-color: green;
    }
}

Firefox 146에서는 이 유용한 @규칙이 이제 Baseline Newly available로 제공됩니다. 자세한 내용은 CSS @scope at-rule로 선택기의 도달범위 제한하기를 참고하세요.

contrast-color() CSS 함수

Firefox 146에는 contrast-color() 함수도 있습니다. 이 함수는 색상 값을 가져와 WCAG AA 최소 대비를 보장하기 위한 대비되는 색상을 반환합니다.

자세한 예는 WebKit 블로그의 CSS에서 브라우저가 대비되는 색상을 선택하도록 하는 방법을 참고하세요.

Browser Support

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

Source

Firefox는 text-decoration-inset 속성을 제공하는 첫 번째 브라우저입니다. 이 속성을 사용하면 요소의 텍스트 장식의 시작점과 끝점을 조정하여 렌더링된 텍스트에 대해 단축하거나 늘리거나 위치를 이동할 수 있습니다.

font-language-override CSS 속성

Chrome 143에는 font-language-override 속성이 포함되어 있습니다. 이렇게 하면 특정 언어의 서체 동작을 재정의할 수 있습니다. 언어를 제대로 지원하지 않는 서체를 사용하는 경우 지원이 더 나은 유사한 언어의 글리프를 사용하도록 선택할 수 있습니다.

Browser Support

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

Source

CSS 고정 대체 컨테이너 쿼리

Chrome 143에서는 position-try-fallbacks 중 어떤 것이 적용되는지에 따라 앵커 위치 지정 요소의 하위 요소를 스타일 지정하는 @container anchored(fallback)가 도입되었습니다.

이러한 쿼리를 사용하면 앵커와 고정된 요소가 서로에 대해 배치되는 방식을 기반으로 고정된 요소의 테더 또는 애니메이션을 스타일링할 수 있습니다.

background-position-x/y 약식의 측면 관련 구문

또한 Chrome에서는 이제 모든 브라우저에서 background-position의 긴 형식 속성에서 가장자리를 기준으로 배경 이미지의 위치를 정의할 수 있습니다. 예를 들면 다음과 같습니다.

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

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

애니메이션 overallProgress 속성

Safari 26.2에는 overallProgress이 포함되어 있습니다. Animation 인터페이스의 읽기 전용 속성은 애니메이션이 완료된 상태로 진행되는 전체 진행률을 나타내는 0~1 사이의 숫자를 반환합니다.

이 속성은 이제 Baseline Newly available입니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 142.
  • Safari Technology Preview: supported.

Source

이제 LCP와 INP를 기준선으로 사용할 수 있습니다.

이제 최대 콘텐츠 페인트 (LCP) 및 다음 페인트에 대한 상호작용 (INP) 측정항목이 Baseline Newly available로 제공되며, 이러한 측정항목을 측정하는 데 필요한 콘텐츠가 포함된 페인트 API 및 이벤트 타이밍 API가 Safari 26.2에서 지원됩니다.

이러한 기능은 Interop 2025에 포함되었으며 이제 모든 주요 브라우저의 최신 버전에서 이러한 측정항목을 측정할 수 있습니다.

Largest Contentful Paint API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 89.
  • Safari: not supported.

Source

CHIPS가 기준선에 도달했습니다. 새로 제공됨

Safari 26.2에는 CHIPS (Cookies Having Independent Partitioned State)도 포함되어 있어 최상위 사이트마다 별도의 쿠키 집합을 사용하여 분할된 스토리지에 쿠키를 사용하기로 선택할 수 있습니다.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 141.
  • Safari: not supported.

Source

hidden="until-found"

Safari 26.2에는 hidden="until-found" 지원이 포함되어 있으며 이제 Baseline Newly available이 됩니다.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 139.
  • Safari Technology Preview: supported.

Source

command 및 commandfor 속성

또한 Safari 26.2의 HTML에서는 버튼에 command 및 commandfor이 지원됩니다. 이를 통해 팝오버와 대화상자를 선언적으로 제어할 수 있습니다.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 144.
  • Safari Technology Preview: supported.

Source

자세한 내용은 command 및 commandfor 소개를 참고하세요.

scrollend 이벤트

Safari 26.2에서 새로 기준이 되는 또 다른 기능은 scrollend 이벤트입니다. 이 이벤트는 스크롤이 완료될 때 발생합니다. 자세한 내용은 새 JavaScript 이벤트인 scrollend를 참고하세요.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

scrollbar-color 속성

scrollbar-color 속성을 사용하면 스크롤바 썸과 스크롤바 트랙의 색상을 변경할 수 있습니다. Safari 26.2에서는 새로 사용 가능 기준이 됩니다.

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 64.
  • Safari: not supported.

Source

베타 브라우저 출시

베타 브라우저 버전에서는 다음 안정화 버전 브라우저에 포함될 내용을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하기에 좋은 시기입니다. 이번 달의 새로운 베타는 Firefox 147과 Chrome 144입니다.

Chrome 144에는 페이지 내 검색 결과 스타일 지정용 ::search-text 의사 요소와 @scroll-state 지원이 포함되어 있어 가장 최근의 스크롤 방향에 따라 컨테이너의 하위 요소를 스타일 지정할 수 있습니다.scrolled 날짜 및 시간 작업을 위한 표준 객체와 함수가 포함된 Temporal API도 포함되어 있습니다.

Firefox 147은 CSS 앵커 포지셔닝, 뷰 전환 유형, 탐색 API가 포함된 흥미로운 출시입니다.

올해 출시된 흥미로운 CSS 및 UI 기능에 관한 자세한 내용은 CSS 요약 2025를 참고하세요.