Qué es Generador CSS content-visibility?
Generador CSS content-visibility es una herramienta de navegador para esta tarea: Genera CSS para content-visibility y contain-intrinsic-size para acelerar páginas largas. La salida es fácil de revisar antes de usarla en un sitio publicado.
Quick answer
Use content-visibility: auto to skip rendering off-screen elements until they approach the viewport. This can improve initial page load performance on long pages with many repeated sections.
Limitations
- Browser support varies. Chrome 85+, Edge 85+, Firefox 125+, and Safari 18.2+ support content-visibility. Older browsers ignore the property and render all content as normal.
- Anchor links may not scroll correctly to elements with content-visibility: auto because the browser has not rendered the target area before the scroll attempt.
Cómo usar esta herramienta
- Abre la herramienta y escribe los valores necesarios.
- Revisa la salida en el panel de resultado.
- Copia solo la parte que encaja con tu página.
- Prueba el cambio antes de publicar.
Para qué puedes usarla
- Resolver tareas repetidas de publicación con menos fricción.
- Preparar marcado, CSS o checklists antes del lanzamiento.
- Evitar pequeños errores comunes en sitios estáticos.