実践 popover 属性 〜HTMLのみのモーダルで実案件に使えるのか確認〜

こんにちは森田です。
前回、HTMLのみでモーダルが作れる popover 属性の概要についての記事を書きました。

前回の記事内では軽い動作しかしていなかったので、今回は実際に案件でどこまで使うことができるか確認したいと思います。

popover 属性を試してみる

ではさっそく popover 属性を色々試してみましょう。
まずは動作確認として超シンプルなモーダルを作ってみます。

動作確認用超シンプルなモーダル

まずは前回の記事のおさらいで、動作確認用の超シンプルなモーダルです。

モーダルになる要素に popover 属性と任意の id を。表示するボタンにpopovertarget属性を指定し、モーダル要素の id を指定します。

<button type="button" popovertarget="popover">シンプルモーダル表示</button>

<div id="popover" popover>
  <p>HTMLのみでモーダルが表示されました</p>
</div>

Chrome などすでに対応したブラウザを使っている場合、ボタン押下で画面中央にモーダルが表示されているはずです。
PCブラウザではモーダル以外の箇所を触る、もしくはescキーを押すことでモーダルが閉じます。

しかし、iPhone の Safari ですと、モーダル以外の箇所を触ってもモーダルが閉じませんでした。（Androidは未確認）
モーダル表示ボタンを押すしか閉じることができなかったので、モバイル対応として閉じるボタンを明示的に付ける方が良さそうです。

閉じるボタンをつける

では、「閉じるボタン」を付けましょう。

閉じるボタンに popovertargetaction 属性の値を hide にして指定します。

<button type="button" popovertarget="popover">閉じるボタンモーダル表示</button>

<div id="popover" popover>
  <p>HTMLのみでモーダルが表示されました</p>
  <button type="button" popovertarget="popover" popovertargetaction="hide">閉じる</button>
</div>

PC では閉じるボタン、もしくはモーダル以外の箇所、escキーで閉じることができます。
iPhone ですと閉じるボタン以外では閉じれませんでした。

popovertargetaction 属性は値に hide の他に show と toggle もあります。
popovertarget 属性のある要素は popovertargetaction="toggle" となり指定しなくても表示されます。

閉じるボタン以外で閉じれなくする

続いて「閉じるボタン」を付けましょう。

モーダルのpopover 属性の値を manual に指定します。

<button type="button" popovertarget="popover">閉じるボタンのみで閉じるモーダル表示</button>

<div id="popover" popover="manual">
  <p>HTMLのみでモーダルが表示されました</p>
  <button popovertarget="popover" popovertargetaction="hide" type="button">閉じる</button>
</div>

popover="manual" を指定すると、閉じるボタン以外で閉じることはできません。
escキーでも閉じません。

モーダルに背景を付ける

モーダルに背景を敷きましょう。
popover 属性のモーダルは CSS の ::backdrop 擬似要素でスタイリングすることができます。

<button popovertarget="popover" type="button">背景付きモーダル表示</button>

<div id="popover" popover>
  <p>背景付きモーダルが表示されました</p>
  <button type="button" popovertarget="popover" popovertargetaction="hide">閉じる</button>
</div>

#popover::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

モーダル要素に ::backdrop 擬似要素を指定します。

フワッと表示する（animation）

モーダルに表示時にフワッと表示してみましょう。
CSSの animation プロパティで指定できます。

<button type="button" popovertarget="popover">フワッとモーダル表示</button>

<div id="popover" popover>
  <p>フワッとモーダルが表示されました</p>
  <button type="button" popovertarget="popover" popovertargetaction="hide">閉じる</button>
</div>

#popover,
#popover::backdrop {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

モーダル要素と背景に animation を指定しました。

フワッと表示する（transision）

フワッと表示を transision プロパティで指定してみましょう。

モーダルが表示中のみスタイルを適用する擬似クラス @starting-style と、transition の開始時のスタイルと定義できる @starting-style を使用します。

<button type="button" popovertarget="popover">フワッとモーダル表示</button>

<div id="popover" popover>
  <p>フワッとモーダルが表示されました</p>
  <button type="button" popovertarget="popover" popovertargetaction="hide">閉じる</button>
</div>

#popover:popover-open,
#popover::backdrop {
  opacity: 1;
  transition: opacity 0.5s;
}
@starting-style {
  #popover:popover-open,
  #popover::backdrop {
  opacity: 0;
  }
}

モーダル要素と背景に transision を指定しました。
シンプルにフワッと表示する場合はこれが楽そうです。
transition-behaviorプロパティと組み合わせると閉じる時の transision も指定できそうです。

ただし、 @starting-style は 現在 Safari, Firefoxは未サポートなのでブラウザサポート待ちとなっています。

参考： CSS at-rule: `@starting-style` | Can I use…

まとめ

• popover属性のデフォルト値は auto
  • manual にすると閉じるボタン以外で閉じられない
• モバイルでは閉じるボタン以外閉じられない（要調査）
• popovertarget属性のデフォルト値は toggle
• ::backdrop 擬似要素が使える
• :popover-open 擬似クラスで表示時のスタイルを定義
• @starting-styleで transision 開始時のスタイルを指定できる
  （モーダルに限らず使えるが、現在Safari, Firefoxは未サポート）

結論として、popover 属性でモーダル実装は実案件で使えそうだと思えました。
プロジェクトのターゲットブラウザによりますが、 モダンブラウザのみであれば導入できそうです。
唯一サポート待ちのFirefox のサポートは3月予定です。Nightlyバージョンでは動作を確認できました。

今後は HTML でのモーダル実装が主流になりそうですね。