<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.
Want more support for this feature? Tell us why.
* Some parts of this feature may have varying levels of support.
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
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.
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
visibilitypropriedade 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.