툴팁 위치를 JS로 계산하던 시절의 끝 — CSS 앵커 포지셔닝

툴팁이나 드롭다운을 붙일 때마다 하던 일이 있어요.

기준이 되는 버튼의 좌표를 getBoundingClientRect로 재고, 화면 밖으로 나가는지 확인하고, 넘치면 위로 뒤집고.

Popper.js나 Floating UI 같은 라이브러리를 쓰는 것도 결국 이 계산을 대신 시키는 거였고요.

위치 하나 잡자고 자바스크립트가 매번 붙었어요.

CSS 앵커 포지셔닝은 이 계산을 CSS로 가져와요.

기준 요소에 “너는 앵커야, 이름은 이거야”를 붙이고, 따라붙는 요소에 “저 앵커를 기준으로 여기 서라”를 적으면 끝이에요.

.trigger {
  anchor-name: --menu;
}

.dropdown {
  position: absolute;
  position-anchor: --menu;
  position-area: bottom center; /* 앵커의 아래·가운데에 */
}

position-area는 앵커를 3×3 격자의 가운데로 놓고, 그 둘레 어디에 세울지를 말로 고르는 방식이에요.

bottom center, top span-right 같은 식으로요.

좌표를 숫자로 박던 걸, 방향으로 말하게 된 거예요.

진짜 반가운 건 화면 밖으로 넘칠 때예요.

예전엔 “아래로 폈다가 잘리면 위로 뒤집기”를 직접 감지해 짰는데, 이제 후보를 나열해두면 브라우저가 알아서 들어가는 자리를 골라요.

.dropdown {
  position-try-fallbacks: flip-block, flip-inline;
}

아래가 좁으면 위로, 오른쪽이 좁으면 왼쪽으로.

스크롤로 상황이 바뀌면 실시간으로 다시 고르고요.

스크롤 이벤트를 듣고 위치를 다시 계산하던 그 루프가 통째로 사라져요.

여기에 popover 속성이나 <dialog> 같은 네이티브 요소를 얹으면, 접근성·포커스 관리까지 브라우저가 챙겨줘서 라이브러리 없이 꽤 멀리 가요.

지원은 아직 고르지 않아요.

크롬·엣지는 125부터 안정적으로 되고, 사파리도 18.2부터 핵심 기능이 들어왔어요.

position-try(넘칠 때 뒤집기)는 사파리에서 조금 더 늦게 붙었고, 파이어폭스는 뒤따라오는 중이라 버전에 따라 부분적이에요.

그래서 @supports로 감싸 “되면 CSS로, 안 되면 기존 방식으로” 두는 게 지금은 안전해요.

@supports (anchor-name: --x) {
  /* 앵커 포지셔닝 경로 */
}

그런데 그게 아직 지원이 제일 얕은 축이기도 해서, “가장 사랑받지만 가장 못 믿는” 기능이 됐고요.

그 간극을 좁히는 게 올해 Interop의 초점 영역 중 하나예요.

바꿔 말하면, 지금 배워두면 지원이 차오르는 시점에 딱 맞춰 실전에 쓸 수 있다는 뜻이에요.

퍼블리셔의 눈으로 보면 이건 익숙한 이동이에요.

position: absolute로 요소를 띄우되 기준을 부모로 잡던 걸, 이제 화면의 다른 요소를 기준으로 삼을 수 있게 된 것뿐이니까요.

좌표를 재던 자바스크립트가 하나 줄고, 그 자리를 CSS가 메꿔요.

댓글