
La propiedad visibility en CSS permite mostrar u ocultar un elemento sin afectar el diseño del documento, lo que significa que se reservará espacio para los elementos, sean visibles o no, y esta propiedad también se puede usar para ocultar o mostrar columnas en una tabla <table>
.
Funciones visibility css
Valor inicial | visible |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | Sí |
Valor calculado | Como se especificó. |
/* palabras reservadas */ visibility: visible; visibility: hidden; visibility: collapse; /* valores globales */ visibility: inherit; visibility: initial; visibility: unset;
Nota: Si desea ocultar y eliminar el elemento del diseño del documento, establezca la propiedad display
de valor en none
lugar de utilizar el visibility
.
Ejemplos y aplicaciones en código
Un ejemplo de uso de la propiedad visibility
para ocultar un elemento <p>
entre otros dos. El ejemplo muestra cómo el espacio que ocupaba el elemento todavía está reservado:
< p class = "visible" > El primer párrafo es visible. </ p > < p class = "not-visible" > El segundo párrafo no es visible. </ p > < p class = "visible" > El tercer párrafo es visible. Tenga en cuenta que el segundo párrafo todavía ocupa espacio. </ p >
Código CSS:
.visible { visibility: visible; } .not-visible { visibility: hidden; }
Usando el valor collapse
de los elementos de la tabla, que tendrá el mismo efecto que la regla display: none
pero sin volver a calcular las dimensiones de la tabla:
<table> <tr> <td>1.1</td> <td class="collapse">1.2</td> <td>1.3</td> </tr> <tr class="collapse"> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table>
Código CSS:
.collapse { visibility: collapse; } table { border: 1px solid red; } td { border: 1px solid gray; }
Tenga en cuenta que es posible que este ejemplo no funcione en los navegadores Chrome y Safari como debería.
Soporte de navegadores
Característica | Chromo | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 4.0 | 4.0 | 1.0 |
La compatibilidad con palabras reservadas collapse
no está completa o tiene errores en algunos navegadores modernos (como Chrome y Safari), y esos navegadores pueden tratar este valor como lo harían hidden
.
Características generales
La propiedad visibility
acepta el valor de una de las palabras clave que se enumeran a continuación.
visible
El cuadro de elementos es visible.
hidden
El cuadro de elementos no está visible, pero afectará el diseño de la página como de costumbre. Los hijos del elemento pueden ser visibles si la propiedad se establece visibility
en visible
.
collapse
Esta propiedad solo se usa con elementos de tabla, permite eliminar por completo una línea o columna (como si usáramos la regla display: none
), y el espacio tomado de la línea o columna estará disponible para el resto del contenido. Si usa este valor en otros elementos, tendrá el mismo efecto hidden
.
Estructura visibility css
visibility: visible | hidden | collapse;
Consulte también
- La página de propiedades
position
que describe cómo se coloca el objeto en el documento. - Página de propiedades
float
que especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece. - La página de propiedades
display
que especifica qué tipo de cuadro de visualización se utilizará con el elemento.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS