🖼️
dialog要素で簡易Lightbox風の表示を実装する
モダンブラウザでdialog要素の実装が出揃い、Baselineが整いました。
dialog要素はBaselineになった
従来は何かしらライブラリを導入したりスクラッチしたりする必要があったことが、ブラウザ側の機能が拡充されていくことで、何かしら特別に導入することなく簡易に実装できるようになってきました。
たとえば、WebサイトのよくあるUIとして、画像を拡大表示したいときにLightboxと呼ばれるライブラリを使うないしは同等の表示をする別ライブラリを導入したりはよくあるパターンです。
https://lokeshdhakar.com/projects/lightbox2/
アニメーションといった細かい挙動まで真似するのは面倒ですが、「クリックすると暗転して画像を大きく表示する」というだけの動作であればdialog要素でサクッと実装できました。
dialog要素による簡易なLightbox風実装
単純なHTML,CSS,JSのみで実装しているので、アニメーションについてもCSSで実装すればそれなりなものができそうです。
Discussion