Une question simple, une réalité plus nuancée

Tout commence par une question directe : « en css comment cacher un truc ?». Formulation brute, mais problématique courante. Derriere cette simplicité apparente se cache une réalité plus nuancée : il existe plusieurs façons de masquer un élément en CSS, chacune avec des effets très différents sur le rendu, l’interaction et la structure du document.

Les trois méthodes de masquage classiques

La première réponse présente les trois approches les plus usuelles :

1. Utiliser display: none;

Cette méthode supprime l’élément du flux du document. Il ne prend plus de place, n’est plus visible, et n’interagit plus avec le reste de la page. C’est la solution la plus radicale.

.mon-element {
  display: none;
}

2. Utiliser visibility: hidden;

Ici, l’élément est rendu invisible, mais il conserve sa place dans la mise en page. Cela peut être utile si on veut juste le cacher visuellement tout en conservant son influence sur la structure.

.mon-element {
  visibility: hidden;
}

3. Utiliser opacity: 0;

Cette option rend l’élément totalement transparent, sans affecter sa place ou son comportement interactif. Il reste cliquable et détectable par les outils d’accessibilité.

.mon-element {
  opacity: 0;
}

Bonus : combinaison pour un masquage plus strict

Si l’objectif est de rendre l’élément à la fois invisible, inactif et absent du flux, plusieurs propriétés peuvent être combinées :

.mon-element {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

Cas pratique : masquer un titre généré automatiquement

Le besoin initial était plus précis qu’il n’y paraît : masquer cet élément HTML spécifique :

<div class="mfp-title">OK alain</div>

Il s’agit ici d’une balise insérée automatiquement, sans doute par une bibliothèque JavaScript telle que Magnific Popup. L’objectif est de supprimer ce contenu du rendu visuel.

La solution directe, en CSS, est la suivante :

.mfp-title {
  display: none;
}

Elle fonctionne dans tous les navigateurs modernes et retire complètement l’élément de l’affichage.

Quand le CSS seul ne suffit pas

Un doute subsiste : et si le CSS est chargé avant que l’élément ne soit injecté dynamiquement ? Dans ce cas, un style CSS pourrait ne pas suffire. Il peut alors être pertinent d’utiliser JavaScript pour s’assurer que le style s’applique bien après l’injection :

document.querySelectorAll('.mfp-title').forEach(el => el.style.display = 'none');

Ce script vérifie la présence de l’élément et applique dynamiquement le style. Il s’agit d’une solution utile dans les contextes où le contenu est chargé après le DOM initial.

Un besoin fréquent, des réponses adaptées au contexte

Ce cas concret montre que même une demande simple (« cacher un truc ») peut recouvrir plusieurs intentions différentes : masquer visuellement, retirer du flux, désactiver les interactions, supprimer pour l’accessibilité, etc.

Le choix de la méthode ne dépend donc pas uniquement de l’effet visuel attendu, mais aussi du contexte technique (CSS statique ou non, contenu injecté, accessibilité, interactivité, etc.).

Si vous rencontrez ce type de situation sur un site en production ou lors de l’intégration d’un plugin, nous pouvons vous aider à identifier la meilleure solution, adapter le code et automatiser la résolution si besoin. N’hésitez pas à nous contacter pour en discuter.