팝오버 API 소개

Chromium 114에 popver API가 추가되었습니다. 아래는 요약본입니다. - 팝오버 API? 팝오버 속성과 후속 기능 세트를 시작으로 팝오버를 구축하기 위한 새로운 선언적 HTML API 세트가 브라우저에 제공될 예정입니다. 팝오버는 메뉴, 토글팁, 다이얼로그 등 페이지의 나머지 부분 위에 별도의 레이어에 표시되는 구성 요소입니다. - 기능 HTML 팝업은 최상위 레이어로 끌어올리기, 라이트 디스미스 기능(팝오버 외부 영역을 클릭 시 팝오버가 닫히는 기능), 기본 포커스 관리, 접근 가능한 키보드 바인딩 및 접근 가능한 구성 요소 바인딩을 지원합니다. popovertarget 속성을 사용하여 기본 팝오버를 만들거나 popovertargetaction 속성을 사용하여 명시적 팝오버를 만들 수 있습니다. 상황에 따라 자동 팝오버와 수동 팝오버 중에서 선택할 수도 있습니다. - 스타일링 다른 HTML 요소와 마찬가지로 팝오버의 스타일을 지정할 수 있으며, ::backdrop pseudo-element를 사용하여 팝오버 아래의 레이어에 스타일을 지정할 수도 있습니다. 또한 :popover-open 및 @starting-style을 사용하여 개별 속성에 애니메이션을 적용할 수도 있습니다. 또한 anchor 속성과 anchor() 함수를 사용하여 CSS 앵커링을 사용하여 팝오버를 다른 요소에 상대적으로 배치할 수 있습니다. - 팝오버 vs 다이얼로그 팝오버와 다이얼로그는 모양은 비슷하지만 동작 방식이 다릅니다. 팝오버는 라이트 디스미스를 지원하며 페이지의 나머지 부분을 비활성화하지 않는 반면, 다이얼로그는 명시적인 사용자 상호 작용이 있어야 닫히고 페이지의 나머지 부분을 비활성화할 수 있습니다. 다이얼로그와 팝오버 속성을 사용하여 팝오버 동작이 있는 시맨틱 다이얼로그를 만들 수 있습니다. https://developer.chrome.com/blog/introducing-popover-api/