:popover-open

Baseline 2025
Newly available

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

:popover-openCSS擬似クラスで、ポップオーバー要素(すなわち popover 属性のあるもの)が表示中の状態であることを表します。これを使用して、ポップオーバー要素が表示中の場合だけスタイルを適用することができます。

構文

css
:popover-open {
  /* ... */
}

既定では、ポップオーバーはビューポートの中央に現れます。既定のスタイルでは、UA スタイルシートでこのように実現されています。

css
[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}

既定値のスタイルを上書きして、ビューポートの他の場所にポップオーバーが現れるようにするには、上記のスタイルを次のように上書きする必要があります。

css
:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}

仕様書

Specification
HTML
# selector-popover-open
Selectors Level 4
# selectordef-popover-open

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:popover-open

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報