10 Maneiras de ocultar elementos em CSS
Existem múltiplas formas de ocultar um elemento em CSS, mas diferem na forma como afectam a acessibilidade, layout, animação, desempenho, e manipulação de eventos.
Animação
algumas opções de ocultar CSS são tudo ou nada. O elemento ou é totalmente visível ou totalmente invisível e não há nenhum estado intermediário. Outros, como a transparência, podem ter uma gama de valores, pelo que as animações CSS interpoladas se tornam possíveis.
Acessibilidade
Cada método descrito abaixo esconde visualmente um elemento, mas pode ou não esconder o conteúdo das tecnologias de assistência. Por exemplo, um leitor de ecrã pode ainda anunciar um pequeno texto transparente. Outras propriedades CSS ou atributos ARIA tais como aria-hidden="true" podem ser necessários para descrever a acção apropriada.
Cuidado que as animações também podem causar desorientação, enxaquecas, convulsões, ou outro desconforto físico para algumas pessoas. Considerar a utilização de uma consulta prefers-reduced-motion media para desligar as animações quando especificado nas preferências do utilizador.
Event Handling
Ocultação irá impedir que os eventos sejam desencadeados nesse elemento ou não terão efeito – isto é, o elemento não é visível mas ainda pode ser clicado ou receber outras interacções do utilizador.
Performance
Após um browser carregar e analisar o modelo de objecto HTML DOM e CSS, a página é renderizada em três etapas:
- Layout: gerar a geometria e posição de cada elemento
- Paint: desenhar os pixels de cada elemento
- Composição: posicionar as camadas do elemento na ordem apropriada
Um efeito que apenas provoca alterações na composição é visivelmente mais suave do que aqueles que afectam o layout. Em alguns casos, o navegador pode também usar aceleração de hardware.
opacidade e filtro: opacidade()
O opacity: N e filter: opacity(N) propriedades podem ser passadas um número entre 0 e 1, ou uma percentagem entre 0% e 100% denotando totalmente transparente e totalmente opaco em conformidade.
Ver a Caneta
hide with opacity: 0 by SitePoint (@SitePoint)
on CodePen.
Existe pouca diferença prática entre os dois em navegadores modernos, embora filter deva ser usado se forem aplicados múltiplos efeitos ao mesmo tempo (borrão, contraste, escala de cinzentos, etc.)
A capacidade pode ser animada e oferece grande desempenho, mas tenha cuidado que um elemento totalmente transparente permanece na página e pode desencadear eventos.
| metric | |
|---|---|
| suporte de navegador | bom, mas o IE apenas suporta opacity 0 a 1 |
| acessibilidade | content não lido se 0 ou 0% estiver definido |
| layout afectado? | no |
| rendering required | composição |
| performance | best, pode usar aceleração de hardware |
| quadros de animação possíveis? | yes |
| eventos desencadeados quando escondidos? | yes |
color Alpha Transparency
opacity afecta todo o elemento, mas também é possível definir as propriedades colorbackground-color, e border-color separadamente. Aplicar um canal alfa zero usando rgba(0,0,0,0) ou similar torna um item totalmente transparente:
Ver a Caneta
hide with color alpha by SitePoint (@SitePoint)
on CodePen.
Cada propriedade pode ser animada separadamente para criar efeitos interessantes. Note-se que a transparência não pode ser aplicada a elementos com fundos de imagem a menos que sejam gerados usando linear-gradient ou semelhante.
O canal alfa pode ser definido com:
-
transparent: totalmente transparente (entre animações não são possíveis) -
rgba(r, g, b, a): vermelho, verde, azul, e alfa -
hsla(h, s, l, a): tonalidade, saturação, leveza, e alfa -
#RRGGBBAAe#RGBA
| metric | |
|---|---|
| browser support | good, mas o IE apenas suporta transparent e rgba |
| acessibilidade | contente ainda lido |
| layout afectado? | no |
| rendering required | pintar |
bom, mas não tão rápido como opacity |
|
| quadros de animação possíveis? | yes |
| eventos desencadeados quando escondidos? | yes |
transformação
The transform property can be used to translate (move), scale, rotate, or skew an element. A scale(0) ou translate(-999px, 0px) off-screen irá esconder o elemento:
Veja a Caneta
hide with transform: scale(0); por SitePoint (@SitePoint)
on CodePen.
transform oferece excelente desempenho e aceleração de hardware porque o elemento é efectivamente movido para uma camada separada e pode ser animado em 2D ou 3D. O espaço de layout original permanece como está, mas nenhum evento será desencadeado por um elemento totalmente escondido.
| metric | |
|---|---|
| -suporte de browser | bom |
| acessibilidade | contente ainda lido |
| layout afectado? | não – as dimensões originais permanecem |
| composição | |
| best, pode usar aceleração de hardware | |
| quadros de animações possíveis? | yes |
| eventos desencadeados quando escondidos? | no |
clip-path
The clip-path property cria uma região de recorte que determina que partes de um elemento são visíveis. Usando um valor como clip-path: circle(0); irá esconder completamente o elemento.
Ver a Caneta
hide with clip-path by SitePoint (@SitePoint)
on CodePen.
clip-path oferece espaço para animações interessantes, embora só deva ser confiada em browsers modernos.
| metric | |
|---|---|
| -suporte de browser | apenas browsers modernos |
| content ainda lido por algumas aplicações | |
| não – as dimensões originais permanecem | |
| pintar | razoável |
| quadros de animação possíveis? | yes, em navegadores modernos |
| events triggered when hidden? | no |
visibilidade
O visibility propriedade pode ser definida para visible ou hidden para mostrar e esconder um elemento:
ver a Caneta
hide with visibility: hidden by SitePoint (@SitePoint)
on CodePen.
O espaço utilizado pelo elemento permanece no lugar a menos que seja utilizado um valor collapse.
| metric | |
|---|---|
| -suporte de browser | excellent |
| content não lido | |
não, a menos que collapse seja utilizado |
|
| rendering required | composição, a menos que collapse seja usado |
| performance | bom |
| quadros de animação possíveis? | não |
| eventos desencadeados quando escondidos? | no |
display
display é provavelmente o método de ocultação de elementos mais utilizado. Um valor de none remove efectivamente o elemento como se nunca tivesse existido no DOM.
Veja a Caneta
hide with display: none by SitePoint (@SitePoint)
on CodePen.
No entanto, é possivelmente a pior propriedade CSS a utilizar na maioria dos casos. Não pode ser animada e desencadeará um layout de página a menos que o elemento seja movido para fora do fluxo de documentos usando position: absolute ou a nova propriedade contain seja adoptada.
display é também sobrecarregado, com opções como blockinlinetableflexboxgrid e mais. A reposição ao valor correcto após display: none; pode ser problemática (embora unset possa ajudar).
| metric | |
|---|---|
| -suporte de browser | excellent |
| content não lido | |
| yes | |
| rendering required | layout |
| no |
HTML hidden attribute
The HTML hidden attribute can be added to any element:
<p hidden> Hidden content</p>para aplicar o estilo padrão do navegador:
{ display: none;}Esta tem os mesmos benefícios e falhas que display: none, embora possa ser útil quando se utiliza um sistema de gestão de conteúdos que não permite mudanças de estilo.
Posição absoluta
A propriedade position permite que um elemento seja movido do seu padrão static posição dentro do layout da página usando topbottomleft, e right. Um elemento absolute-posicionado pode portanto ser movido para fora do ecrã com left: -999px ou semelhante:
Veja a Caneta
hide with position: absolute by SitePoint (@SitePoint)
on CodePen.
| metric | |
|---|---|
| suporte de navegador | excellent, a menos que utilize position: sticky |
| acessibilidade | contente ainda lido |
| layout afectado? | yes, if positioning is changed |
| depends | |
| performance | reasonable if careful |
| quadros deanimação possíveis? | yes, on topbottomleft, e right |
| eventos desencadeados quando escondidos? | yes, mas pode ser impossível interagir com um elemento fora da tela |
Overlay Another Element
Um elemento pode ser visualmente escondido posicionando outro sobre a parte superior que tenha a mesma cor que o fundo. Neste exemplo, um ::after pseudo-elemento é sobreposto, embora qualquer elemento criança possa ser usado:
Ver a Caneta
hide with an overlay by SitePoint (@SitePoint)
on CodePen.
Embora tecnicamente possível, esta opção exigia mais código do que outras opções.
| metric | |
|---|---|
| excellent | |
| content ainda lido | |
| não, se absolutamente posicionado | |
| pintura | |
| razoável se cuidadoso | |
| quadros de animações possíveis? | yes |
| eventos desencadeados quando escondidos? | yes, quando um pseudo ou elemento criança é sobreposto |
Reduzir dimensões
Um elemento pode ser escondido minimizando as suas dimensões usando widthheightpaddingborder-width e/ou font-size. Também pode ser necessário aplicar overflow: hidden; para garantir que o conteúdo não se espalha.
Ver a Caneta
esconde com largura ou altura por SitePoint (@SitePoint)
em CodePen.
Interesting animated effects are possible, but performance is notably better with transform.
| metric | |
|---|---|
| excellent | |
| content ainda lido | |
| yes | |
| rendering required | layout |
| no |
Hidden Choices
display: none tem sido a solução preferida para esconder elementos durante muitos anos, mas tem sido substituída por opções mais flexíveis e animáveis. Ainda é válida, mas talvez apenas quando se quer esconder permanentemente conteúdo de todos os utilizadores. transform ou opacity são melhores escolhas quando se considera o desempenho.
P>Leve as suas competências CSS para o nível seguinte com CSS Master. Aprenda arquitectura CSS, depuração, propriedades personalizadas, layout avançado e técnicas de animação, como usar CSS com SVG, e mais.