Chrome 142의 새로운 기능

Rachel Andrew

게시일: 2025년 10월 28일

Chrome 142가 현재 출시되고 있으며, 이 게시물에서는 이번 출시의 주요 기능을 소개합니다. Chrome 142 출시 노트 전문을 읽어보세요.

이번 출시의 주요 사항:

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

이러한 유사 클래스는 플랫 트리 순서에 따라 동일한 스크롤 마커 그룹 내에서 활성 마커 (:target-current와 일치) 앞이나 뒤에 있는 스크롤 마커와 일치합니다.

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

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

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

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

예:

맞춤 속성을 리터럴 길이와 비교합니다.

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

두 리터럴 값 비교

@container style(1em < 20px) {
  /* ... */
}

if()에서 스타일 범위 사용:

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

관심도 호출자 (interestfor 속성)

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

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

추가 자료

여기서는 몇 가지 주요 사항만 다룹니다. Chrome 141의 추가 변경사항은 다음 링크를 참고하세요.

구독

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다. X 또는 LinkedIn에서 팔로우하여 새로운 기사와 블로그 게시물을 확인하세요.

Chrome 143이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.