mnml

Chrome 114から使える popover API を試す

Icon

70_10

popover API の登場

Chrome 114 から popover API が利用可能になりました。

Introducing the popover API - Chrome Developers

他のブラウザのサポート状況は以下のとおりです。

HTMLElement API: popover | Can I use… Support tables for HTML5, CSS3, etc

popover API の機能

popover API の機能はとてもざっくりと説明すると以下の 2 つです。

  1. 画面の空いているところに独立したレイヤーでポップオーバーを表示
  2. ポップオーバーの領域外をクリック・タップする、もしくは ESC キーを押すとポップオーバーが閉じてフォーカスが戻る

検証：ポップオーバー表示の領域について

以下のようなグリッドレイアウトの画面で、ポップオーバー表示をしてみます。
この場合、ポップオーバーは .main の DOM の領域に表示されるのか試します。

<body>
  <main class="parent">
    <div class="header">
      <h2>Header</h2>
    </div>
    <div class="main">
      <h2>Main</h2>
      <button popovertarget="my-popover">Open Popover</button>

      <div id="my-popover" popover>
        <p>I am a popover with more information.</p>
      </div>
    </div>
    <div class="side">
      <h2>Side</h2>
    </div>
  </main>
</body>

<style>
  body {
    background-color: cadetblue;
  }

  .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .header {
    padding-left: 20px;
    background-color: brown;
    grid-area: 1 / 1 / 2 / 6;
  }

  .main {
    padding-left: 20px;

    background-color: beige;
    grid-area: 2 / 1 / 6 / 5;
  }

  .side {
    padding-left: 20px;

    background-color: darkgoldenrod;
    grid-area: 2 / 5 / 6 / 6;
  }
</style>

結果：ポップオーバーは画面全体を領域とする

ポップオーバーは .main の領域内に表示されるのではなく、画面全体の空いている場所に表示されました。
もし .main の領域内で表示したい場合は独自に制御する必要があります。

See the Pen popover api sample by 70_10 (@70-10) on CodePen.

#Web Frontend