Si eres de los que oculta elementos con display: none, tengo malas noticias: estás arruinando la accesibilidad y la experiencia del usuario. Pero no te preocupes, hoy te enseñaré formas más elegantes y eficientes para ocultar y mostrar elementos sin afectar la usabilidad ni el rendimiento de tu web.
¿Por qué deberías evitar display: none?
Aunque display: none parece la opción más fácil para esconder elementos, tiene varios inconvenientes:
Genera un salto de layout: Puede hacer que los elementos de la página cambien de posición bruscamente.
Elimina el elemento del DOM visual: Los lectores de pantalla no lo detectan.
Causa problemas de animación: Si intentas hacer un fade-in o slide-in, no funcionará correctamente.
Puede afectar la accesibilidad: Usuarios con tecnologías asistivas podrían no encontrar contenido relevante.
Alternativas elegantes a display: none
Usa opacity y visibility
Estos permiten ocultar elementos sin sacarlos del flujo del documento, lo que es ideal para efectos de animación.
.hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out;
}
.visible {
opacity: 1;
visibility: visible;
}const element = document.querySelector(".my-element");
element.classList.toggle("hidden");👉 ¿Por qué es mejor? Permite transiciones suaves sin afectar la estructura de la página.
Usa clip-path para esconder elementos
clip-path permite ocultar un elemento sin eliminarlo del flujo del DOM.
.hidden {
clip-path: inset(100%);
position: absolute;
}👉 ¿Por qué es mejor? Es más accesible y funciona sin afectar la experiencia del usuario.
Usa height y overflow para ocultar sin romper el layout
Si necesitas un menú desplegable, mejor usa esta técnica en lugar de display: none:
.menu {
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.menu.open {
height: auto;
}const menu = document.querySelector(".menu");
menu.classList.toggle("open");👉 ¿Por qué es mejor? Evita cambios bruscos en el layout y mejora la fluidez de la UX.
Si bien display: none sigue siendo útil en algunos casos, no es la mejor opción para ocultar contenido de forma elegante y accesible. Utilizando técnicas como opacity, clip-path o height, puedes mejorar la experiencia del usuario sin sacrificar el rendimiento ni la accesibilidad.
💬 ¿Cuál de estas técnicas prefieres? ¿Usas otra estrategia para ocultar elementos? ¡Déjamelo en los comentarios!
Fernando Morales
/
CEO, Designed By We
Descubre más desde Designed By We
Suscríbete y recibe las últimas entradas en tu correo electrónico.
