팝오버 API 소개

Una Kravets

팝오버는 웹의 어디에나 있습니다. 계정 설정, 공개 정보 위젯 및 제품 카드 미리보기로 표시할 수 있는 메뉴, 전환팁, 대화상자에서 확인할 수 있습니다. 이러한 구성요소가 널리 사용되고 있지만 브라우저에서 빌드하는 것은 여전히 매우 번거롭습니다. 포포버의 유용하고 고유한 핵심 기능을 빌드하기 전에 포커스, 열기 및 닫기 상태, 구성요소에 액세스할 수 있는 후크, 환경에 진입하고 종료하는 키보드 바인딩을 관리하는 스크립트를 추가해야 합니다.

이 문제를 해결하기 위해 팝오버를 빌드하기 위한 새로운 선언적 HTML API 세트가 Chromium 114의 popover API를 시작으로 브라우저에 제공됩니다.

팝오버 속성

브라우저 지원

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

소스

모든 복잡성을 직접 관리하는 대신 브라우저에서 popover 속성 및 후속 기능 집합을 사용하여 이를 처리하도록 할 수 있습니다. HTML 팝오버 지원:

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

이제 JavaScript를 사용하지 않고도 이러한 모든 기능을 사용하여 팝오버를 빌드할 수 있습니다. 기본 팝오버에는 다음 세 가지가 필요합니다.

  • 팝오버가 포함된 요소의 popover 속성입니다.
  • 팝오버가 포함된 요소의 id
  • 팝오버를 여는 요소에 팝오버의 id 값이 있는 popovertarget입니다.
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

이제 완전히 작동하는 기본 팝오버가 생겼습니다.

이 팝오버는 추가 정보를 전달하거나 공개 위젯으로 사용할 수 있습니다.

기본값 및 재정의

기본적으로 이전 코드 스니펫과 같이 popovertarget로 팝오버를 설정하면 팝오버를 여는 버튼이나 요소가 팝오버를 켜거나 끌 수 있습니다. 하지만 popovertargetaction를 사용하여 명시적 팝오버를 만들 수도 있습니다. 이렇게 하면 기본 전환 작업이 재정의됩니다. popovertargetaction 옵션은 다음과 같습니다.

popovertargetaction="show": 팝오버를 표시합니다. popovertargetaction="hide": 팝오버를 숨깁니다.

popovertargetaction="hide"를 사용하면 다음 스니펫과 같이 팝오버 내에 '닫기' 버튼을 만들 수 있습니다.

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>
을 참고하세요.

자동 팝오버와 수동 팝오버 비교

popover 속성 자체를 사용하는 것은 실제로 popover="auto"의 바로가기입니다. 열리면 기본 popover는 상위 요소 팝오버를 제외한 다른 자동 팝오버를 강제로 닫습니다. 조용히 닫기 또는 닫기 버튼을 통해 닫을 수 있습니다.

반면에 popover=manual를 설정하면 다른 유형의 팝오버인 수동 팝오버가 생성됩니다. 이러한 요소는 다른 요소 유형을 강제로 닫지 않으며 조용히 닫기를 통해 닫히지 않습니다. 타이머 또는 명시적인 닫기 작업을 통해 닫아야 합니다. popover=manual에 적합한 팝오버 유형은 표시되고 사라지지만 토스트 알림과 같이 페이지의 나머지 부분에는 영향을 미치지 않는 요소입니다.

을 참고하세요.

위의 데모를 살펴보면 팝오버 영역 외부를 클릭해도 팝오버가 밝게 닫히지 않는 것을 확인할 수 있습니다. 또한 다른 팝오버가 열려 있는 경우 닫히지 않습니다.

차이점을 검토하려면 다음 단계를 따르세요.

popover=auto 팝오버:

  • 팝오버가 열리면 다른 팝오버를 강제 종료합니다.
  • light-dismiss할 수 있습니다.

popover=manual 팝오버:

  • 다른 요소 유형을 강제로 닫지 마세요.
  • 빛을 닫지 않습니다. 전환 버튼이나 닫기 작업을 사용하여 닫습니다.

팝오버 스타일 지정

지금까지 HTML의 기본 팝오버에 대해 배웠습니다. 하지만 popover와 함께 제공되는 몇 가지 멋진 스타일 지정 기능도 있습니다. 그중 하나는 ::backdrop의 스타일을 지정하는 기능입니다.

auto 팝오버에서 이 레이어는 팝오버가 있는 최상위 레이어 바로 아래에 있는 레이어로, 페이지의 나머지 부분 위에 있습니다. 다음 예에서는 ::backdrop에 반투명 색상이 지정됩니다.

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

popover와 dialog의 차이점

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

dialog.showModal로 열린 dialog 요소 (모달 대화상자)는 모달을 닫으려면 명시적인 사용자 상호작용이 필요한 환경입니다. popover는 빛 닫기를 지원합니다. 모달 dialog은 그렇지 않습니다. 모달 대화상자는 페이지의 나머지 부분을 비활성화합니다. popover는 그렇지 않습니다.

위의 데모는 팝오버 동작이 포함된 의미론적 대화상자입니다. 즉, 페이지의 나머지 부분이 비활성 상태가 아니고 대화상자 팝오버가 가볍게 닫는 동작을 취합니다. 다음 코드를 사용하여 팝오버 동작으로 이 대화상자를 빌드할 수 있습니다.

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

출시 예정

양방향 진입 및 종료

display: none와의 애니메이션, 최상위 레이어와의 애니메이션을 포함하여 불연속 속성을 애니메이션할 수 있는 기능은 아직 브라우저에서 사용할 수 없습니다. 하지만 이 출시 직후에 Chromium의 다음 버전에서도 출시될 예정입니다.

불연속 속성에 애니메이션을 적용하는 기능과 :popover-open 및 @starting-style를 사용하면 변경 전 및 변경 후 스타일을 설정하여 팝오버를 열고 닫을 때 원활하게 전환할 수 있습니다. 이전 예를 살펴보겠습니다. 안팎으로 애니메이션을 적용하는 것이 훨씬 더 매끄러워 보이고 더 유동적인 사용자 환경을 지원합니다.

앵커 위치 지정

팝오버는 표시 영역을 기반으로 알림, 모달 또는 알림을 배치하려는 경우에 유용합니다. 하지만 팝오버는 메뉴, 도움말, 다른 요소를 기준으로 배치해야 하는 기타 요소에도 유용합니다. 이때 CSS 고정이 사용됩니다.

다음 방사형 메뉴 데모에서는 CSS 앵커 위치 지정과 함께 팝오버 API를 사용하여 팝오버 #menu-items가 항상 전환 트리거인 #menu-toggle 버튼에 고정되도록 합니다.

앵커 설정은 팝오버 설정과 유사합니다.

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

앵커에 id (이 예에서는 #menu-toggle)를 지정하여 앵커를 설정한 후 anchor="menu-toggle"를 사용하여 두 요소를 연결합니다. 이제 anchor()를 사용하여 팝오버의 스타일을 지정할 수 있습니다. 앵커 전환 버튼의 기준선에 고정된 가운데 정렬된 팝오버 메뉴의 스타일은 다음과 같습니다.

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}
을 참고하세요.

이제 전환 버튼에 고정되고 팝오버의 모든 내장 기능을 갖춘 완전한 기능의 팝오버 메뉴가 생성되었습니다. JavaScript가 필요하지 않습니다.

결론

팝오버 API는 웹 애플리케이션 빌드를 더 쉽게 관리하고 기본적으로 더 쉽게 액세스할 수 있도록 하는 일련의 새로운 기능 중 첫 번째 단계입니다. 팝오버를 어떻게 사용하시는지 기대됩니다.

추가 자료