HTMLダイアログ要素を使用したいくつかの実践

これは、HTMLの私の最初の外観です<dialog></dialog>要素。私はしばらくそれについて知っていましたが、今までそれを使用していませんでした。いくつかの印象的な機能を提供します。生産で使用する必要があるかどうかを明確に言うことはできませんが、ますます実行可能になっています。

セマンティクスを超えて：APIおよび専門のCSS

<dialog></dialog>ブラウザのサポートがその有用性に大きな影響を与えるため、Elementは際立っています。以前のHTML5要素とは異なり、その機能は基本的な選択肢で簡単に複製されません。単にそれを意味的に強化されたものとして単純に扱うことはできません<div>。その機能はそれをはるかに超えています。<h3 id="ブラウザのサポート-現在のランドスケープ">ブラウザのサポート：現在のランドスケープ</h3> <p>執筆時点で：</p> <ul> <li> Chromeはそれをサポートしています（バージョン37）。エッジのサポートは差し迫っています。</li> <li> Firefoxにはユーザーエージェント（UA）スタイル（バージョン69）がありますが、完全な機能には<code>dom.dialog_element.enabledフラグが必要です。それでも、CSSサポートは不完全に見えます。

Safariにはサポートがありません。

ポリフィルが利用可能です。より広範なサポートが望ましいが、既存のサポートとポリフィルリングが組み合わせる<dialog></dialog>多くの開発者にとって魅力的なオプション。

オープンまたはクローズ：基本状態

<dialog>
  私は閉じています。
</dialog>
<dialog open="">
  私はオープンです。
</dialog>

ユーザーエージェントスタイリング：基礎

ChromeとFirefoxは、UA StyleSheetから同様のデフォルトのスタイリングを示しています。自動マージン、厚い黒い境界線、コンテンツベースのサイジングを中心としています。これらのスタイルは、サイトのデザインに合わせてカスタムCSSで簡単にオーバーライドされます。

JavaScript API：プログラマティックコントロール

dialog要素の参照が与えられます：

 dialog.show（）;
dialog.hide（）;

モーダルの動作については、使用してください。

 dialog.showmodal（）;

showModal()背景を管理し、ネストされたモーダルを許可する「保留中のダイアログスタック」と対話します。

HTMLベースの閉鎖：フォーム提出

ダイアログを閉じることは、その中にフォームを送信することで実現できます。

近い

背景：視覚的な手がかり

プログラムで開くa<dialog></dialog>自動的に背景を提供します。外観は::backdrop pseudo-elementを使用してカスタマイズ可能です。たとえば、デフォルトの半透明の黒い背景を赤いストライプに置き換えるには：

クールなボーナス： backdrop-filterバックグラウンドブラーのような効果を有効にします。

フォーカス管理：アクセシビリティの考慮事項

<dialog></dialog>Elementは、開いたときに自動的に自分自身にフォーカスをシフトします（MacOSのナレーションでテストされます）。本質的にトラップフォーカス（理想的にはモーダルに適している）はありませんが、CSSテクニックはこれを達成できます。

ロブ・ドドソンは、モーダルを「ウェブアクセシビリティの終わりにおけるボスバトル」と適切に説明しました。ネイティブ<dialog></dialog>Elementは、自動<kbd>Escape</kbd>キークロージャーなど、この課題を大幅に簡素化します。外側をクリックして閉じることはまだサポートされていませんが、将来の更新はユーザーのフィードバックに基づいてこれに対応する可能性があります。 IREの記事は、アクセス可能なカスタムダイアログの構築に関する非常に貴重な洞察を提供します。

以上がHTMLダイアログ要素を使用したいくつかの実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。