QuicklyCSS v2 · Docs
Visibility
Versión v2.0 alpha.2

Versiones de QuicklyCSS

v2.0.0-alpha.2Vista previa de desarrollo✓ v1.5Versión estable anterior
MÓDULO•UTILIDADES

Utilidades · Visibilidad

Visibility (mostrar u ocultar)

Muestra u oculta un elemento sin cambiar el espacio que ocupa, con variantes para interacción, impresión y ocho anchos responsive.

v2.0

Conserva el espacio

visibility: hidden oculta el contenido, pero su caja continúa reservada en el layout.

Ocho breakpoints

Las variantes responsive se activan hasta el ancho indicado porque utilizan max-width.

Control de impresión

Las clases *-print cambian la visibilidad únicamente al imprimir el documento.

Visibility no equivale a display

.invisible deja un espacio vacío donde estaba el elemento. Si necesitas retirar la caja del flujo, utiliza la utilidad de display correspondiente.

Código + resultado

Compara visible e invisible

El segundo ejemplo mantiene tres columnas: la central existe y reserva espacio aunque su contenido no se vea.

HTML
<div>
  <span>01</span>
  <span class="visible">02</span>
  <span>03</span>
</div>
Resultado aplicadoVISIBLE · CONSERVA ESPACIO
010203

.visible aplica visibility: visible; el elemento se dibuja y participa normalmente en el layout.

Mapa del sistema

Cuatro contextos de aplicación

La propiedad siempre es visibility; el nombre de la clase determina cuándo se aplica.

BASE.visible.invisible

Estado permanente

Aplica la visibilidad mientras la clase permanezca en el elemento.

INTERACCIÓN.*-hover.*-focus

Estado temporal

Cambia la visibilidad únicamente durante :hover o :focus.

RESPONSIVE.*-{bp}

Hasta un ancho

Se activa dentro de un media query con max-width.

PRINT.*-print

Sólo al imprimir

No modifica la pantalla; se evalúa dentro de @media print.

Hover y focus

Estados disponibles con una limitación importante

Las cuatro clases existen en el framework, pero ocultar el mismo elemento que produce el estado puede interrumpir hover o focus.

.visible-hover

Visible durante hover

Aplica visibility: visible cuando el propio elemento recibe el puntero. Un elemento ya oculto no suele poder iniciar ese hover por sí mismo.

Pasa el cursor por el área
Elemento visible
El contenedor conserva :hover y muestra al hijo sin parpadeo.
.invisible-hover

Invisible durante hover

Oculta el elemento al pasar el puntero. Al dejar de participar en hit testing puede perder el estado y producir parpadeo.

Pasa el cursor por el área
Elemento visible
El área mantiene el estado mientras el hijo queda oculto.
.visible-focus

Visible durante focus

Aplica visibilidad cuando el elemento recibe foco. Si ya está oculto, normalmente no podrá enfocarse directamente.

Haz clic o usa Tab
Elemento visible
El contenedor recibe el foco y muestra al hijo.
.invisible-focus

Invisible durante focus

Oculta el elemento enfocado y puede provocar la pérdida inmediata del foco.

Haz clic o usa Tab
Elemento visible
El contenedor conserva el foco mientras el hijo se oculta.
Uso recomendadoLos ejemplos usan un contenedor estable como activador y cambian la visibilidad de su hijo. Las clases del framework actúan sobre el mismo elemento y pueden perder hover o focus al ocultarlo.
Estados generalesPara cambiar texto, fondo, borde u opacidad con hover:, focus: y otras variantes, consulta la documentación de States.

Variantes responsive

Ocho límites con max-width

Agrega el breakpoint al final. La clase se activa cuando el viewport es igual o menor al valor indicado.

640pxmax-width.invisible-640
768pxmax-width.invisible-768
1024pxmax-width.invisible-1024
1280pxmax-width.invisible-1280
1536pxmax-width.invisible-1536
2560pxmax-width.invisible-2560
3840pxmax-width.invisible-3840
6016pxmax-width.invisible-6016
También disponiblesCada límite incluye .visible-{bp}, .invisible-{bp}, sus variantes -hover-{bp} y -focus-{bp}.

Impresión

La pantalla no cambia

Estas clases sólo producen efecto al imprimir o al abrir la vista previa de impresión.

VISIBLE EN PRINT.visible-print

Muestra al imprimir

Aplica visibility: visible dentro de @media print.

INVISIBLE EN PRINT.invisible-print

Oculta al imprimir

Aplica visibility: hidden sin desmontar la estructura impresa.

Referencia

Clases disponibles

La tabla contiene únicamente familias presentes en visibility.css.

ClasesMomentoValorComportamiento
.visibleSiemprevisibility: visibleMuestra el elemento y conserva su espacio.
.invisibleSiemprevisibility: hiddenOculta el elemento y conserva su espacio.
.visible-hover / .invisible-hover:hovervisible / hiddenCambia mientras el propio elemento mantiene hover.
.visible-focus / .invisible-focus:focusvisible / hiddenCambia mientras el propio elemento mantiene focus.
.visible-print / .invisible-printImpresiónvisible / hiddenSe aplica sólo dentro de @media print.
.visible-{bp} / .invisible-{bp}max-widthvisible / hiddenEstado responsive hasta el límite indicado.
.visible-hover-{bp} / .invisible-hover-{bp}Hover responsivevisible / hiddenCombina el estado hover con max-width.
.visible-focus-{bp} / .invisible-focus-{bp}Focus responsivevisible / hiddenCombina el estado focus con max-width.

Recomendaciones

Buenas prácticas de visibility

01

Elige por espacio

Usa visibility sólo cuando el hueco del elemento deba permanecer en el layout.

02

No ocultes interacción

Un control invisible no debería continuar disponible para teclado, lectores o eventos.

03

Lee el breakpoint

El número es un límite máximo, no el punto desde el cual comienza el estilo.

04

Prueba la impresión

Comprueba la vista previa: invisible conserva espacio también en el documento impreso.