A visibilitypropriedade em CSS tem duas funções diferentes. Ele oculta linhas e colunas de uma tabela e também oculta um elemento sem alterar o layout.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilitytem quatro valores válidos: visible, hidden, collapse, e inherit. Examinaremos cada um deles para aprender mais.
visível
Exatamente como parece, visibletorna as coisas visíveis. Nada é oculto por padrão, portanto, esse valor não faz nada a menos que você tenha definido hiddenneste ou em um pai deste elemento.
escondido
O hidden valor esconde coisas. Isso é diferente de usar display: none, porque hidden apenas oculta os elementos visualmente. O elemento ainda está lá e ainda ocupa espaço na página, mas você não pode mais vê-lo (como se fosse mudar a opacidade para 0). Curiosamente, essa propriedade não herda por padrão. Isso significa que, ao contrário das propriedades display ou opacity, você pode criar um elemento hiddene ainda ter um de seus filhos como visible, assim:
Observe que, embora oculto, o elemento pai não aciona o :hover.
colapso
Este afeta apenas as linhas da tabela ( ), os grupos de linhas (como ), as colunas ( ), os grupos de colunas ( ) ou os elementos feitos para ser assim por meio de display).
Ao contrário hidden, este valor oculta o subelemento da tabela, sem deixar o espaço onde estava. Se usado em qualquer lugar, exceto em um subelemento da tabela, ele atua como visibility: hidden.
Existem tantas peculiaridades que é difícil saber por onde começar. Como aperitivo:
- O Chrome / Safari entrará em colapso, mas o espaço que ocupou permanecerá. E se as células internas da tabela tiverem uma borda, ela se reduzirá em uma única borda na borda superior.
- O Chrome / Safari não recolherá uma coluna ou grupo de colunas.
- O Safari reduz uma célula da tabela (errado), mas o Chrome não (certo).
- Em qualquer navegador, se uma célula estiver em uma coluna que está contraída (seja ou não realmente contraída), o texto dessa célula não será exibido.
- O Opera (pré WebKit) irá recolher a porcaria de tudo, exceto uma célula da tabela (que é correto).
Há mais, mas basicamente: não use isso nunca.
herdar
O valor padrão. Isso simplesmente faz com que o elemento herde o valor de seu pai.
Flexbox
visibility: collapse; é usado no Flexbox também, e mais bem definido.
Suporte para navegador
O básico, sem considerar todas as peculiaridades do colapso:
| Nenhum | Nenhum | Nenhum | 4+ | 4+ | Nenhum | Nenhum |
IE 7- não suporta collapseou inherit.