Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
<display-box>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janeiro de 2020.
* Some parts of this feature may have varying levels of support.
Essas palavras-chave definem se um elemento gera caixas de exibição.
Sintaxe
contentsExperimentalEsses 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
contentso 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.
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.
noneDesativa 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.Para que um elemento ocupe o espaço que normalmente ocuparia, mas sem renderizar nada, use o
visibilitypropriedade em vez disso.
Sintaxe formal
<display-box> =
contents|
none
Exemplos
Neste primeiro exemplo, o parágrafo com uma classe de segredo é definido comodisplay: none; a caixa e qualquer conteúdo agora não são renderizados.
display: none
HTML
<p>Visible text</p><p>Invisible text</p>CSS
p.secret { display: none;}Resultado
display: contents
Neste exemplo, o externo<div> possui uma borda vermelha de 2 pixels e uma largura de 300 px. No entanto, também temdisplay: contents especificado, portanto, este<div> 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.
HTML
<div> <div>Inner div.</div></div>CSS
.outer { border: 2px solid red; width: 300px; display: contents;}.outer > div { border: 1px solid green;}Resultado
Preocupações com acessibilidade
As implementações atuais na maioria dos navegadores removerão da árvore de acessibilidade qualquer elemento com umdisplay valor decontents. 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.