10 façons de masquer un élément en CSS

Analyse sous l’angle de la compatibilité, de l’accessibilité, des changements de mise en page, de l’animation, de la gestion des événements et des performances

1. opacity, filter:opacity()

2. Alpha de color

3. transform

4. clip-path

5. visibility

6. display

7. hidden

8. position

9. Superposition avec ::after

10. Réduire width et height

[xguru]

La plupart du temps, je faisais simplement avec display:none, donc je me demandais s’il était vraiment nécessaire d’aller aussi loin,

mais la partie qui permet de masquer tout en conservant la mise en page est intéressante.

Dans cette optique, j’ai l’impression que la méthode n°5 ou n°3, qui offrent une bonne compatibilité, sont aussi très utiles.