diff options
Diffstat (limited to 'files/fr/web/css/css_scroll_snap')
3 files changed, 200 insertions, 0 deletions
diff --git a/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html b/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html new file mode 100644 index 0000000000..f5d6f97ca4 --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html @@ -0,0 +1,46 @@ +--- +title: Compatibilité des navigateurs et CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs +tags: + - CSS + - CSS Scroll Snap + - Compatibilité + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +<div>{{CSSRef}}</div> + +<p class="summary">Firefox implémentait initialement une première version de la spécification <em>Scroll Snap</em> appelée alors <em>Scroll Snap Points</em>. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.</p> + +<h2 class="summary" id="Que_faire_si_mon_style_utilisait_l'ancienne_implémentation_(Firefox_<_68)">Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?</h2> + +<p>Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par <em>Scroll Snap Points</em>, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.</p> + +<p>Voici les principaux points d'attention :</p> + +<ul> + <li>Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées</li> + <li>La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. <code>scroll-snap-type: mandatory</code>) cessera de fonctionner</li> +</ul> + +<h2 id="Comment_utiliser_l'ancienne_implémentation_comme_méthode_de_recours">Comment utiliser l'ancienne implémentation comme méthode de recours ?</h2> + +<p class="summary">Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.</p> + +<p>Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.</p> + +<p>L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur <code>y</code> (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur <code>y</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}</p> + +<p>Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section <em><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap_Points">Scroll Snap Points</a></em>.</p> + +<h2 id="Faut-il_utiliser_les_deux_spécifications">Faut-il utiliser les deux spécifications ?</h2> + +<p>Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.</p> + +<p>Si vous souhaitez tester la prise en charge grâce <a href="/en-US/docs/Web/CSS/@supports">aux requêtes de fonctionnalité</a>, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.</p> + +<h2 id="Pourquoi_existent_deux_versions">Pourquoi existent deux versions ?</h2> + +<p>Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.</p> diff --git a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html new file mode 100644 index 0000000000..3ec397cfde --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html @@ -0,0 +1,70 @@ +--- +title: Concepts de bases pour CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base +tags: + - CSS + - CSS Scroll Snap + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts +--- +<div>{{CSSRef}}</div> + +<p class="summary"><a href="https://drafts.csswg.org/css-scroll-snap-1/">Le module de spécification CSS <em>Scroll Snap</em></a> fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).</p> + +<h2 id="Principes_fondamentaux">Principes fondamentaux</h2> + +<p>Les propriétés principales définies par la spécification <em>Scroll Snap</em> sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété <code>scroll-snap-type</code> s'utilise sur <a href="/fr/docs/Glossary/Scroll_container">le conteneur de défilement (<em>scroll container</em>)</a> et établit le type et la direction du défilement.</p> + +<p>La propriété <code>scroll-snap-align</code> doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et <code>scroll-snap-align</code> est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.</p> + +<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}</p> + +<h2 id="Utiliser_scroll-snap-type">Utiliser <code>scroll-snap-type</code></h2> + +<p>La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : <code>x</code> ou <code>y</code> ou avec des valeurs logiques : <code>block</code> ou <code>inline</code>. On peut également utiliser le mot-clé <code>both</code> afin d'avoir un défilement et des accroches selon les deux axes.</p> + +<p>Cette propriété s'utilise également avec les mots-clés <code>mandatory</code> ou <code>proximity</code>. Le mot-clé <code>mandatory</code> indique au navigateur que le contenu <em>doit</em> s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé <code>proximity</code> indique que le contenu <em>peut</em> s'accrocher sur un point mais que ce n'est pas obligatoire.</p> + +<p>La valeur <code>mandatory</code> permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera <code>mandatory</code> dans des situations maîtrisées où la taille du contenu sur un écran est connue.</p> + +<p>La valeur <code>proximity</code> déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de <code>mandatory</code> à <code>proximity</code> afin d'observer l'effet obtenu.</p> + +<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}</p> + +<h2 id="Utiliser_scroll-snap-align">Utiliser <code>scroll-snap-align</code></h2> + +<p>La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs <code>start</code>, <code>end</code> ou <code>center</code>. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur <code>scroll-snap-align</code> dans l'exemple interactif qui suit pour voir le résultat obtenu.</p> + +<p>{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}</p> + +<h2 id="Ajuster_la_position_de_défilement_avec_un_remplissage">Ajuster la position de défilement avec un remplissage</h2> + +<p>Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (<em>padding</em>) pour décaler la position du contenu.</p> + +<p>Dans l'exemple qui suit, on paramètre <code>scroll-padding</code> à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de <code>scroll-padding</code> afin de voir l'impact sur le décalage obtenu.</p> + +<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}</p> + +<p>Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant <code>scroll-padding</code>, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <code><h1></code> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.</p> + +<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}</p> + +<h2 id="Ajouter_des_marges_sur_les_éléments_fils_du_défilement">Ajouter des marges sur les éléments fils du défilement</h2> + +<p>Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. <code>scroll-margin</code> définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :</p> + +<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}</p> + +<h2 id="La_propriété_scroll-snap-stop">La propriété <code>scroll-snap-stop</code></h2> + +<p>La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.</p> + +<p>Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> La propriété <code>scroll-snap-stop</code> est actuellement mise en question dans la version <em>Candidate Recommendation</em> de la spécification et pourrait être retirée.</p> +</div> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat">poursuivre avec le guide suivant</a> pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.</p> diff --git a/files/fr/web/css/css_scroll_snap/index.html b/files/fr/web/css/css_scroll_snap/index.html new file mode 100644 index 0000000000..6e79f674df --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/index.html @@ -0,0 +1,84 @@ +--- +title: CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS Scroll Snap + - Reference + - Vue d'ensemble +translation_of: Web/CSS/CSS_Scroll_Snap +--- +<div>{{CSSRef}}</div> + +<p class="summary"><em><strong>CSS Scroll Snap</strong></em> est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.</p> + +<div class="note"> +<p><strong>Note :</strong> La version précédente ce module, <em>Scroll Snap Points</em>, est dépréciée et est désormais remplacée par <em>CSS Scroll Snap</em>.</p> +</div> + +<h2 id="Référence">Référence</h2> + +<h3 id="Propriétés_CSS_applicables_aux_conteneurs">Propriétés CSS applicables aux conteneurs</h3> + +<ul> + <li>{{cssxref("scroll-snap-type")}}</li> + <li>{{cssxref("scroll-snap-stop")}}</li> + <li>{{cssxref("scroll-padding")}}</li> + <li>{{cssxref("scroll-padding-top")}}</li> + <li>{{cssxref("scroll-padding-right")}}</li> + <li>{{cssxref("scroll-padding-bottom")}}</li> + <li>{{cssxref("scroll-padding-left")}}</li> + <li>{{cssxref("scroll-padding-inline")}}</li> + <li>{{cssxref("scroll-padding-inline-start")}}</li> + <li>{{cssxref("scroll-padding-inline-end")}}</li> + <li>{{cssxref("scroll-padding-block")}}</li> + <li>{{cssxref("scroll-padding-block-start")}}</li> + <li>{{cssxref("scroll-padding-block-end")}}</li> +</ul> + +<h3 id="Propriétés_CSS_applicables_aux_éléments_enfants">Propriétés CSS applicables aux éléments enfants</h3> + +<ul> + <li>{{cssxref("scroll-snap-align")}}</li> + <li>{{cssxref("scroll-margin")}}</li> + <li>{{cssxref("scroll-margin-top")}}</li> + <li>{{cssxref("scroll-margin-right")}}</li> + <li>{{cssxref("scroll-margin-bottom")}}</li> + <li>{{cssxref("scroll-margin-left")}}</li> + <li>{{cssxref("scroll-margin-inline")}}</li> + <li>{{cssxref("scroll-margin-inline-start")}}</li> + <li>{{cssxref("scroll-margin-inline-end")}}</li> + <li>{{cssxref("scroll-margin-block")}}</li> + <li>{{cssxref("scroll-margin-block-start")}}</li> + <li>{{cssxref("scroll-margin-block-end")}}</li> +</ul> + +<h2 id="Guides">Guides</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Concepts_de_base">Concepts de bases pour <em>CSS Scroll Snap</em></a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs">Compatiblité des navigateurs et <em>CSS Scroll Snap</em></a></li> +</ul> + +<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 Snap Points")}}</td> + <td>{{Spec2("CSS Scroll Snap Points")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>Les informations de compatibilité sont présentes sur chacune des pages des propriétés. <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs">Voir le guide sur la compatibilité des navigateurs</a> afin de comprendre comment les différentes versions de la spécification sont implémentées.</p> |