From 19d5cc1cce807c4a685a1ca46d71c83b8337a589 Mon Sep 17 00:00:00 2001 From: Momdo Nakamura Date: Tue, 26 Oct 2021 13:39:56 +0900 Subject: [PATCH] =?UTF-8?q?dialog=E8=A6=81=E7=B4=A0=E3=81=AE=E3=82=B5?= =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=88=E7=8A=B6=E6=B3=81=E3=82=92=E5=86=8D?= =?UTF-8?q?=E7=B7=A8=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- md_text/3-10.md | 12 +++++------- md_text/4-4.md | 6 +----- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/md_text/3-10.md b/md_text/3-10.md index c7382da6..453c0895 100644 --- a/md_text/3-10.md +++ b/md_text/3-10.md @@ -81,16 +81,14 @@ Mac VOが「下位項目が非表示になりました、展開ボタン」と ## `dialog`要素 - `dialog`要素は、ユーザーがタスクを実行するときのインタラクションに用いるアプリケーションの一部分を表現します。簡単に言えば、ダイアログボックスやサブウィンドウなどを表現するのに使用します。 -注意: この要素はまだ十分にサポートされておらず、ブラウザーによっては意図どおりに動作しないことがあります。2021年10月時点において、Firefox 93はデフォルトでこの要素をサポートしておらず、動作させるためには設定変更を行って`dom.dialog_element.enabled`を有効する必要があります。 +この要素はまだ十分にサポートされておらず、ブラウザーによっては意図どおりに動作しないことに注意してください。2021年10月時点において、FirefoxとSafariはこの要素をサポートしていません。なお、Firefoxは`about:config`で`dom.dialog_element.enabled`を有効にすることで動作します。[^1] + +[^1]: + +ブラウザーの種類を限定できる業務アプリでは問題なく利用できるかもしれませんが、そうでない場合、とくにSafariでサポートされていない機能を採用することは難しいでしょう。 以下は、ボタンを押すとダイアログが表示され、ダイアログ内のボタンを押すとダイアログが閉じる例です。 diff --git a/md_text/4-4.md b/md_text/4-4.md index bf50ce3c..ea7157f6 100644 --- a/md_text/4-4.md +++ b/md_text/4-4.md @@ -686,11 +686,7 @@ HTMLには、ダイアログを表示するための`dialog`要素が用意さ なお、初期状態でダイアログを隠す処理も実現されていますが、単にユーザーエージェントのスタイルシートで`dialog:not([open]){display:none;}`というスタイルが与えられているだけです。より強いセレクターで`display`プロパティを上書きすると、ダイアログが表示されてしまうこともあるので注意してください。 -`dialog`要素は非常に便利なのですが、残念なことに、`dialog`要素のブラウザーによるサポートはまだ不十分です。2021年10月時点で、iOSとmacOSのSafariが`dialog`要素をサポートしていません[^12]。 - -[^12]: - -ブラウザーの種類を限定できる業務アプリでは問題なく利用できるかもしれませんが、そうでない場合、Safariでサポートされていない機能を採用することは難しいでしょう。 +`dialog`要素は非常に便利ですが、2021年10月時点で、一部のブラウザーによるサポートはまだ不十分です。詳細については、Chapter3-10の`dialog`要素を参照してください。 ### WAI-ARIAを駆使した実装