::backdrop エレメント
::backdrop エレメントは、以下の条件において対象となるエレメントの直下のレイヤー
のスタイルを指定するための CSS の疑似エレメントです。
- Fullscreen API の requestFullscreen() 関数を使用して全画面にした時
- <dialog> エレメントを showModal() 関数で開いた時
- HTMLElement.showpopover() 関数によって Popover として設定された最上位レイヤーのエレメント
#example::backdrop {
background-color: orange;
}
Linux、Windows ブラウザにおいてはF11キー
、Mac ではcommand + control + F
で全画面モードになります。
ページ内 Index
構文(Syntax)
CSS
HTMLElement::backdrop {
style_propaties;
}
DOM ( JavaScript )
疑似エレメントはDOM ( JavaScript )から操作できません。
場合によっては、スクリプトを利用するより擬似エレメントを利用したほうが簡易です。
Example
::backdrop 疑似エレメントの例です。
::backdrop 疑似エレメントは全画面表示されたエレメントの直下のスタイルを指定するためのものです。ただし、.requestFullscreen() 関数によって全画面表示された場合に限ります。
上記の例では <div> エレメントを全画面表示に切り替えています。この例での <div> エレメントの場合はサイズが指定できないようです。そのために ::backdrop による背景色のみがみえています。
現在、フルスクリーン（全画面）モードは document.fullscreen から Fullscreen API の扱いになりました。CSS はこちらの設定を取得するようです。
<dialog> における例
<dialog> での showModal() メソッドにおける ::backdrop 疑似エレメントの例です。
以下の例はダイアログの表示
ボタンをクリックすることで showModal() メソッドによってダイアログが表示されます。::backdrop 疑似エレメントによって背景が orange に表示されます。
::backdrop 疑似エレメントについて詳しくは::backdrop エレメント
ページを参照してください。