HTML ダイアログ要素のためのいくつかの CSS トリック

最近、HTML の <dialog></dialog> 要素を試しています。これは、JavaScript をあまり使用しないネイティブ ダイアログに非常に便利です。

その仕組みをすぐに確認したい場合は、My Games Jumblie にアクセスし、上部にある [設定] 歯車ボタンをクリックしてください。

わかりました!ここでは、ウェブサイトに独自の <dialog></dialog> を実装する際に役立つヒントをいくつか紹介します。

ぼやけた<dialog></dialog>背景

::backdrop CSS 疑似要素は <dialog></dialog> に限定されません。自由にスタイルを設定できますが、シンプルに保ちたい場合は、次のようなぼかしフィルターを追加して、背景をわずかにぼかすことができます:

<code>dialog::backdrop {
  backdrop-filter: blur(2px);
}</code>

もちろん、background-color などの他の属性を追加することもできます。これについてさらに詳しく知りたい場合は、JavaScript を使用した疑似要素のスタイル設定に関する記事も書きました。

<dialog></dialog>

を開いたときにページのスクロールを無効にする

これはクールな特別なセレクターです。 <dialog></dialog> をオンにすると、タグに open 属性が追加されます。

<code>body:has(dialog[open]) {
  overflow: hidden;
}</code>

このセレクターは、body に open 属性を持つ <dialog></dialog> が含まれているかどうかをチェックします。 「はい」の場合は、ページのスクロールを無効にしてください。もちろん、奇妙なことに、ダイアログの高さが高い場合は、ダイアログ内でのスクロールを個別に有効にする必要があるかもしれませんが、これにより、スクロール時にダイアログの後ろのページが動き回るのを防ぐことができます。

それだけです！これがお役に立てば幸いです!

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