jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS Content Visibility Generator

Genereer CSS voor content-visibility en contain-intrinsic-size om lange página's te versnellen.

Tool laden...

Wat is CSS Content Visibility Generator?

content-visibility: auto vertelt de browser om renderwerk voor elementen buiten het scherm over te slaan totdat ze de viewport naderen. In combinatie met contain-intrinsic-size geeft het de browser een geschatte grootte, zodat de schuifbalk zich correct gedraagt. Dit kan de prestaties van het renderen aanzienlijk verbeteren op lange pagina's met veel herhaalde secties, zoals blogarchieven, productrasters en documentatie.

Snel antwoord

Gebruik content-visibility: auto om het renderen van elementen buiten het scherm over te slaan totdat ze de viewport naderen. Dit kan de initi锟絣e pagina-laadtijd verbeteren op lange pagina's met veel herhaalde secties.

Last updated: 2026-06-11

Beperkingen

  • Browserondersteuning varieert. Chrome 85+, Edge 85+, Firefox 125+ en Safari 18.2+ ondersteunen content-visibility. Oudere browsers negeren de eigenschap en geven alle inhoud normaal weer.
  • Ankerlinks scrollen mogelijk niet correct naar elementen met content-visibility: auto omdat de browser het doelgebied nog niet heeft weergegeven v锟斤拷r de scrollpoging.
  • Inhoud binnen een content-visibility: auto-sectie is niet onmiddellijk beschikbaar voor schermlezers of zoekopdrachten in pagina omdat de browser de subboom buiten het scherm nog niet heeft weergegeven. Gebruik content-visibility: visible of verwijder de eigenschap op secties die door ondersteunende technologie ontdekt moeten worden.

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

Zo gebruik je deze tool

  1. Kies het inhoudstype dat het beste past bij uw herhaalde secties.
  2. Stel de geschatte gemiddelde hoogte van 锟斤拷n sectie in pixels in.
  3. Kopieer de CSS en pas deze toe op de container-selector voor uw herhaalde secties.
  4. Test de paginaprestaties en het gedrag van de schuifbalk voordat u publiceert.

Waarvoor je het kunt gebruiken

  • Het renderen van lange blogartikellijsten met veel herhaalde kaarten versnellen.
  • Prestaties verbeteren op documentatiepagina's met veel inklapbare secties.
  • Lay-outwerk verminderen op productoverzichtspagina's met honderden items.

Gebruik

Praktische voorbeelden

Voorbeeld

Blogfeed-prestaties

Een blogstartpagina toont 50 berichtkaarten. Het toevoegen van content-visibility: auto met een contain-intrinsic-size van 300px laat de browser het renderen van kaarten buiten het scherm overslaan totdat ze nodig zijn.

Voorbeeld

Documentatiepagina-secties

Een lange documentatiepagina heeft veel onafhankelijke secties. Elke sectie krijgt content-visibility: auto zodat secties buiten het scherm de initi锟絣e paginaweergave niet blokkeren.

Veelgemaakte fouten

  • contain-intrinsic-size te klein of te groot instellen, wat schuifbalkverspringen veroorzaakt wanneer secties worden weergegeven.
  • content-visibility toepassen op elementen die JavaScript-meting nodig hebben of waarnaar wordt gescrold via ankerlinks.
  • Vergeten dat elementen met content-visibility: auto niet worden getekend, wat invloed kan hebben op getBoundingClientRect-metingen.

Verificatie

  1. Scroll door de pagina en controleer of secties buiten het scherm soepel worden weergegeven zonder schuifbalkverspringen of visuele gaten.
  2. Test ankerlinks of URL-hash-navigatie naar secties die content-visibility gebruiken om er zeker van te zijn dat ze naar de juiste positie scrollen.

FAQ

Vragen over CSS Content Visibility Generator

Welke browsers ondersteunen content-visibility?

Chrome 85+, Edge 85+, Firefox 125+ en Safari 18.2+. Het is veilig te gebruiken als progressive enhancement omdat browsers die het niet ondersteunen alle inhoud normaal weergeven.

Hoe werkt contain-intrinsic-size?

Het stelt een tijdelijke grootte in voor het element voordat het wordt weergegeven. Gebruik een schatting dicht bij de werkelijke gemiddelde hoogte, zodat de schuifbalk niet verspringt wanneer secties worden ingetekend.

Heeft content-visibility invloed op SEO?

Content-visibility heeft geen directe invloed op zoekmachine-indexering. Google rendert JavaScript en detecteert zichtbare inhoud normaal. Inhoud die afhankelijk is van JavaScript en nooit in beeld wordt gescrold, wordt mogelijk echter niet ge锟絥dexeerd. Statische HTML-inhoud is veilig, ongeacht content-visibility.

Wat gebeurt er met ankerlinks en content-visibility?

Wanneer een pagina ankerlinks gebruikt om naar een sectie met content-visibility: auto te springen, scrollt de browser mogelijk niet naar de juiste positie omdat het doelelement nog niet volledig is weergegeven. Test het gedrag van ankerlinks als u content-visibility toepast op secties waarnaar intern wordt gelinkt.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool