WEBBOOK CHAPTER

모던 CSS, 기본에서 실무까지: 36장. Popover·Anchor와 Top Layer를 안전하게 쓴다

36장. Popover·Anchor와 Top Layer를 안전하게 쓴다

tooltip, menu, teaching bubble은 positioning만 아니라 focus, escape, outside click, modality와 reading order가 필요하다. Popover API와 anchor positioning을 쓸 때 지원 상태를 Baseline과 실제 browser matrix로 확인하고, 기능 감지 뒤 기존 button+dialog/menu fallback을 유지한다.

top layer는 높은 z-index 경쟁을 줄이지만 접근성을 자동 해결하지 않는다. trigger와 accessible name, focus 이동·복귀, keyboard navigation, viewport edge collision을 test한다. 중요한 오류나 동의 내용을 hover tooltip에만 두지 않는다. WebView와 zoom에서 anchor가 화면 밖으로 나가지 않는지 본다.