0Pricing
CSS Academy · Leçon

Visibilité et Display None

Apprenez quand utiliser visibility: hidden plutôt que display: none et découvrez l’effet de chacun sur la mise en page.

Visibilité et Display None est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Trois façons de masquer des éléments

CSS fournit trois méthodes courantes pour masquer des éléments, chacune ayant des effets différents sur la mise en page, l’accessibilité et l’interaction :

  1. display: none
  2. visibility: hidden
  3. opacity: 0

display: none

L’élément est complètement retiré de la mise en page. Il n’occupe aucun espace, n’est pas interactif et n’est pas lu par les lecteurs d’écran dans la plupart des implémentations. L’élément existe toujours dans le DOM.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

L’élément est invisible, mais occupe toujours de l’espace dans la mise en page. Il est impossible de cliquer dessus et il n’est pas lu par les lecteurs d’écran. C’est une bonne solution pour masquer un élément sans provoquer de décalage de mise en page.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

L’élément est invisible, mais reste entièrement interactif. Il occupe toujours de l’espace et réagit aux événements, comme les clics et les survols. Les lecteurs d’écran peuvent toujours le lire.

<button class="transparent">Invisible but clickable</button>

Remplacer visibility: visible

Un élément enfant peut remplacer le visibility: hidden de son parent en définissant visibility: visible. Cela n’est pas possible avec display: none : les enfants en héritent absolument.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Tableau comparatif

Référence rapide :

  • display: none : aucun espace, aucun clic, non lu
  • visibility: hidden : occupe de l’espace, aucun clic, non lu
  • opacity: 0 : occupe de l’espace, reste cliquable, peut être lu

Animer visibility

display ne peut pas être animé par transition. Pour faire apparaître ou disparaître progressivement des éléments, combinez visibility et opacity :

<div class="dropdown open">Dropdown menu content</div>

Masquage accessible avec SR-only

Le modèle réservé aux lecteurs d’écran masque visuellement le contenu tout en le gardant accessible aux technologies d’assistance :

<button>Save <span class="sr-only">your document now</span></button>

Attribut hidden et CSS

L’attribut HTML hidden applique display: none via la feuille de style de l’agent utilisateur du navigateur. Il est accessible et sémantique, mais peut être remplacé par la spécificité CSS.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden évite le rendu des sections situées hors écran, tout en préservant leur arborescence d’accessibilité et leur mise en page. Il s’agit d’une technique moderne d’optimisation des performances pour les pages longues.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Pour qu’un élément reste visible mais ne soit pas interactif, utilisez pointer-events: none. Les clics et les survols traversent l’élément et atteignent les éléments situés dessous.

<div class="overlay">Clicks pass through this overlay</div>

Vérification rapide

Quelle technique masque un élément tout en préservant l’espace qu’il occupe dans la mise en page ?

Récapitulatif

display: none retire entièrement un élément de la mise en page. visibility: hidden le masque tout en préservant l’espace. opacity: 0 le masque, mais le laisse interactif. Pour un masquage accessible, utilisez le modèle .sr-only. Combinez visibility et opacity pour créer des transitions en fondu.

Questions Fréquemment Posées

La leçon « Visibilité et Display None » est-elle gratuite ?

Oui — le texte complet de « Visibilité et Display None » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Visibilité et Display None » ?

Apprenez quand utiliser visibility: hidden plutôt que display: none et découvrez l’effet de chacun sur la mise en page. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Visibilité et Display None » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Block, Inline et Inline-Block
  2. Visibilité et Display None
  3. Overflow : défilement, découpage et automatique
  4. Réinitialisation et normalisation CSS
← Retour à CSS Academy