# Visibility (mostrar u ocultar)
> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.
- Página canónica: https://quicklycss.cl/docs/visibility.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt
Utilidades · Visibilidad
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.
8
## Ocho breakpoints
Las variantes responsive se activan hasta el ancho indicado porque utilizan `max-width`.
P
## Control de impresión
Las clases `*-print` cambian la visibilidad únicamente al imprimir el documento.
i
## 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
```html
01
02
03
```
Resultado aplicado VISIBLE · CONSERVA ESPACIO
01 02 03
`.visible` aplica `visibility: visible`; el elemento se dibuja y participa normalmente en el layout.
HTML
```html
01
02
03
```
Resultado aplicado OCULTO · CONSERVA ESPACIO
01 02 03
`.invisible` aplica `visibility: hidden`. El espacio central permanece reservado entre 01 y 03.
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 recomendado Los 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 generales Para cambiar texto, fondo, borde u opacidad con `hover:`, `focus:` y otras variantes, consulta la [documentación de States](states.md).
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.
640px `max-width` `.invisible-640`
768px `max-width` `.invisible-768`
1024px `max-width` `.invisible-1024`
1280px `max-width` `.invisible-1280`
1536px `max-width` `.invisible-1536`
2560px `max-width` `.invisible-2560`
3840px `max-width` `.invisible-3840`
6016px `max-width` `.invisible-6016`
También disponibles Cada 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`.
| Clases | Momento | Valor | Comportamiento |
| --- | --- | --- | --- |
| .visible | Siempre | visibility: visible | Muestra el elemento y conserva su espacio. |
| .invisible | Siempre | visibility: hidden | Oculta el elemento y conserva su espacio. |
| .visible-hover / .invisible-hover | :hover | visible / hidden | Cambia mientras el propio elemento mantiene hover. |
| .visible-focus / .invisible-focus | :focus | visible / hidden | Cambia mientras el propio elemento mantiene focus. |
| .visible-print / .invisible-print | Impresión | visible / hidden | Se aplica sólo dentro de @media print . |
| .visible-{bp} / .invisible-{bp} | max-width | visible / hidden | Estado responsive hasta el límite indicado. |
| .visible-hover-{bp} / .invisible-hover-{bp} | Hover responsive | visible / hidden | Combina el estado hover con max-width . |
| .visible-focus-{bp} / .invisible-focus-{bp} | Focus responsive | visible / hidden | Combina 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.