From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/content-visibility/index.md | 89 ++++++++++++++-------------- 1 file changed, 44 insertions(+), 45 deletions(-) (limited to 'files/fr/web/css/content-visibility') diff --git a/files/fr/web/css/content-visibility/index.md b/files/fr/web/css/content-visibility/index.md index 91d03762bf..77aa2ea185 100644 --- a/files/fr/web/css/content-visibility/index.md +++ b/files/fr/web/css/content-visibility/index.md @@ -1,16 +1,17 @@ --- title: content-visibility slug: Web/CSS/content-visibility -browser-compat: css.properties.content-visibility translation_of: Web/CSS/content-visibility +browser-compat: css.properties.content-visibility --- -

{{CSSRef}}

+{{CSSRef}} -

La propriété CSS content-visibility détermine si un élément affiche son contenu ou non, tout en forçant un solide jeu de restrictions permettant aux agents utilisateurs de potentiellement omettre de larges pans de la mise en page et du travail de rendu jusqu'au moment où le contenu doit être affiché. Fondamentalement, cela permet à l'agent utilisateur d'éviter le travail de rendu d'un élément (comprenant sa mise en page et sa peinture) tant qu'il n'y en a pas besoin — ce qui accélère la vitesse de chargement de la page initiale.

+La propriété [CSS](/fr/docs/Web/CSS) **`content-visibility`** détermine si un élément affiche son contenu ou non, tout en forçant un solide jeu de restrictions permettant aux agents utilisateurs de potentiellement omettre de larges pans de la mise en page et du travail de rendu jusqu'au moment où le contenu doit être affiché. Fondamentalement, cela permet à l'agent utilisateur d'éviter le travail de rendu d'un élément (comprenant sa mise en page et sa peinture) tant qu'il n'y en a pas besoin — ce qui accélère la vitesse de chargement de la page initiale. -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 content-visibility: visible;
 content-visibility: hidden;
 content-visibility: auto;
@@ -20,53 +21,53 @@ content-visibility: inherit;
 content-visibility: initial;
 content-visibility: revert;
 content-visibility: unset;
-
+``` -

Valeurs

+### Valeurs -
-
visible
-
Aucun effet. Les contenus de l'élément sont disposés et rendus normalement.
-
hidden
-
L'élément n'affiche pas son contenu. Les contenus de l'élément ne doivent pas être accessibles aux fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il n'est pas possible de les sélectionner ou d'y placer le focus. Cela est similaire à l'utilisation de display: none sur ces contenus.
-
auto
-
L'élément suit les restrictions de mise en page, de style et de peinture. Si l'élément n'est pas pertinent pour l'utilisateur, cela évite également son contenu. Contrairement à la valeur hidden, le contenu évité doit toujours être disponible normalement pour les fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il est possible de les sélectionner ou d'y placer le focus.
-
+- `visible` + - : Aucun effet. Les contenus de l'élément sont disposés et rendus normalement. +- `hidden` + - : L'élément n'affiche pas son contenu. Les contenus de l'élément ne doivent pas être accessibles aux fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il n'est pas possible de les sélectionner ou d'y placer le focus. Cela est similaire à l'utilisation de `display: none` sur ces contenus. +- `auto` + - : L'élément suit les restrictions de mise en page, de style et de peinture. Si l'élément n'est pas pertinent pour l'utilisateur, cela évite également son contenu. Contrairement à la valeur `hidden`, le contenu évité doit toujours être disponible normalement pour les fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il est possible de les sélectionner ou d'y placer le focus. -

Définition formelle

+## Définition formelle -

{{cssinfo}}

+{{cssinfo}} -

Accessibilité

+## Accessibilité -

Les titres et les autres contenus seront supprimés par content-visibility s'ils sont considérés comme s'affichant en dehors de l'écran. Cela signifie que les utilisateurs de lecteurs d'écrans pourraient perdre le bénéfice d'avoir une page complète disponible à des fins de vocalisation.

+Les titres et les autres contenus seront supprimés par `content-visibility` s'ils sont considérés comme s'affichant en dehors de l'écran. Cela signifie que les utilisateurs de lecteurs d'écrans pourraient perdre le bénéfice d'avoir une page complète disponible à des fins de vocalisation. -

Pour plus d'informations, consultez l'article Content-visibility and Accessible Semantics (en anglais).

+Pour plus d'informations, consultez l'article [Content-visibility and Accessible Semantics](https://marcysutton.com/content-visibility-accessible-semantics) (en anglais). -

Exemples

+## Exemples -

Utilisation de la valeur auto pour réduire les coûts de rendu des pages longues

+### Utilisation de la valeur auto pour réduire les coûts de rendu des pages longues -

L'exemple suivant montre l'utilisation de la valeur auto pour éviter la peinture et le rendu des sections situées en dehors de l'écran. Cela aide à la fois le chargement et les interactions sur la page, car le contenu situé en dehors de la fenêtre d'affichage n'est pas rendu.

+L'exemple suivant montre l'utilisation de la valeur `auto` pour éviter la peinture et le rendu des sections situées en dehors de l'écran. Cela aide à la fois le chargement et les interactions sur la page, car le contenu situé en dehors de la fenêtre d'affichage n'est pas rendu. -
<style>
+```html
+