CSS の ::backdrop 疑似要素は、 全画面モードで描画される何らかの要素のすぐ下層（スタック内で下層に要素が存在する場合は、それより上層）に描画されるボックスです。
/* Backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */
dialog::backdrop {
background: rgba(255,0,0,.25);
}
全画面要素はトップレイヤーのスタックの一部で、すなわち他のあらゆるコンテンツの前に描画されます。 ::backdrop 疑似要素は下の要素にスタイルを適用したり隠したりすることができます。
::backdrop 疑似要素はどの要素にも継承せず、どの要素からも継承しません。この疑似要素に適用するプロパティの制限はありません。
構文
::backdrop
仕様書
ブラウザー実装状況
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本対応 | 37 32
-webkit-
|
あり
-ms-
| 47 | 11
-ms-
|
なし |
なし |
Support on dialog elements | 32 |
なし |
なし |
なし |
なし |
なし |
| Fullscreen support |
なし |
あり | 47 | 11 |
なし |
なし |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|
| 基本対応 |
なし |
? |
あり
-ms-
| 47 |
なし |
なし |
? |
Support on dialog elements |
なし |
? |
なし |
なし |
なし |
なし |
? |
| Fullscreen support |
なし |
? |
あり | 47 |
なし |
なし |
なし |
| デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet |
|---|
| 基本対応 | Chrome
完全対応
37-
完全対応
37
-
完全対応
32
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Edge
完全対応
あり-
完全対応
あり
- 接頭辞付き -ms- のベンダー接頭辞が必要
| Firefox
完全対応
47 | IE
完全対応
11-
完全対応
11
- 接頭辞付き -ms- のベンダー接頭辞が必要
| Opera
未対応
なし | Safari
未対応
なし | WebView Android
未対応
なし | Chrome Android
?
| Edge Mobile
完全対応
あり-
完全対応
あり
- 接頭辞付き -ms- のベンダー接頭辞が必要
| Firefox Android
完全対応
47 | Opera Android
未対応
なし | Safari iOS
未対応
なし | Samsung Internet Android
?
|
|---|
Support on dialog elements | Chrome
完全対応
32 | Edge
未対応
なし | Firefox
未対応
なし | IE
未対応
なし | Opera
未対応
なし | Safari
未対応
なし | WebView Android
未対応
なし | Chrome Android
?
| Edge Mobile
未対応
なし | Firefox Android
未対応
なし | Opera Android
未対応
なし | Safari iOS
未対応
なし | Samsung Internet Android
?
|
|---|
| Fullscreen support | Chrome
未対応
なし | Edge
完全対応
あり | Firefox
完全対応
47 | IE
完全対応
11 | Opera
未対応
なし | Safari
未対応
なし | WebView Android
未対応
なし | Chrome Android
?
| Edge Mobile
完全対応
あり | Firefox Android
完全対応
47 | Opera Android
未対応
なし | Safari iOS
未対応
なし | Samsung Internet Android
未対応
なし |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
-
実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報