diff options
Diffstat (limited to 'files/pt-br/web/css/display-box/index.html')
| -rw-r--r-- | files/pt-br/web/css/display-box/index.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/files/pt-br/web/css/display-box/index.html b/files/pt-br/web/css/display-box/index.html new file mode 100644 index 0000000000..7aec5790c6 --- /dev/null +++ b/files/pt-br/web/css/display-box/index.html @@ -0,0 +1,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> |