0 Comentarios
Cuando empiezas en el mundo del diseño web, tarde o temprano te encuentras con este clásico: display: none. Lo ves en tutoriales, lo lees en foros, alguien lo menciona de pasada en un vídeo de YouTube… pero, ¿qué hace exactamente? ¿Para qué sirve? ¿Cuándo se debe usar y cuándo no?
En este artículo vamos a explicártelo clarito y sin rodeos, con ejemplos reales, comparaciones con otras propiedades y algunos trucos útiles que solemos aplicar en nuestro día a día como desarrolladores web. Y ya te adelantamos algo: aunque parezca una propiedad sencilla, tiene más miga de lo que parece.
Vamos al grano. display: none es una propiedad de CSS que oculta completamente un elemento HTML de la página. Y cuando decimos completamente, nos referimos a que desaparece del flujo del documento: no ocupa espacio, no se renderiza, no existe visualmente.
.ocultar {
display: none;
}
Cuando se aplica esta clase a un elemento, por ejemplo un div, un p o incluso un img, el navegador ni lo muestra ni lo reserva en la maquetación.
Ojo: el elemento sigue presente en el DOM, simplemente no lo ves. Eso es clave para muchas estrategias de desarrollo dinámico.
Aquí viene una confusión bastante común, incluso entre desarrolladores con experiencia: pensar que display: none y visibility: hidden hacen lo mismo. Y no, no es así.
display: none oculta el elemento y elimina su espacio en la página.
visibility: hidden oculta el elemento, pero mantiene el espacio que ocupa.
Ejemplo rápido:
.invisible {
visibility: hidden;
}
Esto puede parecer un matiz sin importancia, pero no lo es. De hecho, marcar la diferencia entre estos dos puede mejorar mucho la experiencia visual del usuario. ¿Quieres que desaparezca todo rastro del elemento? Usa display: none. ¿Solo quieres ocultarlo sin que el diseño se desmorone? Entonces mejor visibility: hidden.
Lo usamos más de lo que pensamos. Y en general, es muy útil si lo sabes aplicar con cabeza.
Algunos ejemplos donde tiene mucho sentido:
Menús desplegables que solo se muestran al hacer clic.
Contenido de pestañas o acordeones.
Modales o ventanas emergentes.
Mensajes de error o notificaciones que deben mostrarse solo en ciertos casos.
Con display: none, puedes tener ese contenido preparado pero oculto, esperando a que el usuario interactúe para revelarlo.
Aquí viene lo delicado. Si bien display: none es útil, no deberías usarlo para ocultar contenido que sea importante para los usuarios o para los motores de búsqueda. Google ignora el contenido con display: none, así que si estás ocultando algo por razones de diseño pero quieres que se indexe... mala idea.
Además, desde el punto de vista de la accesibilidad, también debes tener cuidado. Algunos lectores de pantalla no interpretan el contenido oculto como visible. Así que si estás trabajando en una web accesible (como debería ser), tenlo en cuenta.
Vale, hasta ahora todo bien. Pero ¿cómo lo usamos de forma práctica? Veamos.
Este es el método más habitual. Definimos una clase y se la aplicamos al elemento cuando queramos que desaparezca.
<div class="menu oculto">Este menú está oculto</div>
.oculto {
display: none;
}
Y luego, por ejemplo, con JavaScript le quitamos esa clase y lo mostramos.
En frameworks como React, Vue o incluso con jQuery (sí, aún se usa), solemos controlar la visibilidad de elementos con lógica. Pero detrás, lo que hacen muchos de ellos es jugar con display: none.
Un ejemplo con JavaScript puro:
document.getElementById("miElemento").style.display = "none";
Con esto, puedes ocultar dinámicamente cualquier cosa. Muy potente cuando lo combinas con eventos como clics, scroll o incluso condiciones de validación.
Vale, vamos un poco más allá. Aquí van algunos trucos que solemos usar en proyectos reales.
Hoy en día, muchos prefieren usar opacity: 0 junto con pointer-events: none y position: absolute para crear transiciones suaves y evitar el efecto de “desaparición brusca” que tiene display: none.
¿La diferencia? Que puedes animar una opacidad, pero no puedes animar directamente el display.
.suave {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
Si quieres una experiencia más fluida, lo ideal es hacer esto:
Cambias la opacidad a 0 con una transición.
Esperas (con setTimeout o eventos CSS).
Luego aplicas display: none.
Así das tiempo a que la animación se complete antes de eliminar el elemento visualmente. Da un toque más pro, sin duda.
Vamos a resolverte unas dudas rápidas que suelen salir.
No directamente. El contenido oculto sigue cargándose en la página, simplemente no se muestra. Así que si ocultas imágenes pesadas o vídeos, se seguirán cargando. Ojo con eso.
No. Mucho ojo. display: none solo oculta visualmente. Pero si alguien inspecciona el código, el contenido sigue ahí, a la vista. No lo uses nunca para esconder contraseñas, datos personales o elementos que quieras mantener privados.
display: none es una herramienta sencilla pero poderosa. Te permite construir interfaces dinámicas, mejorar la experiencia del usuario y mantener tu HTML limpio y ordenado.
Pero también puede jugar en tu contra si lo usas mal: puede afectar a la accesibilidad, al SEO e incluso a la seguridad del contenido. Así que úsalo con cabeza.
Y si todo esto te está pareciendo un poco lioso o te gustaría contar con una ayuda profesional para implementar buenas prácticas en tu web, ya sabes que estamos aquí para echarte un cable. Puedes ver lo que hacemos en nuestro servicio de diseño web en Alicante, donde nos encargamos de todos estos detalles técnicos (y muchos más) para que tú solo te centres en hacer crecer tu negocio.
¿Qué te ha parecido este artículo?