Dominar todas as propriedades CSS pode ser um desafio, dada a sua vastidão. Uma das propriedades essenciais para qualquer desenvolvedor web é a visibilidade do CSS, crucial para o controle da apresentação dos elementos.
Este artigo visa esclarecer o conceito de visibilidade CSS, ressaltando sua importância e detalhando seus diversos valores.
O que é Visibilidade CSS?
A propriedade de visibilidade em CSS permite que você exiba ou oculte um elemento em uma página web. Imagine ter quatro caixas; essa propriedade define como cada uma será mostrada. Quando a visibilidade é configurada como “visível”, todos os elementos são exibidos normalmente.
Por outro lado, se a propriedade de um elemento for definida para ocultar, ele não será exibido na tela do navegador, mas ainda ocupará o espaço destinado a ele na estrutura da página.
A visibilidade em CSS desempenha um papel vital em diversas situações:
- Controle de Exibição: Permite gerenciar o conteúdo exibido de acordo com as ações ou o status do usuário, como mostrar um elemento ao passar o mouse ou clicar em um botão.
- Preservação do Layout: Garante que o layout e a estrutura da página se mantenham consistentes, mesmo quando elementos são ocultados, pois esses continuam a ocupar seu espaço.
- Otimização do Desempenho: Evita que o navegador recalcule o layout a cada alteração, pois com “visibility: hidden” o elemento permanece no fluxo. Quando se usa “display: none”, o navegador precisa refazer o layout sempre que o elemento é mostrado novamente, o que é menos eficiente.
- Criação de Interfaces Dinâmicas: Permite combinar visibilidade com outras propriedades CSS (como opacidade) para criar efeitos de transição, animações e fades suaves, enriquecendo a experiência do usuário.
Diferentes Valores de Visibilidade CSS
A propriedade de visibilidade CSS oferece cinco valores distintos. Para melhor compreensão, preparei exemplos práticos. Se quiser acompanhar, siga os passos:
- Crie uma pasta em seu computador.
- Dentro dela, crie dois arquivos: “index.html” e “styles.css”.
- Abra o projeto no seu editor de código preferido (eu utilizo o VS Code).
Você pode usar o seguinte comando para isso:
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Em seguida, vincule os arquivos “index.html” e “styles.css”. Adicione o seguinte código dentro da seção <head> do seu arquivo “index.html”:
<link rel="stylesheet" href="styles.css">
Com isso, seu editor de código deverá apresentar uma estrutura semelhante.
Visível
Quando um elemento tem sua visibilidade definida como “visível”, ele é exibido na página. Este é o estado padrão. Para ilustrar, podemos criar três caixas no nosso arquivo HTML. Dentro da tag <body> do “index.html”, inclua:
<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Agora, podemos estilizar as divs (caixas) com o seguinte código CSS:
.container {
padding: 15px;
width: max-content;
display: flex;
border: 1px solid black;
}
.box1,
.box2,
.box3 {
height: 30px;
width: 100px;
}
.box1 {
background-color: rgb(224, 49, 209);
margin-right: 15px;
}
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
}
.box3 {
background-color: rgb(154, 43, 12);
}
A página renderizada exibirá algo parecido com isso:
Definir a visibilidade das caixas para “visível” não terá efeito inicial, pois elas já são exibidas por padrão.
Podemos demonstrar o funcionamento da propriedade “visible” usando a propriedade “display: none” em uma das caixas. Vamos selecionar “box3” como exemplo. Modifique o CSS da classe “.box3”:
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Ao atualizar a página, você verá que apenas as caixas “1” e “2” são exibidas.
Observe que o elemento “.container” diminuiu de tamanho. Isso acontece porque ao usar “display: none”, a “Caixa 3” é removida do fluxo, liberando espaço para outras caixas.
Oculto
Quando a propriedade CSS “visibility: hidden” é aplicada a um elemento, ele se torna invisível para o usuário. No entanto, o elemento continua a ocupar o espaço reservado a ele. Por exemplo, vamos ocultar a “Box2” usando essa propriedade.
Para isso, altere o CSS da “Box2”:
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
A única alteração foi adicionar a linha:
visibility: hidden
A página final será exibida da seguinte forma:
É possível notar um espaço entre a “Caixa 1” e a “Caixa 3”, que é o espaço reservado para a “Caixa 2”, agora invisível.
Ao inspecionar a página, vemos que a “Caixa 2” continua presente no DOM.
Colapso
O valor “collapse” de visibilidade é usado para subelementos, especialmente em tabelas HTML. Vamos adicionar o seguinte código para criar uma tabela em nosso arquivo HTML:
<table>
<tr>
<th>Programming Language</th>
<th>Framework</th>
</tr>
<tr>
<td>JavaScript </td>
<td>Angular </td>
</tr>
<tr class="hidden-row">
<td>Ruby </td>
<td>Ruby on Rails</td>
</tr>
<tr>
<td>Python </td>
<td>Django </td>
</tr>
</table>
Agora, podemos estilizar a tabela com uma borda de 1px em todas as células. Adicione isso ao arquivo CSS:
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
A tabela renderizada terá a seguinte aparência:
Vamos ocultar a segunda linha para demonstrar o funcionamento do atributo “visibility: collapse”. Adicione o seguinte ao CSS:
.hidden-row {
visibility: collapse;
}
Ao renderizar a página, a linha com Ruby e Ruby on Rails desaparecerá.
Inicial
A propriedade “visibility: initial” restaura um elemento HTML ao seu valor padrão. Veja:
- Inicialmente, todas as linhas da tabela são exibidas.
- Usamos “collapse” para ocultar a linha 2.
- Agora, podemos restaurá-la ao seu valor inicial (visível).
Vamos adicionar um botão que alterna entre os valores de exibição e colapso para demonstrar isso.
Adicione o seguinte botão no HTML:
<button onclick="toggleVisibility()">Click Me!!</button>
Podemos adicionar uma função JavaScript que procura a classe “.hidden-row” e alterna a classe “.visible-row” quando o botão é clicado.
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
Adicione este código ao seu arquivo CSS:
.visible-row {
visibility: initial;
}
O valor de visibilidade da linha alternará a cada clique no botão.
Herdar
A propriedade “visibility: inherit” permite que um elemento filho herde a propriedade de exibição do elemento pai.
Podemos usar este código para ilustrar o funcionamento dessa propriedade:
<h1>Inherit Demo</h1>
<div style="visibility: hidden">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
Ao renderizar a página, somente o conteúdo dentro das tags <h1> e <p> será visível. Haverá um espaço representando o elemento oculto entre as tags <h1> e <p>.
O <div> tem sua visibilidade definida como “hidden”. A tag <h2> dentro da div tem visibilidade “inherit”, que herda do pai, o <div>.
Entretanto, se a propriedade do <div> for definida como “visible”, o <h2> (seu filho) também herdará essa visibilidade.
<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
Visibilidade CSS: oculto vs. Exibição: nenhum
A principal diferença entre “display: none” e “visibility: hidden” é que o primeiro remove o elemento totalmente do layout, enquanto o segundo oculta o elemento, mas ainda reserva o seu espaço.
Este código ilustra essa diferença:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgray;
margin-right: 20px;
}
.box1 {
background-color: lightblue;
}
.box2 {
background-color: black;
}
.container {
padding: 10px;
border :2px solid black;
padding-left: 20px;
width: 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>
Ao renderizar a página, duas caixas serão exibidas lado a lado:
A Exibição: nenhum demo
Adicione o seguinte à classe “.box1”:
display: none;
Ao atualizar a página, “.box1” não será mais exibido. A segunda caixa (preta) move-se para a esquerda para preencher o espaço anteriormente ocupado pela caixa azul.
A Visibilidade: demonstração oculta
Em vez de “display: none”, adicione o seguinte à classe “.box1”:
visibility: hidden
Com isso, um espaço é reservado para “box1”, embora ela não seja exibida. A “box2” mantém sua posição.
| display:none | visibility:hidden |
| Remove um elemento completamente da página | Oculta um elemento, mas ele continua ocupando espaço |
| Não é possível estilizar um elemento com “display:none” | É possível estilizar um elemento com “visibility: hidden” |
| Não acessível por leitores de tela | Acessível por leitores de tela |
Melhore a Acessibilidade com Visibilidade CSS
A visibilidade CSS pode ser usada para ocultar elementos não essenciais para alguns usuários. Por exemplo, você pode usar esse recurso para ocultar um formulário de login quando o usuário já está autenticado. Ou para criar barras laterais ou rodapés com termos de serviço ou informações de direitos autorais.
O código a seguir ilustra como melhorar a visibilidade:
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style>
.login-form {
display: none;
}
.login-text:hover + .login-form {
display: block;
}
.login-form label {
display: block;
margin-bottom: 5px;
}
.login-form input {
width: 30%;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p class="login-text">Login</p>
<form class="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Submit</button>
</form>
</body>
</html>
O formulário de login só se torna visível quando você passa o mouse sobre o elemento com a classe “login-text”.
Conclusão
Com este guia, você agora deve estar apto a utilizar a propriedade de visibilidade CSS em seus projetos, aplicando transições suaves e melhorando a acessibilidade das suas páginas web. É fundamental saber quando usar cada valor para evitar resultados inesperados e páginas confusas. Tenha cuidado ao usar a visibilidade, pois o uso inadequado pode ocultar dados importantes dos usuários.
Confira nossos outros guias e recursos de CSS para aprender mais sobre as propriedades que podem ser combinadas com a visibilidade CSS.