jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

CSS Content Visibility Generator

Select your content type and get the correct content-visibility CSS with a sensible contain-intrinsic-size estimate. Improves rendering performance for long article feeds, card grids, comment threads, and documentation pages.

Loading tool...

What is CSS Content Visibility Generator?

content-visibility: auto tells the browser to skip rendering work for off-screen elements until they approach the viewport. Paired with contain-intrinsic-size, it gives the browser an estimated size so the scrollbar behaves correctly. This can significantly improve rendering performance on long pages with many repeated sections such as blog archives, product grids, and documentation.

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.

How to use this tool

  1. Choose the content type that best matches your repeating sections.
  2. Set the estimated average height of one section in pixels.
  3. Copy the CSS and apply it to the container selector for your repeating sections.
  4. Test page performance and scrollbar behavior before publishing.

What you can use it for

  • Speed up rendering of long blog article lists with many repeated cards.
  • Improve performance on documentation pages with many collapsible sections.
  • Reduce layout work on product listing pages with hundreds of items.

Use cases

Practical examples

Example

Blog feed performance

A blog homepage shows 50 post cards. Adding content-visibility: auto with a 300px contain-intrinsic-size lets the browser skip rendering off-screen cards until they are needed.

Example

Documentation page sections

A long documentation page has many independent sections. Each section gets content-visibility: auto so off-screen sections do not block the initial page render.

Common mistakes

  • Setting contain-intrinsic-size too small or too large, which causes scrollbar jumping as sections render in.
  • Applying content-visibility to elements that need JavaScript measurement or are scrolled to via anchor links.
  • Forgetting that elements with content-visibility: auto are not painted, which can affect getBoundingClientRect measurements.

Verification

  1. Scroll the page and confirm off-screen sections render in smoothly without scrollbar jumps or visual gaps.
  2. Test anchor links or URL hash navigation to sections that use content-visibility to ensure they scroll to the correct position.

FAQ

Questions about CSS Content Visibility Generator

What browsers support content-visibility?

Chrome 85+, Edge 85+, Firefox 125+, and Safari 18.2+. It is safe to use as a progressive enhancement because browsers that do not support it simply render all content as normal.

How does contain-intrinsic-size work?

It sets a placeholder size for the element before it renders. Use an estimate close to the real average height so the scrollbar does not jump when sections render in.

Does content-visibility affect SEO?

Content-visibility does not directly affect search engine indexing. Google renders JavaScript and detects visible content normally. However, content that depends on JavaScript and is never scrolled into view may not be indexed. Static HTML content is safe regardless of content-visibility.

What happens with anchor links and content-visibility?

When a page uses anchor links to jump to a section with content-visibility: auto, the browser may not scroll to the correct position because the target element has not been fully rendered yet. Test anchor link behavior if you apply content-visibility to sections that are linked internally.

Related tools

More css tools

Also try

Also try