HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点

ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にダイアログボックスを使用できず、アクセシブルに実装するのは困難でした。

HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくダイアログ ボックスを利用できるようにするものです。
<dialog>要素で、ダイアログ ボックスを実装する方法と注意点を紹介します。

サイトのキャプチャ

Meet the New Dialog Element


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

HTML 5.2の新機能: ダイアログ ボックスを実装するための<dialog>要素

昨年暮れに勧告されたHTML 5.2で、ダイアログ ボックスを実装するための<dialog>要素が新しく加わりました。
参考: HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ

一見したところ、それはかなり簡単に思えるかもしれませんが、私は<dialog>要素を試しているうちに、見逃しやすい素晴らしい機能がいくつかあることに気がつきました。

この記事の最後に<dialog>要素で実装したデモを掲載していますが、先に動作を確認したい方は下記のデモページをチェックしてください。

サイトのキャプチャ

<dialog>要素のデモ

ダイアログ ボックスの基本的なマークアップは下記のようになります。

open属性は、ダイアログが可視であることを意味します。open属性がなければ、ダイアログを表示するためにJavaScriptを使用するまでダイアログは表示されません。

ダイアログはスタイルシートを適用する前は、下記のようにレンダリングされます。

ネイティブのダイアログ ボックス

ネイティブのダイアログ ボックス

ダイアログはページ上に絶対配置で、他のコンテンツの前に表示され、水平方向の中央に配置されます。ダイアログの幅はデフォルトでは、その中のコンテンツに依存されます。

<dialog>要素の基本機能

JavaScriptには、<dialog>要素を扱うためのメソッドとプロパティがいくつかあります。最も重要な2つのメソッドはshowModal()とclose()です。

showModal()を使用してダイアログを開くと、ページに背景が追加され、モーダル以外のコンテンツとのユーザーのやり取りがブロックされます。デフォルトでは、この背景は完全に透明ですが、CSSで表示することができます(詳細は後述)。

キーボードのescを押すとダイアログは閉じますが、close()メソッドをトリガーにして閉じるボタンを用意することもできます。

もう一つ便利なメソッドがあります。show()を使用すると、ダイアログは表示されますが、付随する背景はありません。ユーザーはダイアログ ボックスの外側に表示されているコンテンツと引き続きやり取りができます。

ブラウザサポートとポリフィル

現在のところ、<dialog>の動作はChromeでのみサポートされています。Firefoxはデフォルトのスタイルを提供しますが、フラッグ(サポートされていないけれど、使用可能)の状態です。私はFirefoxがすぐにサポートすると考えています。

ありがたいことに、JavaScriptビヘイビアとスタイルシートにデフォルトスタイルを提供するポリフィル「dialog-polyfill」があります。 npmにインストールするか、通常の古い<script>タグを使用してください。ポリフィルを使用すると、IE9以上で動作します。

ポリフィルを使用する場合は、ページ上の各ダイアログを初期化する必要があります。

注意点は、ブラウザのネイティブ動作ではないということです。

<dialog>要素のスタイル

ダイアログが開閉できるのは素晴らしいですが、デフォルトの動作はシンプルです。ダイアログにスタイルを加えることは他の要素に加えるのと同じくらい簡単です。
背景は、新しい::backdrop擬似要素でスタイルできます。

ただし、ポリフィルを使用する古いブラウザの場合、この::backdrop擬似要素は機能しません。その代わりに、ポリフィルではダイアログの直後に.backdrop要素を追加します。下記のようにCSSで背景を記述します。

スタイル用のフックが必要なため、もう少しマークアップを追加します。ダイアログ ボックスの一般的なアプローチは、ヘッダとボディとフッタに分割することです。

これにいくつかのCSSを記述することで、あなたが望むダイアログ ボックスの見た目を作ることができます

スタイルを適用したダイアログ ボックス

スタイルを適用したダイアログ ボックス

<dialog>要素のコントロール

ダイアログ ボックスを使用するユーザーからフィードバックを必要とすることがあると思います。ダイアログを閉じる時に、close()メソッドで文字列値を渡すことができます。この値はダイアログのDOM要素のreturnValueプロパティに割り当てられているため、参照することができます。

他にもイベントが利用できます。closeとcancelで、closeはダイアログが閉じられた時のトリガーで、cancelはダイアログを閉じるためにescを押した時のトリガーです。

背景をクリックした時にダイアログが閉じる機能がないと思うかもしれませんが、これには回避策があります。背景をクリックすると、<dialog>をイベントターゲットとしてクリックイベントが発生します。そして子要素がダイアログのスペース全体を満たすようにモーダルを構築すると、それらの子要素がダイアログ内のクリックのターゲットになります。これを利用して、ダイアログ上のクリックをチェックし、ダイアログ自体がクリックイベントのターゲットである時に閉じます。

この方法は完璧ではありませんが、機能します。背景でクリックを検出する方法が見つかったら、ぜひお知らせください。

<dialog>要素で実装するダイアログ ボックス

下記のデモに、私は<dialog>要素の多くの機能を盛り込みました。<dialog>で何ができるのか、確認してみてください。
ポリフィルを含んでいるので、IE9+で動作します。

See the Pen <dialog&rt; by Keith J. Grant (@keithjgrant) on CodePen.

sponsors

top of page

©2018 coliss