게시일: 2025년 10월 29일
Chrome 143부터 앵커 컨테이너 쿼리를 사용하여 앵커 요소가 대체 앵커 위치를 사용하는 시점을 식별할 수 있습니다. 이 게시물에서는 이 기능으로 해결되는 문제를 설명합니다.
CSS 앵커 위치 지정 API는 팝오버와 같은 요소를 다른 요소(앵커)에 연결하고 요소의 공간이 부족한 경우 사용할 위치 시도 대체 집합을 정의하는 강력한 방법을 제공합니다. 예를 들어 고정된 요소가 처음에 상단에 스타일이 지정되어 있지만 스크롤하여 화면 가장자리에 도달하면 브라우저에서 '뒤집기'를 처리하여 표시 영역에 유지할 수 있습니다.
하지만 앵커 위치 지정 사양의 레벨 1에는 중요한 격차가 있었습니다. CSS는 요소를 대체 위치로 이동할 수 있지만 선택된 대체 위치를 알 수 있는 방법이 없었습니다. 따라서 최종 위치에 따라 다른 스타일을 적용할 수 없었습니다. 툴팁이 아래에서 위로 뒤집힌 경우 JavaScript로 수정하지 않으면 화살표가 여전히 잘못된 방향을 가리킵니다.
앵커가 지정된 컨테이너 쿼리 (CSS 앵커 위치 지정 수준 2 사양에 정의됨)는 이 문제를 해결하여 CSS 앵커 위치 지정에 누락된 컨텍스트 인식을 제공합니다.
작동 방식: 대체 경로 쿼리
고정된 컨테이너 쿼리를 사용하면 브라우저가 앵커 위치를 확인한 방식에 따라 스타일을 적용할 수 있습니다.
이 기능은 다음과 같은 두 가지 새로운 CSS 기능으로 설정됩니다.
container-type: anchored: 위치가 지정된 요소 (예: 도움말)에 적용합니다. 이렇게 하면 앵커 위치 지정 상태를 '인식'하는 쿼리 컨테이너가 됩니다.@container anchored(fallback: ...): 이 새로운 at-rule 구문을 사용하면 최종적으로 사용된 position-try-fallbacks 옵션을 쿼리할 수 있습니다.
하단에 배치하고 싶지만 상단 위치를 대체로 사용하는 도움말이 있다고 가정해 보겠습니다. 다음 코드는
- 처음에는
.tooltip을 앵커 (--my-anchor) 하단에 배치하려고 시도합니다. - 맞지 않으면 대체가 상단으로 이동합니다.
@container쿼리가 이를 감지합니다. 상위 대체가 적용되면anchored(fallback: top)쿼리가 true가 됩니다.- 이를 통해 ::before 의사 요소의 콘텐츠를 '위' 화살표 (▲)에서 '아래' 화살표 (▼)로 변경하고 위치를 조정할 수 있습니다.
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
이 모든 작업은 CSS로만 실행되며 JavaScript, 관찰자, 추가 클래스는 없습니다. 참고: 팝오버 API를 사용하는 경우 암시적 앵커 관계가 생성되므로 앵커 이름을 명시적으로 지정할 필요가 없습니다.
테두리 해킹을 사용하여 CSS 삼각형을 만들고 고정된 쿼리로 삼각형의 위치를 변경하는 다음 데모를 확인하세요.
결론
고정된 쿼리는 위치가 지정된 요소의 현재 앵커 위치를 CSS 브라우저 네이티브로 인식할 수 있도록 합니다. 즉, 훨씬 더 탄력적이고 컨텍스트를 인식하는 구성요소를 빌드할 수 있습니다. 툴팁 화살표는 한 가지 예일 뿐이며 다음과 같은 방법도 있습니다.
- 메뉴가 뒤집힐 때 배경색을 변경합니다.
- 테두리 스타일을 앵커에 가장 가까운 가장자리로 이동합니다.
- '연결된' 모서리가 정사각형이 되도록 팝오버의 border-radius를 조정합니다.
- 대체 위치에 따라 요소를 다르게 애니메이션 처리합니다.
이는 앵커 위치 지정과 일반적인 구성요소 라이브러리에 큰 도움이 되며, 더 적은 코드로 더 강력하고 독립적인 UI 요소를 사용할 수 있습니다.