토스트 알림 만들기

웹 기능: 팝오버 앵커 위치 지정 sibling-count() 및 sibling-index() transition-behavior

토스트 알림은 일시적인 상태 메시지입니다. 메뉴와 달리 사용자가 페이지의 다른 부분과 상호작용할 때 닫히지 않아야 합니다. popover="manual" 상태는 '가벼운 닫기' 동작이 없고 여러 알림이 공존할 수 있으므로 이상적입니다.

구현 가이드라인

  • 필수: 스크립트에 의해 명시적으로 닫히거나 타임아웃될 때까지 알림이 계속 표시되도록 popover="manual"을 사용합니다.
  • 권장사항: 컨테이너를 사용하여 여러 토스트 메시지의 스택을 관리합니다. 최상위 레이어의 팝오버는 상위 z-색인을 무시하므로 개별적으로 또는 공통 레이아웃 그룹 내에 배치해야 합니다.
  • 권장사항: sibling-index()를 사용하여 토스트 메시지 알림 사이에 여백을 추가하여 스택의 하단에 있는 항목이 표시되도록 합니다.
  • popovertargetaction= "hide"를 사용하여 토스트 메시지 내에 명시적인 '닫기' 버튼을 제공해야 합니다.
  • 권장사항: 자동 닫기 타이머에 JavaScript를 사용합니다 (예: 3,000ms 후 hidePopover() 호출).
  • 권장사항: transition-behavior: allow-discrete를 활용하여 최상위 레이어의 시작과 종료에 애니메이션을 적용합니다.

대체 전략

Popover의 대체 및 브라우저 지원

Popover API는 대부분 점진적 개선이지만, 최상위 레이어 승격, 가벼운 닫기, popovertarget 호출과 같은 정의 동작에는 CSS 전용에 상응하는 기능이 없습니다. 이전 브라우저에는 폴리필이 필요하며, 폴리필을 제공하지 않으려면 수동 대체가 필요합니다.

폴리필: 이전 브라우저에서 popover 속성을 지원하려면 조건부로 @oddbird/popover-polyfill를 로드합니다. 필수: HTMLElement.prototype에서 popover 속성을 확인하여 기능을 감지하고 네이티브 지원이 누락된 경우에만 폴리필을 로드합니다. 무조건 로드하지 마세요.

번들러 또는 가져오기 맵 사용:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

번들러가 없는 경우 <script type="module"> 내의 CDN에서 가져옵니다.

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

스타일 지정 주의사항: 폴리필은 실제 :popover-open 의사 클래스를 정의할 수 없으므로 대신 .\:popover-open 클래스를 적용합니다. 필수: :is() 또는 :where()를 사용하여 두 가지를 결합합니다. 그렇지 않으면 :popover-open가 없는 브라우저에서 전체 규칙을 삭제합니다.

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

또는 폴리필이 없는 기존 대체 기능의 경우 position: fixed를 사용하고 getBoundingClientRect()를 통해 좌표를 수동으로 계산하거나, 사용 사례에 적합한 경우 inset: auto를 사용하여 기본 위치 지정에 의존합니다.

sibling-index()

  • 안내: sibling-index()가 지원되지 않는 경우 + 연산자를 사용하여 여백을 수동으로 추가합니다. 즉, popover + popover { margin-top: 1rem }

anchor-positioning

  • 가이드: CSS 앵커 포지셔닝 폴리필을 사용합니다. 폴리필이 아닌 대체 기능의 경우 @supports not (anchor-name: --foo)를 사용하여 표시 영역 하단의 고정된 위치로 도움말을 기본 설정합니다.

transition-behavior

  • 가이드: transition-behavior가 지원되지 않는 경우 JavaScript를 사용하여 토스트 메시지 요소가 전환될 때 클래스를 통해 애니메이션을 추가합니다.