popover属性を触ってみた

ポップオーバーの実装が楽になるという記事が話題になっていたので、早速触ってみました。

https://coliss.com/articles/build-websites/operation/css/about-popover-api.html

DEMO を確認してみる

確かに、JavaScriptを使用せずに、ポップオーバーが実装されています。

どうしてもすぐにpopover属性を触ってみたかった訳

Chromeの公式ブログで紹介されていたDEMOの中に、こんなカッコいいUIも簡単に実装できちゃうの？！と感動し、みなさんにも是非触ってもらいたかったからです😎
https://developer.chrome.com/blog/introducing-popover-api/

気になったDEMOに対して、少しコードを追加してみた

SF映画やアニメで見かけるUIも簡単に実装できちゃうみたいです…❤️

記事公開時点のChromeでは、表示が崩れてしまう

Chrome バージョン114では、＋ボタンをクリック後のレイアウトが崩れてしまうため、一部設定の変更が必要です。

そのため、「Chrome ベータ版」をインストールしましょう。

https://www.google.com/intl/ja/chrome/beta/

設定を変更する

アドレスバーに以下の値をコピペし、アクセスします。

chrome://flags/#enable-experimental-web-platform-features

Experimental Web Platform featuresの設定値をEnableに変更して、ブラウザを再起動すれば準備完了です。

実際に動作を確認してみる

+ボタンをクリックしたら、もうあなたはSF世界の住人の仲間入りです。

まとめ

JavaScriptやプラグインなどを使用せずに、視覚的に面白いUIを実装できるのは良いですね…。
よりSFなUIを作成してみたいので、しばらく触ってみようと思います👓