From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../css/css_scroll_snap/basic_concepts/index.html | 70 ++++++++++++++++++++++ .../css/css_scroll_snap/browser_compat/index.html | 46 ++++++++++++++ .../compatibilit\303\251_navigateurs/index.html" | 46 -------------- .../css_scroll_snap/concepts_de_base/index.html | 70 ---------------------- 4 files changed, 116 insertions(+), 116 deletions(-) create mode 100644 files/fr/web/css/css_scroll_snap/basic_concepts/index.html create mode 100644 files/fr/web/css/css_scroll_snap/browser_compat/index.html delete mode 100644 "files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" delete mode 100644 files/fr/web/css/css_scroll_snap/concepts_de_base/index.html (limited to 'files/fr/web/css/css_scroll_snap') diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html new file mode 100644 index 0000000000..3ec397cfde --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/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 +--- +
{{CSSRef}}
+ +

Le module de spécification CSS Scroll Snap 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).

+ +

Principes fondamentaux

+ +

Les propriétés principales définies par la spécification Scroll Snap sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété scroll-snap-type s'utilise sur le conteneur de défilement (scroll container) et établit le type et la direction du défilement.

+ +

La propriété scroll-snap-align 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 scroll-snap-align est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

+ +

Utiliser scroll-snap-type

+ +

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 : x ou y ou avec des valeurs logiques : block ou inline. On peut également utiliser le mot-clé both afin d'avoir un défilement et des accroches selon les deux axes.

+ +

Cette propriété s'utilise également avec les mots-clés mandatory ou proximity. Le mot-clé mandatory indique au navigateur que le contenu doit s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé proximity indique que le contenu peut s'accrocher sur un point mais que ce n'est pas obligatoire.

+ +

La valeur mandatory 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 mandatory dans des situations maîtrisées où la taille du contenu sur un écran est connue.

+ +

La valeur proximity 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 mandatory à proximity afin d'observer l'effet obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

+ +

Utiliser scroll-snap-align

+ +

La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs start, end ou center. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur scroll-snap-align dans l'exemple interactif qui suit pour voir le résultat obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

+ +

Ajuster la position de défilement avec un remplissage

+ +

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 (padding) pour décaler la position du contenu.

+ +

Dans l'exemple qui suit, on paramètre scroll-padding à 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 scroll-padding afin de voir l'impact sur le décalage obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

+ +

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 scroll-padding, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <h1> 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.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

+ +

Ajouter des marges sur les éléments fils du défilement

+ +

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. scroll-margin définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

+ +

La propriété scroll-snap-stop

+ +

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.

+ +

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.

+ +
+

Note : La propriété scroll-snap-stop est actuellement mise en question dans la version Candidate Recommendation de la spécification et pourrait être retirée.

+
+ +

Compatibilité des navigateurs

+ +

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 poursuivre avec le guide suivant 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.

diff --git a/files/fr/web/css/css_scroll_snap/browser_compat/index.html b/files/fr/web/css/css_scroll_snap/browser_compat/index.html new file mode 100644 index 0000000000..f5d6f97ca4 --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/browser_compat/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 +--- +
{{CSSRef}}
+ +

Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. 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.

+ +

Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?

+ +

Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par Scroll Snap Points, 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.

+ +

Voici les principaux points d'attention :

+ + + +

Comment utiliser l'ancienne implémentation comme méthode de recours ?

+ +

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.

+ +

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.

+ +

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 y (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur y.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

+ +

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 Scroll Snap Points.

+ +

Faut-il utiliser les deux spécifications ?

+ +

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.

+ +

Si vous souhaitez tester la prise en charge grâce aux requêtes de fonctionnalité, 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.

+ +

Pourquoi existent deux versions ?

+ +

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.

diff --git "a/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" "b/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" deleted file mode 100644 index f5d6f97ca4..0000000000 --- "a/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" +++ /dev/null @@ -1,46 +0,0 @@ ---- -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 ---- -
{{CSSRef}}
- -

Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. 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.

- -

Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?

- -

Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par Scroll Snap Points, 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.

- -

Voici les principaux points d'attention :

- - - -

Comment utiliser l'ancienne implémentation comme méthode de recours ?

- -

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.

- -

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.

- -

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 y (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur y.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

- -

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 Scroll Snap Points.

- -

Faut-il utiliser les deux spécifications ?

- -

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.

- -

Si vous souhaitez tester la prise en charge grâce aux requêtes de fonctionnalité, 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.

- -

Pourquoi existent deux versions ?

- -

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.

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 deleted file mode 100644 index 3ec397cfde..0000000000 --- a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -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 ---- -
{{CSSRef}}
- -

Le module de spécification CSS Scroll Snap 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).

- -

Principes fondamentaux

- -

Les propriétés principales définies par la spécification Scroll Snap sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété scroll-snap-type s'utilise sur le conteneur de défilement (scroll container) et établit le type et la direction du défilement.

- -

La propriété scroll-snap-align 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 scroll-snap-align est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

- -

Utiliser scroll-snap-type

- -

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 : x ou y ou avec des valeurs logiques : block ou inline. On peut également utiliser le mot-clé both afin d'avoir un défilement et des accroches selon les deux axes.

- -

Cette propriété s'utilise également avec les mots-clés mandatory ou proximity. Le mot-clé mandatory indique au navigateur que le contenu doit s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé proximity indique que le contenu peut s'accrocher sur un point mais que ce n'est pas obligatoire.

- -

La valeur mandatory 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 mandatory dans des situations maîtrisées où la taille du contenu sur un écran est connue.

- -

La valeur proximity 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 mandatory à proximity afin d'observer l'effet obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

- -

Utiliser scroll-snap-align

- -

La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs start, end ou center. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur scroll-snap-align dans l'exemple interactif qui suit pour voir le résultat obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

- -

Ajuster la position de défilement avec un remplissage

- -

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 (padding) pour décaler la position du contenu.

- -

Dans l'exemple qui suit, on paramètre scroll-padding à 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 scroll-padding afin de voir l'impact sur le décalage obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

- -

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 scroll-padding, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <h1> 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.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

- -

Ajouter des marges sur les éléments fils du défilement

- -

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. scroll-margin définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

- -

La propriété scroll-snap-stop

- -

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.

- -

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.

- -
-

Note : La propriété scroll-snap-stop est actuellement mise en question dans la version Candidate Recommendation de la spécification et pourrait être retirée.

-
- -

Compatibilité des navigateurs

- -

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 poursuivre avec le guide suivant 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.

-- cgit v1.2.3-54-g00ecf