Visibilidade do conteúdo CSS

A linguagem CSS está repleta de pequenas lacunas que são frustrantes de navegar. Entre as propriedades CSS para ocultar um contêiner e seu conteúdo, ainda há espaço para melhorias. visibility: hidden mantém a integridade da altura e da largura, enquanto o display: none em um contêiner oculta tudo. O senhor pode usar o .container > * para ocultar todo o conteúdo de um contêiner, mas e se houvesse uma maneira melhor?

Há uma maneira melhor de ocultar o conteúdo de um elemento, respeitando a borda e as dimensões do contêiner. Essa melhor maneira é usar o content-visibility propriedade:

.my-container.contents-loading {
  content-visibility: hidden;
}

Uma demonstração dessa funcionalidade:

Veja a caneta Sem título por David Walsh (@darkwing) em CodePen.

Evitando um .container > * usando o seletor content-visibility: hidden é muito melhor do ponto de vista da manutenção!