10월에 도입된 새로운 웹 플랫폼

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

Rachel Andrew

게시일: 2025년 10월 30일

안정화 브라우저 출시

10월에 Chrome 142와 Firefox 144가 안정화 버전으로 출시되었습니다. 이 게시물에서는 웹 플랫폼에 미치는 영향을 살펴봅니다.

단일 페이지 앱용 View Transitions API

Firefox 144에는 동일 문서 뷰 전환 지원이 포함되어 있습니다. 여기에는 다음 지원이 포함됩니다.

• :active-view-transition 의사 클래스
• view-transition-class 속성
• view-transition-name 속성
• ::view-transition 의사 요소
• ::view-transition-group() 의사 요소
• ::view-transition-image-pair() 의사 요소
• ::view-transition-new() 의사 요소
• ::view-transition-old() 의사 요소

이렇게 하면 동일한 문서 보기 전환이 새로 제공되는 기준선이 됩니다.

<button> 요소의 command 및 commandfor 속성

Firefox 144는 command 및 commandfor을 지원합니다. 이러한 속성에 대한 자세한 내용은 command 및 commandfor 소개를 참고하세요.

moveBefore() 메서드

이제 moveBefore() 메서드가 Element, DocumentFragment, Document 인터페이스에서 Firefox에 의해 지원됩니다. 이렇게 하면 두 요소가 상태를 유지하면서 객체의 직계 하위 요소를 다른 하위 요소 앞에 이동할 수 있습니다.

moveBefore()를 사용하여 DOM 변형 중에 상태 유지에서 자세히 알아보세요.

:target-before 및 :target-after 가상 클래스

Chrome 142에서는 동일한 스크롤 마커 그룹 내에서 활성 마커 (:target-current와 일치) 앞이나 뒤에 있는 스크롤 마커와 일치하는 의사 클래스를 추가합니다. 이는 플랫 트리 순서에 따라 결정됩니다.

• :target-before: 그룹 내 플랫 트리 순서에서 활성 마커 앞에 있는 모든 스크롤 마커와 일치합니다.
• :target-after: 그룹 내 플랫 트리 순서에서 활성 마커 다음에 오는 모든 스크롤 마커와 일치합니다.

스타일 컨테이너 쿼리 및 if()의 범위 구문

Chrome 142에서는 범위 구문 지원을 추가하여 CSS 스타일 쿼리와 if() 함수를 개선합니다.

스타일 쿼리를 정확한 값 일치(예: style(--theme: dark)) 이상으로 확장합니다. 개발자는 비교 연산자(예: > 및 <)를 사용하여 맞춤 속성, 리터럴 값(예: 10px 또는 25%), 대체 함수(예: attr() 및 env())의 값을 비교할 수 있습니다. 유효한 비교를 위해서는 양쪽 모두 동일한 데이터 유형으로 확인되어야 합니다. <length>, <number>, <percentage>, <angle>, <time>, <frequency>, <resolution>과 같은 숫자 유형으로 제한됩니다.

관심도 호출자 (interestfor 속성)

Chrome 142에서는 <button> 및 <a> 요소에 interestfor 속성도 추가됩니다. 이 속성은 요소에 '관심분야' 동작을 추가합니다. 사용자가 요소에 관심을 보이면 타겟 요소에서 팝오버 표시와 같은 작업이 트리거됩니다.

사용자 에이전트는 사용자가 요소 위로 포인터를 가져가거나, 키보드에서 특수 단축키를 누르거나, 터치 스크린에서 요소를 길게 누르는 등의 방법을 통해 요소에 관심을 보이는 경우를 감지합니다. 관심이 표시되거나 사라지면 InterestEvent가 타겟에서 실행되며, 여기에는 팝오버를 표시하고 숨기는 등의 팝오버의 기본 작업이 있습니다.

베타 브라우저 출시

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

Firefox 145에는 ToggleEvent 인터페이스의 source 속성과 Atomics.waitAsync() 정적 메서드가 포함되어 있습니다.

Chrome 145에는 CSS 고정 대체 컨테이너 쿼리가 포함되어 있습니다. 이를 통해 적용된 position-try-fallbacks 값에 따라 앵커 위치 지정 요소의 하위 요소를 스타일링하는 @container anchored(fallback)가 도입됩니다.