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
|
---
title: <display-box>
slug: Web/CSS/display-box
translation_of: Web/CSS/display-box
---
<div>{{CSSRef}}</div>
<p class="summary">Essas palavras-chave definem se um elemento gera caixas de exibição.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<dl>
<dt><code>contents</code> {{Experimental_Inline}}</dt>
<dd>Esses elementos não produzem uma caixa específica por si mesmos. Eles são substituídos por sua pseudo-caixa e suas caixas filho. Observe que a especificação CSS Display Level 3 define como o <code>contents</code>
<p>o valor deve afetar "elementos incomuns" - elementos que não são renderizados apenas pelos conceitos da caixa CSS, como elementos substituídos. Consulte o Apêndice B: Efeitos da exibição: conteúdo em Elementos incomuns para obter mais detalhes.</p>
<p>Devido a um erro nos navegadores, atualmente isso remove o elemento da árvore de acessibilidade - os leitores de tela não analisam o que está dentro. Consulte a seção Preocupações com acessibilidade abaixo para obter mais detalhes.</p>
</dd>
<dt><code>none</code></dt>
<dd>Desativa a exibição de um elemento para que não tenha efeito no layout (o documento é renderizado como se o elemento não existisse). Todos os elementos descendentes também têm a exibição desativada.<br>
Para que um elemento ocupe o espaço que normalmente ocuparia, mas sem renderizar nada, use o {{CSSxRef("visibility")}} propriedade em vez disso.</dd>
</dl>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
<pre class="syntaxbox">{{CSSSyntax}}</pre>
<h2 id="Exemplos">Exemplos</h2>
<p>Neste primeiro exemplo, o parágrafo com uma classe de segredo é definido como <code>display: none</code>; a caixa e qualquer conteúdo agora não são renderizados.</p>
<h3 id="display_none">display: none</h3>
<h4 id="HTML">HTML</h4>
<div id="Hide_element">
<pre class="brush: html"><p>Visible text</p>
<p class="secret">Invisible text</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">p.secret {
display: none;
}</pre>
<h4 id="Resultado">Resultado</h4>
<p>{{EmbedLiveSample("Hide_element", "100%", 60)}}</p>
</div>
<div id="Display_contents">
<h3 id="display_contents">display: contents</h3>
<p>Neste exemplo, o externo {{htmlelement("div")}} possui uma borda vermelha de 2 pixels e uma largura de 300 px. No entanto, também tem<code>display: contents</code> especificado, portanto, este <code><div></code> não será renderizado, a borda e a largura não serão mais aplicadas e o elemento filho será exibido como se o pai nunca tivesse existido.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div class="outer">
<div>Inner div.</div>
</div>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">.outer {
border: 2px solid red;
width: 300px;
display: contents;
}
.outer > div {
border: 1px solid green;
}
</pre>
<h4 id="Resultado_2">Resultado</h4>
<p>{{EmbedLiveSample("Display_contents", 300, 60)}}</p>
</div>
<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2>
<p>As implementações atuais na maioria dos navegadores removerão da árvore de acessibilidade qualquer elemento com um <code>display</code> valor de <code>contents</code>. Isso fará com que o elemento - e em algumas versões do navegador, seus elementos descendentes - não sejam mais anunciados pela tecnologia de leitura de tela. Esse é um comportamento incorreto de acordo com a especificação CSSWG.</p>
<ul>
<li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Marcação mais acessível com display: conteúdo | Hidde de Vries</a></li>
<li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Exibição: conteúdo não é uma redefinição de CSS | Adrian Roselli</a></li>
</ul>
<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div>
<h3 id="Support_of_contents">Support of <code>contents</code></h3>
<p>{{Compat("css.properties.display.contents", 10)}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{CSSxRef("display")}}
<ul>
<li>{{CSSxRef("<display-outside>")}}</li>
<li>{{CSSxRef("<display-inside>")}}</li>
<li>{{CSSxRef("<display-listitem>")}}</li>
<li>{{CSSxRef("<display-internal>")}}</li>
<li>{{CSSxRef("<display-legacy>")}}</li>
</ul>
</li>
<li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Exibição: conteúdo não é uma redefinição de CSS | Adrian Roselli</a></li>
<li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Marcação mais acessível com display: contents - hiddedevries.nl</a></li>
</ul>
|
