blob: f08d879c4609b0c9e82458edfa439569a36ebcfe (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: '::backdrop'
slug: 'Web/CSS/::backdrop'
tags:
- CSS
- Layout
- Pano de fundo
- Pseudo-elemento
- Referencia
- Web
translation_of: 'Web/CSS/::backdrop'
---
<div>{{CSSRef}} {{SeeCompatTable}}</div>
<p>Cada elemento na <a href="https://fullscreen.spec.whatwg.org/#top-layer">camada superior</a> de uma pilha de elementos possui um {{Cssxref("pseudo-elementos", "pseudo-elemento")}} <dfn><code>::backdrop</code></dfn>. Esse pseudo-elemento é uma caixa renderizada imediatamente abaixo do elemento superior (e acima do elemento logo abaixo desse elemento, caso exista algum), dentro da camada superior.</p>
<p class="note">O pseudo-elemento <code>::backdrop</code> pode ser utilizado para criar um pano de fundo que esconde o conteúdo por trás de um elemento posicionado no topo de uma pilha de elementos. Por exemplo, para o elemento que é mostrado em tela cheia conforme descrito nessa especificação.</p>
<p>Ele não herda de nenhum elemento e também não é herdado. Não há restrição de propriedades que podem ser aplicadas a esse pseudo-elemento. </p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
<td>{{Spec2('Fullscreen')}}</td>
<td>Definição inicial</td>
</tr>
</tbody>
</table>
<h2 id="Copatibilidade_com_navegadores">Copatibilidade com navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>32.0 {{property_prefix("webkit")}}<br>
37.0</td>
<td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td>
<td>11 {{property_prefix("ms")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>em um <code><dialog></code></td>
<td>32.0 {{property_prefix("webkit")}}<br>
37.0</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>em tela cheia</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td>
<td>11 {{property_prefix("ms")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>em um <code><dialog></code></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>em tela cheia</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Ver {{bug(1064843)}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{cssxref(":fullscreen")}}</li>
<li>{{HTMLElement("dialog")}}</li>
</ul>
|
