10 maneiras de esconder elementos com CSS

Analisando sob as perspectivas de compatibilidade, acessibilidade, alteração de layout, animação, tratamento de eventos e performance

1. opacity, filter: opacity()

2. Alfa de color

3. transform

4. clip-path

5. visibility

6. display

7. hidden

8. position

9. Sobreposição com ::after

10. Reduzir width e height

[xguru]

Eu quase sempre usava display:none, então pensei: precisava ir tão longe assim?

Mas a parte de esconder sem mexer no layout é bem interessante.

Pensando assim, a nº 5 ou a nº 3, que também têm boa compatibilidade, parecem bem úteis.