jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur CSS content-visibility

Générez du CSS pour content-visibility et contain-intrinsic-size afin d'accelerer les pages longues.

Chargement de l'outil...

Qu'est-ce que Generateur CSS content-visibility ?

content-visibility: auto indique au navigateur d'ignorer le travail de rendu pour les elements hors ecran jusqu'a ce qu'ils s'approchent de la zone d'affichage. Associe a contain-intrinsic-size, il donne au navigateur une taille estimee afin que la barre de defilement se comporte correctement. Cela peut ameliorer considerablement les performances de rendu sur les longues pages avec de nombreuses sections repetees telles que les archives de blog, les grilles de produits et la documentation.

Réponse rapide

Utilisez content-visibility: auto pour ignorer le rendu des elements hors ecran jusqu'a ce qu'ils s'approchent de la zone d'affichage. Cela peut ameliorer les performances de chargement initial des pages sur les longues pages avec de nombreuses sections repetees.

Last updated: 2026-06-11

Limites

  • La prise en charge du navigateur varie. Chrome 85+, Edge 85+, Firefox 125+ et Safari 18.2+ supportent content-visibility. Les navigateurs plus anciens ignorent la propriete et rendent tout le contenu normalement.
  • Les liens d'ancrage peuvent ne pas defiler correctement vers les elements avec content-visibility: auto car le navigateur n'a pas rendu la zone cible avant la tentative de defilement.
  • Le contenu dans une section content-visibility: auto n'est pas immediatement disponible pour les lecteurs d'ecran ou la recherche dans la page car le navigateur n'a pas rendu le sous-arbre hors ecran. Utilisez content-visibility: visible ou supprimez la propriete sur les sections qui doivent etre decouvrables par les technologies d'assistance.

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

Comment utiliser cet outil

  1. Choisissez le type de contenu qui correspond le mieux a vos sections repetees.
  2. Definissez la hauteur moyenne estimee d'une section en pixels.
  3. Copiez le CSS et appliquez-le au selecteur de conteneur pour vos sections repetees.
  4. Testez les performances de la page et le comportement de la barre de defilement avant de publier.

A quoi il sert

  • Accelerer le rendu des longues listes d'articles de blog avec de nombreuses cartes repetees.
  • Ameliorer les performances sur les pages de documentation avec de nombreuses sections pliables.
  • Reduire le travail de mise en page sur les pages de listes de produits avec des centaines d'elements.

Cas d'usage

Exemples concrets

Exemple

Performance du flux de blog

Une page d'accueil de blog montre 50 cartes d'articles. L'ajout de content-visibility: auto avec une contain-intrinsic-size de 300px permet au navigateur d'ignorer le rendu des cartes hors ecran jusqu'a ce qu'elles soient necessaires.

Exemple

Sections de page de documentation

Une longue page de documentation comporte de nombreuses sections independantes. Chaque section recoit content-visibility: auto afin que les sections hors ecran ne bloquent pas le rendu initial de la page.

Erreurs frequentes

  • Definir contain-intrinsic-size trop petit ou trop grand, ce qui provoque un saut de la barre de defilement lors du rendu des sections.
  • Appliquer content-visibility a des elements qui necessitent des mesures JavaScript ou qui sont scrolles via des liens d'ancrage.
  • Oublier que les elements avec content-visibility: auto ne sont pas peints, ce qui peut affecter les mesures getBoundingClientRect.

Vérification

  1. Faites defiler la page et confirmez que les sections hors ecran se rendent en douceur sans sauts de barre de defilement ni espaces visuels.
  2. Testez les liens d'ancrage ou la navigation par hash URL vers les sections qui utilisent content-visibility pour garantir qu'ils defilent vers la bonne position.

FAQ

Questions sur Generateur CSS content-visibility

Quels navigateurs supportent content-visibility ?

Chrome 85+, Edge 85+, Firefox 125+ et Safari 18.2+. Il est sûr de l'utiliser comme une amelioration progressive car les navigateurs qui ne le supportent pas rendent simplement tout le contenu normalement.

Comment fonctionne contain-intrinsic-size ?

Il definit une taille d'espace reserve pour l'element avant son rendu. Utilisez une estimation proche de la hauteur moyenne reelle afin que la barre de defilement ne saute pas lors du rendu des sections.

Est-ce que content-visibility affecte le SEO ?

content-visibility n'affecte pas directement l'indexation par les moteurs de recherche. Google rend le JavaScript et detecte le contenu visible normalement. Cependant, le contenu qui depend de JavaScript et n'est jamais fait defiler dans la vue peut ne pas etre indexe. Le contenu HTML statique est sûr independamment de content-visibility.

Que se passe-t-il avec les liens d'ancrage et content-visibility ?

Lorsqu'une page utilise des liens d'ancrage pour sauter vers une section avec content-visibility: auto, le navigateur peut ne pas defiler vers la bonne position car l'element cible n'a pas encore ete entierement rendu. Testez le comportement des liens d'ancrage si vous appliquez content-visibility a des sections liees en interne.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi