かつてはJavaScriptライブラリに頼るのが当たり前だったモーダルUIが、いまやHTML標準の要素だけで実装できるようになった。CSS-TricksのGeoff Grahamが、この一見小さな要素に潜む数々の細やかな挙動を整理している。デザイナーとフロントエンド実装者の双方にとって、押さえておきたい実践知が詰まった内容である。
要素はデフォルトで閉じており、属性を付けるかJavaScriptのメソッドを呼ぶことで表示される。開き方には二種類あり、は背景の暗幕や中央寄せを伴わない非モーダルのポップアップを、は暗幕・自動中央寄せ・Escキーによる閉止を備えた本来のモーダルを生成する。閉じる手段も、Escキー、メソッド、を指定したフォーム、さらに実験的な／属性による宣言的な呼び出しと、複数用意されている。
スタイリングでは注意すべき勘所がいくつかある。素の要素セレクタではなく属性や擬似クラスを狙うこと、背景の暗幕は擬似要素で別途スタイルし、ぼかしや不透明度を調整できること、そしてデフォルトの余白を上書きして位置を整えることが挙げられる。背景のスクロールを抑えたい場合は、ダイアログ側に、加えてを組み合わせるのが有効だ。
アクセシビリティ面も見逃せない。閉じるボタンには視覚的に隠したテキストラベルを添え、アイコンにはを指定する。モーダル表示時には背景コンテンツへ自動的にが適用され、裏側の要素が操作できなくなる点も、標準要素ならではの利点である。
一方で落とし穴も存在する。状態のセレクタを使わないとカスタムスタイルが効かないこと、をから変更するとモーダルの機能が失われること、入場アニメーションにはが必須であること、そして退場アニメーションではView Transitions APIが最上位レイヤーの要素に対して安定して動作しないことなどだ。標準化が進むほど、こうした細部の理解が実装品質を左右する。
