Popover API가 Baseline에 도입

Una Kravets

동영상 공개 설정이 곧 변경됩니다. 가장 기대되는 기능 중 하나가 모든 최신 브라우저에 출시되었으며 공식적으로 기준 2024의 일부가 되었습니다. 이 기능이 바로 Popover API입니다. 팝오버는 도움말, 메뉴, 교육 UI와 같은 계층형 인터페이스를 빌드하기 위한 멋진 프리미티브와 개발자 어포던스를 제공합니다.

브라우저 지원

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17

소스

팝오버 기능의 몇 가지 주요 특징은 다음과 같습니다.

  • 최상위 레이어로 승격 팝오버는 페이지의 나머지 부분 위에 있는 최상위 레이어에 표시되므로 z-index를 조작할 필요가 없습니다.
  • 밝은 색상으로 닫기 기능 팝오버 영역 외부를 클릭하면 팝오버가 닫히고 포커스가 반환됩니다.
  • 기본 포커스 관리 팝오버를 열면 다음 탭이 팝오버 내에서 중지됩니다.
  • 접근 가능한 키보드 바인딩 esc 키를 누르거나 전환을 두 번 하면 팝오버가 닫히고 포커스가 돌아갑니다.
  • 액세스 가능한 구성요소 결합. 의미론적으로 팝오버 요소를 팝오버 트리거에 연결합니다.

팝오버 만들기

팝오버를 만드는 것은 매우 간단합니다. 기본값을 사용하려면 팝오버를 트리거하는 button와 트리거할 요소만 있으면 됩니다.

  • 먼저 팝오버가 될 요소에 popover 속성을 설정합니다.
  • 그런 다음 팝오버 요소에 고유한 id를 추가합니다.
  • 마지막으로 버튼을 팝오버에 연결하려면 버튼의 popovertarget를 팝오버 요소의 id 값으로 설정합니다.

다음 코드의 예시를 참조하세요.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
팝오버 속성을 사용하는 기본 예시입니다.

팝오버를 더 세부적으로 제어하려면 팝오버 유형을 명시적으로 설정하면 됩니다. 예를 들어 값이 없는 빈 popover 속성을 사용하는 것은 popover="auto"와 같습니다. auto 값은 조용히 닫기 동작을 사용 설정하고 다른 팝오버를 자동으로 닫습니다. popover="manual"를 사용하면 닫기 버튼을 추가해야 합니다. 수동 팝오버는 다른 팝오버를 닫지 않으며 사용자가 UI에서 클릭하여 팝오버를 닫을 수 있도록 허용하지 않습니다. 다음을 사용하여 수동 팝오버를 만듭니다.

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
수동 팝오버의 예

팝오버와 모달 대화상자 비교

대화상자가 있는 경우 팝오버가 필요한지 궁금할 수 있습니다. 대답은 '필요하지 않을 수도 있습니다'입니다.

팝오버 속성은 그 자체로 의미론을 제공하지 않는다는 점에 유의해야 합니다. 이제 팝오버를 사용하여 모달 대화상자와 같은 환경을 빌드할 수 있지만 두 가지 사이에는 몇 가지 주요 차이점이 있습니다.

모달 <dialog> 요소

  • dialog.showModal()로 열었습니다.
  • dialog.close()로 닫습니다.
  • 페이지의 나머지 부분을 비활성화합니다.
  • 조명 닫기 동작을 지원하지 않습니다.
  • [open] 속성을 사용하여 열림 상태의 스타일을 지정할 수 있습니다.
  • 페이지의 나머지 부분과의 상호작용을 차단하는 대화형 구성요소를 의미론적으로 나타냅니다.

[popover] 속성

  • 선언적 호출자 (popovertarget)로 열 수 있습니다.
  • popovertarget (자동 팝오버) 또는 popovertargetaction=hide (수동 팝오버)로 닫습니다.
  • 페이지의 나머지 부분을 비활성화하지 않습니다.
  • 빛 닫기 동작을 지원합니다.
  • :popover-open 가상 클래스로 열린 상태의 스타일을 지정할 수 있습니다.
  • 고유한 시맨틱스가 없습니다.

결론 및 추가 읽기 자료

popover는 플랫폼에 여러 가지 흥미로운 기능을 제공합니다. 이 API에 관한 자세한 내용(예: 기능의 접근성, 기능 세트 관련 문서)은 다음을 참고하세요.