visibilidad del contenido

La content-visibilitypropiedad en CSS indica al navegador si el contenido de un elemento debe representar o no en el momento de la carga inicial. Entonces, cuando el navegador comienza a cargar contenido y lo reproduce en la pantalla, esta propiedad nos permite intervenir y decirle al navegador que no cargue el contenido de un elemento hasta que sea necesario. Piense en ello como una carga diferida en el sentido de que los elementos secundarios de un elemento fuera de la pantalla no se representan hasta que ingresan a la ventana gráfica.

.element {  content-visibility: hidden;}

El punto principal de uso content-visibilityes el rendimiento. Puede ayudar a acelerar la carga de la página porque el navegador puede diferir la representación de elementos que no están en la ventana gráfica del usuario hasta que éste se desplaza hasta ellos. Los resultados pueden ser dramáticos. Aquí están los resultados de una prueba de rendimiento realizada por Una Kravets y Vladimir Levin que muestra la diferencia que content-visibilitypuede marcar en una página web típica.

Sintaxis

content-visibility: [visible | auto | hidden];

• Valor inicial: visible
• Se aplica a: elementos para los cuales se puede aplicar la contención del diseño
• heredado: no
• Valor calculado: según lo especificado
• Tipo de animación: no animable

Valores

La content-visibilitypropiedad acepta uno de tres valores:

• hidden: El elemento omite su contenido (algo similar a aplicarlo display: none;a los contenidos).
• visible: No hay ningún efecto y el elemento se representa normalmente.
• auto: El elemento tiene diseño, estilo y contención de pintura. El navegador determina si este contenido es relevante para el usuario y, si no lo es, lo omitirá. Al mismo tiempo, el elemento sigue siendo enfocable, seleccionable y accesible para cosas como tabulación y búsqueda en la página.

content-visibility: hidden;

Mencioné anteriormente que es algo similar a display: none;porque el elemento no está pintado en la página en absoluto.

Cuando se elimina la regla, el navegador debe representar el elemento y su contenido. content-visibility: hidden;Sin embargo, el elemento está oculto, pero su estado renderizado se almacena en caché . Entonces, cuando se elimina la regla, el navegador no tiene que representar el elemento desde cero. Por lo tanto, puedes usar esto en algo que está oculto de forma predeterminada, pero existe una alta probabilidad de que lo muestres en algún momento del ciclo de vida de la página (por ejemplo, un modal de uso común). De esa manera, el elemento se carga mucho más rápido en visitas posteriores cuando se renderiza.

La nota en la especificación es clara sobre la accesibilidad del hiddenvalor:

Los contenidos omitidos no deben ser accesibles para las funciones del agente de usuario, como búsqueda en página, navegación por orden de tabulación, etc., ni ser seleccionables ni enfocables.

content-visibility: auto;

Se podría pensar en esto como una carga diferida para partes enteras del DOM.

Si un elemento está en la mitad inferior de la página y tiene la content-visibility: auto;regla, el navegador no considera ninguno de sus contenidos. Por lo tanto, se omite la renderización de ese elemento. A medida que el usuario se desplaza hasta el elemento, el navegador pinta su contenido y la representación finaliza lo suficientemente pronto para el usuario. La heurística sobre cuándo el navegador decide renderizar no está clara y probablemente deja que el navegador decida.

Preocupaciones de accesibilidad

Cuidado al usarlo content-visibility: hidden. Eso no solo le indica al navegador que omita la representación de un elemento en la carga inicial de la página, sino que también evita que el elemento sea leído por tecnología de asistencia, como lectores de pantalla.

Por el contrario, la autopalabra clave le dice al navegador que el contenido de un elemento no es necesario en la carga inicial de la página mientras esté fuera de la pantalla. En otras palabras, ese elemento se omite, tal como ocurre cuando usamos la hiddenpalabra clave.

Sin embargo, autotambién indicó que el elemento aún debería estar disponible para el usuario en lugar de ignorarlo por completo en el DOM. Lo que esto significa es que el elemento y su contenido deben poder enfocarse, seleccionarse, tabularse y buscarse a través de la función de búsqueda en la página del navegador. Nuevamente, la especificación es muy clara en ese punto:

A diferencia de hidden, los contenidos omitidos aún deben estar disponibles normalmente para las funciones del agente de usuario, como buscar en la página, navegación por orden de pestañas, etc., y deben poder enfocarse y seleccionarse normalmente.

Además, los elementos fuera de la pantalla que se han ocultado con CSS (por ejemplo display: none;), deben haberse aria-hidden="true"aplicado a ellos ya que el navegador no los ha mostrado. De esta forma, siguen presentes en el árbol de accesibilidad.

Preocupaciones de experiencia de usuario

Puede imaginar que si no se representan grandes partes de una página web, la longitud de una barra de desplazamiento podría indicar que la página tiene mucho menos contenido del que realmente tiene. Alex Russell habla (y tiene) soluciones para esto en su publicación “visibilidad del contenido sin barras de desplazamiento nerviosos”.

Actuación

Una vez más, esta propiedad tiene que ver con la compra de rendimiento. Los resultados pueden ser significativos. Vea este vídeo con Jake Archibald y Surma donde lo implementan y cinco grandes cambios:

la contain-intrinsic-sizepropiedad

Naturalmente, cuando un navegador muestra inicialmente todo el contenido de una página web, sabe la altura necesaria para mostrar todo (basado en la suma de las alturas individuales de todas las secciones de la página) y el desplazamiento será fluido. Sin embargo content-visibility: auto;, cuando se aplica a un elemento, trata el elemento como si tuviera una altura de 0 (suponiendo que la heightpropiedad no se haya establecido explícitamente). Cuando el usuario se desplaza y el elemento aparece a la vista (y el navegador comienza a pintarlo), se calcula la altura real y esto provoca un cambio de diseño en la página. El desplazamiento también puede hacer que la página web sea un poco raro, algo conocido como Cumulative Layout Shift (CLS), que se considera muy importante para la optimización de motores de búsqueda, ya que Google ahora lo incluye en sus métricas Core Web Vitals para medir el rendimiento de un sitio.

La solución a los grandes cambios de diseño es emparejarse content-visibility: auto;con contain-intrinsic-size, dándole al navegador una altura predecible para usar como marcador de posición para el elemento cuando pinta.

.off-screen-parent {  content-visibility: auto;  contain-intrinsic-size: 4800px; /* A guess at the height of it */}

contain-intrinsic-sizeActúa como marcador de posición para el contenido aún no renderizado. Frenando así los problemas de desplazamiento y cambio de diseño. Entonces, si conoce la altura exacta, puede usarla como valor. Si no, haz un presupuesto. Cuando se renderiza la sección, si la altura que usted establece no es la altura real, habrá un pequeño cambio en el diseño, pero no será tan pronunciado como sin la contain-intrinsic-sizepropiedad.

Manifestación

Creé un sitio web básico con texto ficticio y un total de 185 imágenes.

Utilicé páginas de GitHub para el alojamiento. Una rama tiene las content-visibilitypropiedades contain-intrinsic-sizeyy la otra no. Entonces, compare ambos:

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

cromo	Firefox	ES DECIR	Borde	Safari
85	124	No	85	TP

Móvil/Tableta

androidcromo	Android Firefox	androide	Safari en iOS
124	125	124	No

Más información

content-visibility: la nueva propiedad CSS que aumenta el rendimiento de renderizado

visibilidad del contenido Chris Coyier

Más sobre visibilidad del contenido

visibilidad del contenido Chris Coyier

Optimizar al máximo la carga de imágenes para la web en 2021

visibilidad del contenido Chris Coyier

Propiedades relacionadas

mostrar

.element { display: inline-block; } visibilidad del contenido Sara Cope

Relacionado

mostrar

.element { display: inline-block; } mostrar Sara Cope