diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:59:20 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch) | |
tree | a8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/overflow-anchor | |
parent | 149319bb8c7b1394a443f0877c3460cd362aa815 (diff) | |
download | translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2 translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip |
convert content to md
Diffstat (limited to 'files/fr/web/css/overflow-anchor')
-rw-r--r-- | files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md | 80 | ||||
-rw-r--r-- | files/fr/web/css/overflow-anchor/index.md | 84 |
2 files changed, 73 insertions, 91 deletions
diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md index cecf8f743f..ea37884c8f 100644 --- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md @@ -8,71 +8,67 @@ tags: translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring original_slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).</p> +Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin). -<p>L'ancrage du défilement (ou <em>scroll anchoring</em> en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).</p> +L'ancrage du défilement (ou _scroll anchoring_ en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document). -<h2 id="Comment_cela_fonctionne">Comment cela fonctionne ?</h2> +## Comment cela fonctionne ? -<p>L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (<em>viewport</em>). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).</p> +L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (_viewport_). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document). -<h2 id="Comment_activer_l'ancrage_du_défilement">Comment activer l'ancrage du défilement ?</h2> +## Comment activer l'ancrage du défilement ? -<p>Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.</p> +Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue. -<h2 id="Si_besoin_que_faire_pour_le_désactiver">Si besoin, que faire pour le désactiver ?</h2> +## Si besoin, que faire pour le désactiver ? -<p>La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.</p> +La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement. -<p>Les valeurs utilisables pour cette propriété sont <code>auto</code> ou <code>none</code> :</p> +Les valeurs utilisables pour cette propriété sont `auto` ou `none` : -<ul> - <li><code>auto</code> correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.</li> - <li><code>none</code> signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.</li> -</ul> +- `auto` correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques. +- `none` signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document. -<p>Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :</p> +Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} : -<pre class="brush: css">body { +```css +body { overflow-anchor: none; -} </pre> +} +``` -<p>Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera <code>overflow-anchor: none</code> sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :</p> +Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera `overflow-anchor: none` sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu : -<pre class="brush: css">.container { +```css +.container { overflow-anchor: none; -} </pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) <code>overflow-anchor: auto</code> à un autre endroit du document.</p> -</div> +> **Note :** Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) `overflow-anchor: auto` à un autre endroit du document. -<h3 id="Supression_triggers">Supression triggers</h3> +### Supression triggers -<p>La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.</p> +La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé. -<p>Les évènements en question sont les modifications des <a href="/fr/docs/Web/CSS/Valeur_calculée">valeurs calculées</a> des propriétés suivantes :</p> +Les évènements en question sont les modifications des [valeurs calculées](/fr/docs/Web/CSS/Valeur_calculée) des propriétés suivantes : -<ul> - <li>{{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}</li> - <li>{{cssxref("margin")}} ou {{cssxref("padding")}}</li> - <li>Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}</li> - <li>{{cssxref("position")}}</li> - <li>{{cssxref("transform")}}</li> -</ul> +- {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}} +- {{cssxref("margin")}} ou {{cssxref("padding")}} +- Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}} +- {{cssxref("position")}} +- {{cssxref("transform")}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser <a href="/fr/docs/Web/CSS/@supports">les requêtes de fonctionnalité</a> afin de tester la prise en charge de la propriété <code>overflow-anchor</code>.</p> +Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser [les requêtes de fonctionnalité](/fr/docs/Web/CSS/@supports) afin de tester la prise en charge de la propriété `overflow-anchor`. -<p>{{Compat("css.properties.overflow-anchor")}}</p> +{{Compat("css.properties.overflow-anchor")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md">Document d'explication sur le site du WICG (en anglais)</a></li> - <li><a href="https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html">L'ancrage du défilement pour les développeurs web - Blog Chromium (en anglais)</a></li> - <li><a href="https://blog.eqrion.net/pin-to-bottom/">Implémenter un élément avec le défilement fixe en bas (en anglais)</a></li> -</ul> +- [Document d'explication sur le site du WICG (en anglais)](https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md) +- [L'ancrage du défilement pour les développeurs web - Blog Chromium (en anglais)](https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html) +- [Implémenter un élément avec le défilement fixe en bas (en anglais)](https://blog.eqrion.net/pin-to-bottom/) diff --git a/files/fr/web/css/overflow-anchor/index.md b/files/fr/web/css/overflow-anchor/index.md index 2d71155710..3e4d2f1d46 100644 --- a/files/fr/web/css/overflow-anchor/index.md +++ b/files/fr/web/css/overflow-anchor/index.md @@ -7,15 +7,16 @@ tags: - Reference translation_of: Web/CSS/overflow-anchor --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>overflow-anchor</code></strong> permet d'éviter, lors du défilement, que le navigateur ajuste la position afin de minimiser le déplacement du contenu.</p> +La propriété **`overflow-anchor`** permet d'éviter, lors du défilement, que le navigateur ajuste la position afin de minimiser le déplacement du contenu. -<p>Ce comportement est activé par défaut pour les navigateurs qui le prenne en charge. Aussi, cette propriété est uniquement nécessaire lorsque vous rencontrez des problèmes de défilement dans un document et que vous souhaitez désactiver ce comportement.</p> +Ce comportement est activé par défaut pour les navigateurs qui le prenne en charge. Aussi, cette propriété est uniquement nécessaire lorsque vous rencontrez des problèmes de défilement dans un document et que vous souhaitez désactiver ce comportement. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ overflow-anchor: auto; overflow-anchor: none; @@ -23,56 +24,41 @@ overflow-anchor: none; overflow-anchor: inherit; overflow-anchor: initial; overflow-anchor: unset; -</pre> +``` -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code>auto</code></dt> - <dd>L'élément peut devenir une ancre lorsque la position de défilement est ajustée.</dd> - <dt><code>none</code></dt> - <dd>L'élément ne sera pas sélectionné comme ancre.</dd> -</dl> +- `auto` + - : L'élément peut devenir une ancre lorsque la position de défilement est ajustée. +- `none` + - : L'élément ne sera pas sélectionné comme ancre. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Pour désactiver l'ancrage du défilement, on pourra utiliser cette propriété :</p> +Pour désactiver l'ancrage du défilement, on pourra utiliser cette propriété : -<pre class="brush: css">body { +```css +body { overflow-anchor: none; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}</td> - <td>{{Spec2('CSS Scroll Anchoring')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.properties.overflow-anchor")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring">Guide sur l'ancrage du défilement (<em>scroll anchoring</em>)</a></li> -</ul> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}} | {{Spec2('CSS Scroll Anchoring')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.overflow-anchor")}} + +## Voir aussi + +- [Guide sur l'ancrage du défilement (_scroll anchoring_)](/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring) |