<display-box>
Essas palavras-chave definem se um elemento gera caixas de exibição.
Sintaxe
contents
Experimental-
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
<p>Visible text</p>
<p class="secret">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 class="outer">
<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 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