Content-visibility - Propriété CSS

content-visibility

Résumé des caractéristiques de la propriété content-visibility

Description rapide
Définit si le contenu de l'élément (y compris les sous-éléments) doit être restitué ou pas.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
visible | auto | hidden
Pourcentages
Ne s'appliquent pas.
Valeur initiale
visible
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété content-visibility ne peut pas être animée.
Module W3C
Module CSS - Confinement
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: WD (document de travail)
⚠
Cette page sera prochainement mise à jour.

Schéma de la syntaxe de content-visibility.

content-visibility - Syntax DiagramSyntax diagram of the content-visibility CSS property. See stylescss.free.fr for details. visible visible hidden hidden auto autocontent-visibility:;content-visibility:;
Schéma syntaxique de la propriété content-visibility.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété content-visibility.

Valeurs pour content-visibility.

  • content-visibility: visible;

    La propriété est sans effet. : la mise en page du contenu de l'élément est calculée même si ce dernier n'est pas visible.

  • content-visibility: hidden;

    La mise en page du contenu de l'élément n'est pas réalisé tant que l'élément n'est pas visible. Ce contenu ne participe pas aux recherches.

  • content-visibility: auto;

    La mise en page du contenu de l'élément n'est pas réalisée mais le contenu participe aux recherches,

  • content-visibility: initial; (visible) content-visibility: inherit; content-visibility: revert; content-visibility: revertLayer; content-visibility: unset;

    Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété content-visibility.

content-visibility :

Compatibilité des navigateurs avec content-visibility.

Colonne 1
Traitement correct de la propriété content-visibility qui évite le rendu des éléments qui ne sont pas dans le viewport.
1
Propriété
Content Viisibility
Estimation de la prise en charge globale.
90%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Histoire de la propriété content-visibility.

Voir aussi, au sujet du confinement (containment).

La spécification CSS relative aux techniques de confinement est dénommée CSS Containment Module. La propriété content-visibility est décrite dans ce module de la norme, ainsi que les termes suivants :

Propriétés :

contain
Propriété d'optimisation, pour faciliter et accélérer le travail de mise en page.
container
Définit les caractéristiques d'un conteneur utilisable dans une container query (contexte d'éléments confinés).
container-name
Attribue un identifiant à un élément pour en faire un conteneur utilisable dans une container query (contexte d'éléments confinés).
container-type
Définit le type d'un conteneur utilisable dans une container query (contexte d'éléments confinés).

Directives :

@container
Permet d'écrire des règles CSS conditionnelles en fonction des caratéristiques du conteneur.