Visibilidad del contenido CSS

Visibilidad del contenido CSS

CSS está lleno de pequeños espacios que son frustrantes para navegar. Entre las propiedades CSS para ocultar un contenedor y su contenido, todavía hay margen de mejora. visibility: hidden conserva la integridad de la altura y el ancho mientras display: none en un contenedor se esconde todo. Puedes usar .container > * para ocultar todo el contenido de un contenedor, pero ¿y si hubiera una mejor manera?

Hay una mejor manera de ocultar el contenido de un elemento respetando el borde y las dimensiones del contenedor. Esta mejor manera es usar el content-visibility propiedad:

.my-container.contents-loading {
  content-visibility: hidden;
}

Una demostración de tal característica:

Ver David Walsh (@darkwing) Pen Untitled en CodePen.

Evita un .container > * selector usando content-visibility: hidden es mucho más agradable desde el punto de vista del mantenimiento.

Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
  • Convertir XML a JSON con JavaScript
  • 5 formas en que CSS y JavaScript interactúan que quizás no conozcas
  • Alternativa a los tipos de entrada de HTML5

    Alternativa a los tipos de entrada de HTML5

    Como sabrá, HTML5 ha introducido varios tipos de entrada nuevos: número, fecha, color, rango, etc. La pregunta es: ¿debería comenzar a usar estos controles o no? Por mucho que quiera decir "Sí", no creo que estén listos para una vida real todavía...

  • Use elementos como imágenes de fondo con -moz-element

Si quieres conocer otros artículos parecidos a Visibilidad del contenido CSS puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas