Ocultar
El elemento no se renderiza visualmente porque usa display: none;.
Visibility
Visibility controla cuándo mostrar u ocultar elementos y cómo deben renderizarse según el viewport y la intención estructural del bloque.
Qué resuelve visibility
El módulo visibility define utilidades para ocultar o mostrar elementos de forma controlada, tanto de manera general como por breakpoint.
Su función no es construir layout, sino decidir si un bloque debe estar visible, invisible o cambiar su modo de display según el contexto responsive.
Referencia del archivo
.hide { display: none; }
.show { display: block; }
.show-flex { display: flex; }
.show-grid { display: grid; }
@media (min-width: 640px) {
.sm\:hide { display: none; }
.sm\:show { display: block; }
.sm\:show-flex { display: flex; }
.sm\:show-grid { display: grid; }
}
Helpers base
Mostrar bloque
Hace visible el elemento con display: block;.
Mostrar flex
Hace visible el elemento como contenedor flex.
Mostrar grid
Hace visible el elemento como contenedor grid.
Variantes responsive
Visibility escala con los mismos prefijos oficiales del sistema:
sm:, md:, lg:, xl: y xxl:.
<div class="hide lg:show">
Visible solo en desktop
</div>
<div class="show md:hide">
Visible en móvil, oculto desde tablet
</div>
<div class="hide lg:show-flex">
Visible como flex en desktop
</div>.sm:hide.md:show.lg:show-flex.xl:show-grid.xxl:hide
Atajos semánticos
Solo móvil
Visible en móvil y oculto desde tablet en adelante.
Solo tablet
Visible únicamente en el rango intermedio de tablet.
Solo desktop
Visible solo en pantallas grandes desde desktop.
Desktop flex
Visible en desktop y renderizado como display:flex.
Desktop grid
Visible en desktop y renderizado como display:grid.
Ejemplos de uso
<nav class="only-desktop">
...
</nav><div class="only-mobile">
...
</div><div class="hide lg:show-grid">
...
</div><div class="hide lg:show-flex">
...
</div>Cuándo usar visibility
Sí usar
- Cuando un elemento solo debe existir en ciertos breakpoints.
- Para versiones distintas de navegación o acciones.
- Cuando necesitas alternar block, flex o grid según viewport.
- Para atajos claros como only-mobile o only-desktop.
No usar
- Para resolver problemas de layout que deberían corregirse con grid o align.
- Cuando basta con reacomodar el mismo elemento, en vez de duplicarlo.
- Para esconder contenido importante sin una razón clara de UX.
- Como sustituto de una arquitectura responsive bien pensada.
Visibility vs align vs layout
Mostrar u ocultar
Decide si un elemento aparece y bajo qué display lo hace.
Alinear
Organiza elementos visibles dentro de un contenedor flex.
Estructurar
Construye la arquitectura general del espacio horizontal.
Qué sí y qué no va en visibility
Qué sí debe contener
- Helpers base de display visible / oculto.
- Variantes responsive de hide y show.
- Atajos semánticos por dispositivo.
- Helpers para show-flex y show-grid.
Qué no debe contener
- Grid layout.
- Align helpers.
- Spacing.
- Tipografía.
- Estados visuales del proyecto no relacionados con display.
Siguiente paso
Continúa con lists para revisar el sistema estructural de listas.