私のブログのナビゲーションは input タグを使ってトグル機能を実装しました。
<input id="toggle-nav" type="checkbox" hidden />
<div id="nav">
<label for="toggle-nav">トグル</label>
メニュー...
</div>label の for 属性を使用して見えない input をトグルできましたが、この方法はメンテナンス性が低く、現代的なアプローチではありませんでした。今回はこのコードを最新の文法に合わせて改善しました。コードの目的は no-js 環境でも動作を保証することです。
今回のコードの置き換えも現代的な文法に変更しつつ、no-js 環境でも動作を保証する機能を持たせるために行いました。
コードの置き換え
コードを変更する作業は非常に簡単でした。
labelタグの代わりに実際にボタンの役割を果たすbuttonタグを使用- ポップオーバー対象に新しい属性を付与
- ユーザー定義スタイルを適用
- <input id="toggle-nav" type="checkbox" hidden>
+ <button popovertarget="nav" popoveraction="toggle">トグル</button>
- <div id="nav">
+ <div id="nav" popover>
- <label for="toggle-nav">トグル</label>
+ <button popovertarget="nav" popoveraction="toggle">トグル</button>
メニュー...
</div>
+ <style>
+ #nav {
+ /* reset */
+ display: block;
+ padding: unset;
+ }
+ </style>label の for 属性を使用して見えない input をトグルできましたが、この方法はメンテナンス性が低く、現代的なアプローチではありませんでした。また、コードの目的は no-js 環境でも動作を保証することでした。今回このコードを最新の文法に改善しつつ、no-js 環境でも動作を保証できるように変更しました。
ポップオーバー API の追加機能
ポップオーバー API は外部ライブラリなしで HTML のみで実装できるため、コードの依存性を減らし、コードの長さを最小限に抑える機能を提供します。これはコードのメンテナンス性の面で大きな利点を提供し、クリーンで管理しやすいコードを書くことができます。
-
背景ぼかし処理: ポップオーバーがアクティブになると背景をぼかし、ユーザーインターフェースでポップオーバーの内容にのみ集中できるようにします。この機能は純粋な HTML で簡単に実装でき、追加のスクリプトなしで視覚的効果を簡単に追加できます。
-
自動閉じ機能: ユーザーがポップオーバーの外をクリックしたり ESC キーを押すと、ポップオーバーが自動的に閉じるように設定できます。これも HTML 属性のみで実装可能で、不要な JavaScript コードを書くことなく機能を完成させることができます。
-
アニメーション効果: ポップオーバーの登場と退場を自然にするアニメーション効果も HTML で簡単に適用でき、コードの複雑さを減らし、メンテナンスを容易にします。
しかし、この API は最新のブラウザでのみサポートされているため、互換性が重要なプロジェクトでは使用に注意が必要です。すべてのユーザーが最新のブラウザを使用しているわけではないため、開発環境に応じて適用の可否を慎重に判断する必要があります。
ポップオーバー API を使用すると、コードがさらに簡潔になり、外部ライブラリへの依存性を減らすことができるため、コードの可読性やメンテナンス性の面で開発者に大きな助けとなります。しかし、ブラウザの互換性を考慮する必要があるため、プロジェクトの要件に応じて適切に活用することが重要です。