jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador CSS content-visibility

Genera CSS para content-visibility y contain-intrinsic-size para acelerar páginas largas.

Cargando herramienta...

Qué es Generador CSS content-visibility?

content-visibility: auto le indica al navegador que omita el trabajo de renderizado para elementos fuera de la pantalla hasta que se acerquen al viewport. Combinado con contain-intrinsic-size, le da al navegador un tamaño estimado para que la barra de desplazamiento se comporte correctamente. Esto puede mejorar significativamente el rendimiento de renderizado en páginas largas con muchas secciones repetidas como archivos de blog, cuadrículas de productos y documentación.

Respuesta rápida

Use content-visibility: auto para omitir el renderizado de elementos fuera de la pantalla hasta que se acerquen al viewport. Esto puede mejorar el rendimiento de carga inicial de página en páginas largas con muchas secciones repetidas.

Last updated: 2026-06-11

Limitaciones

  • El soporte del navegador varía. Chrome 85+, Edge 85+, Firefox 125+ y Safari 18.2+ soportan content-visibility. Los navegadores más antiguos ignoran la propiedad y renderizan todo el contenido normalmente.
  • Los enlaces de anclaje pueden no desplazarse correctamente a elementos con content-visibility: auto porque el navegador no ha renderizado el área destino antes del intento de desplazamiento.
  • El contenido dentro de una sección content-visibility: auto no está inmediatamente disponible para lectores de pantalla ni para la búsqueda en página porque el navegador no ha renderizado el subárbol fuera de pantalla. Use content-visibility: visible o elimine la propiedad en secciones que deben ser descubribles por tecnología de asistencia.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el tipo de contenido que mejor coincida con sus secciones repetidas.
  2. Establezca la altura promedio estimada de una sección en píxeles.
  3. Copie el CSS y aplíquelo al selector de contenedor para sus secciones repetidas.
  4. Pruebe el rendimiento de la página y el comportamiento de la barra de desplazamiento antes de publicar.

Para qué puedes usarla

  • Acelerar el renderizado de listas largas de artículos de blog con muchas tarjetas repetidas.
  • Mejorar el rendimiento en páginas de documentación con muchas secciones plegables.
  • Reducir el trabajo de diseño en páginas de listado de productos con cientos de elementos.

Casos de uso

Ejemplos prácticos

Ejemplo

Rendimiento de feed de blog

Una página de inicio de blog muestra 50 tarjetas de publicaciones. Agregar content-visibility: auto con un contain-intrinsic-size de 300px permite que el navegador omita el renderizado de tarjetas fuera de pantalla hasta que se necesiten.

Ejemplo

Secciones de página de documentación

Una página de documentación larga tiene muchas secciones independientes. Cada sección recibe content-visibility: auto para que las secciones fuera de pantalla no bloqueen el renderizado inicial de la página.

Errores comunes

  • Establecer contain-intrinsic-size demasiado pequeño o demasiado grande, lo que causa saltos en la barra de desplazamiento a medida que las secciones se renderizan.
  • Aplicar content-visibility a elementos que necesitan medición JavaScript o a los que se desplaza mediante enlaces de anclaje.
  • Olvidar que los elementos con content-visibility: auto no se pintan, lo que puede afectar las mediciones de getBoundingClientRect.

Verificación

  1. Desplácese por la página y confirme que las secciones fuera de pantalla se rendericen suavemente sin saltos en la barra de desplazamiento ni espacios visuales.
  2. Pruebe los enlaces de anclaje o la navegación por hash de URL a secciones que usan content-visibility para asegurarse de que se desplacen a la posición correcta.

FAQ

Preguntas sobre Generador CSS content-visibility

¿Qué navegadores soportan content-visibility?

Chrome 85+, Edge 85+, Firefox 125+ y Safari 18.2+. Es seguro usarlo como una mejora progresiva porque los navegadores que no lo soportan simplemente renderizan todo el contenido normalmente.

¿Cómo funciona contain-intrinsic-size?

Establece un tamaño de marcador de posición para el elemento antes de que se renderice. Use una estimación cercana a la altura promedio real para que la barra de desplazamiento no salte cuando las secciones se rendericen.

¿Afecta content-visibility al SEO?

Content-visibility no afecta directamente la indexación de motores de búsqueda. Google renderiza JavaScript y detecta el contenido visible normalmente. Sin embargo, el contenido que depende de JavaScript y nunca se desplaza a la vista puede no ser indexado. El contenido HTML estático es seguro independientemente de content-visibility.

¿Qué sucede con los enlaces de anclaje y content-visibility?

Cuando una página usa enlaces de anclaje para saltar a una sección con content-visibility: auto, el navegador puede no desplazarse a la posición correcta porque el elemento destino no se ha renderizado completamente. Pruebe el comportamiento de los enlaces de anclaje si aplica content-visibility a secciones que están enlazadas internamente.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también