<display-box>

Essas palavras-chave definem se um elemento gera caixas de exibição.

Sintaxe

contents

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 contents

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.

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.

none

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. Para que um elemento ocupe o espaço que normalmente ocuparia, mas sem renderizar nada, use o visibility propriedade em vez disso.

Sintaxe formal

<display-box> = 
  contents  |
  none

Exemplos

Neste primeiro exemplo, o parágrafo com uma classe de segredo é definido como display: none; a caixa e qualquer conteúdo agora não são renderizados.

display: none

HTML

html
<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS

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

html
<div class="outer">
  <div>Inner div.</div>
</div>

CSS

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 um display valor de contents. 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.

Compatibilidade com navegadores

Support of contents

BCD tables only load in the browser

Veja também