CSS Academy · Lección

Visibility frente a Display None

Aprenda cuándo utilizar visibility: hidden frente a display: none y cómo afecta cada opción al diseño.

Visibility frente a Display None es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

Tres formas de ocultar elementos

CSS ofrece tres métodos habituales para ocultar elementos, cada uno con efectos distintos en el diseño, la accesibilidad y la interacción:

display: none
visibility: hidden
opacity: 0

display: none

El elemento se elimina por completo del diseño. No ocupa espacio, no es interactivo y los lectores de pantalla no lo leen, en la mayoría de las implementaciones. El elemento sigue existiendo en el DOM.

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

visibility: hidden

El elemento es invisible, pero sigue ocupando espacio en el diseño. No se puede hacer clic en él y los lectores de pantalla no lo leen. Es una buena opción para ocultar algo sin provocar cambios en el diseño.

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

opacity: 0

El elemento es invisible, pero totalmente interactivo. Sigue ocupando espacio y responde a eventos, como clics y acciones de pasar el cursor. Es posible que los lectores de pantalla todavía lo lean.

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

Sobrescritura de visibility: visible

Un elemento hijo puede sobrescribir el visibility: hidden del padre estableciendo visibility: visible. Esto no es posible con display: none: los hijos lo heredan sin excepción.

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

Tabla comparativa

Referencia rápida:

display: none: sin espacio, sin clics, no se lee
visibility: hidden: ocupa espacio, sin clics, no se lee
opacity: 0: ocupa espacio, sigue siendo clicable, es posible que se lea

Transiciones de visibility

No se pueden hacer transiciones con display. Para mostrar u ocultar elementos gradualmente, combine visibility con opacity:

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

Ocultación accesible con SR-only

El patrón solo para lectores de pantalla oculta visualmente el contenido, pero lo mantiene accesible para las tecnologías de asistencia:

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

Atributo hidden frente a CSS

El atributo HTML hidden aplica display: none mediante la hoja de estilos del agente de usuario del navegador. Es accesible y semántico, pero la especificidad de CSS puede sobrescribirlo.

<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 omite el renderizado de las secciones que están fuera de la pantalla, pero conserva su árbol de accesibilidad y su disposición. Es una técnica moderna de rendimiento para páginas largas.

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

pointer-events: none

Para mantener un elemento visible, pero no interactivo, use pointer-events: none. Los clics y las acciones de pasar el cursor atraviesan el elemento y llegan a los elementos situados debajo.

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

Comprobación rápida

¿Qué técnica oculta un elemento y conserva el espacio que ocupa en el diseño?

Resumen

display: none elimina por completo un elemento del diseño. visibility: hidden lo oculta y conserva su espacio. opacity: 0 lo oculta, pero mantiene su interactividad. Para ocultarlo de forma accesible, use el patrón .sr-only. Combine visibility y opacity para crear transiciones de desvanecimiento.

Preguntas frecuentes

¿La lección «Visibility frente a Display None» es gratis?

Sí — el texto completo de «Visibility frente a Display None» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Visibility frente a Display None»?

Aprenda cuándo utilizar visibility: hidden frente a display: none y cómo afecta cada opción al diseño. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Visibility frente a Display None»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a CSS Academy