ポピン＆＃039;で

ねえ！お久しぶりです！ 飛び込んで挨拶したかっただけです。 ？

「ポップ」について言えば、私は新しいポップオーバーAPIを試してきました。 2018年に最初に言及しましたが、最新のブラウザでの完全なサポートは最近（2024年4月）です。

最初に、専用の

HTML要素が計画されていました。 Chromiumは2021年9月までこれに取り組んでいましたが、最終的には<popover></popover>属性に置き換えられました。これは理にかなっています。どの要素がポップオーバーとして機能するようになったため、属性を追加するだけです。popover

`` html

<code>
Here's an interesting observation: a simple element like this:

```html
<div>?</div></code>

...正常に表示されます。 ただし、popover属性を追加することはそれを隠します！ これは最初は私を混乱させましたが、DevToolsはそれが予想される行動であることを確認しました。

複数のポップオーバーが可能であり、IDS：

によって区別されます

ポップオーバーをアクティブにするには、「トリガー」が必要です。 別の属性は、任意のボタン（またはボタンのような要素）をこのトリガーに変換します：

<div popover="id1"></div>
<div popover="id2"></div>

ボタンをクリックすると、ポップオーバーの可視性が切り替わります。 CSSは可視性ロジックを処理し、クリックイベントに集中できます。 たとえば、厚い黒い境界線は、ポップオーバーが開くときのデフォルトのスタイルです。

<button>Say Hello!</button>
<div popover="">?</div>

devtoolsは、他の興味深い詳細を明らかにしています。ポップオーバーの幅と高さは、

であっても、インライン要素のように振る舞います。それはコンテンツのサイズであり、すべてカスタムCSSなし！

デフォルトの境界線を削除することは、

ほど簡単ではありません。 display: blockpseudo-classスタイルは要素を開いているときにのみ

のみです。

または、border: 0;属性を選択します：:popover-open これにより、オープンステートにアニメーションを追加できます（Jheyのデモに触発されました）。 さらに、ポップオーバーには、視覚効果については、

に類似した可能性は膨大です！ CSSの可視性を処理すると、ツールチップがはるかに簡単になります。 ミシェル・バーカーは、これはホバーツールチップよりも「トググレット」（クリック制御）であると指摘しています。彼女の投稿は、CSSアンカーポジショニングとどれだけうまく統合されているかを示しています（サポートが増加するにつれて）。 [popover] Jheyのもう1つの素晴らしいリソースは、ポップオーバーがポップオーバーに限定されないことを強調しています。スライドアウトメニューのように、可視性を切り替えた他のUI要素に対して再利用できます。 それは遅れており、探索することはもっとたくさんありますが、この最初の進出でさえ有望です。 これは、さらなる学習のためのリソースのリストです：

/* All popovers */
[popover] { border: 0; }

/* Specific popover */
#wave[popover] { border: 0; }

/* Equivalent to :popover-open */
#wave:popover-open { border: 0; }

ポップオーバーのアクセシビリティ：ブラウザの動作（hidde de vries）

::backdropモーダル（hidde de vries）に<dialog></dialog>および

を使用しています

UIを開き、ポップオーバーAPI（brecht de ruyte）

ポップオーバーとダイアログ（Adrian Roselli）

Advanced Form Control Styling（Brecht de ruyte）

HTMLツールチップ（Chris Coyier）
• のポップオーバーAPI
Popover APIと（logrocket）
• の比較 popover <dialog></dialog>私をポップインしてくれてありがとう！

以上がポピン＆＃039;での詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。