From fb3caec251077c26392d8897c6617031e7d1f5ab Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 27 Nov 2021 00:48:15 +0000 Subject: [CRON] sync translated content --- files/fr/_redirects.txt | 3 +- files/fr/_wikihistory.json | 12 +++--- .../conflicting/web/css/css_scroll_snap/index.md | 45 ++++++++++++++++++++ .../css/css_scroll_snap/browser_compat/index.md | 45 -------------------- files/ja/_redirects.txt | 1 + files/ja/_wikihistory.json | 14 +++---- .../conflicting/web/css/css_scroll_snap/index.md | 49 ++++++++++++++++++++++ .../css/css_scroll_snap/browser_compat/index.md | 48 --------------------- 8 files changed, 110 insertions(+), 107 deletions(-) create mode 100644 files/fr/conflicting/web/css/css_scroll_snap/index.md delete mode 100644 files/fr/web/css/css_scroll_snap/browser_compat/index.md create mode 100644 files/ja/conflicting/web/css/css_scroll_snap/index.md delete mode 100644 files/ja/web/css/css_scroll_snap/browser_compat/index.md diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index e770de7f73..a38e761993 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -4014,7 +4014,8 @@ /fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement /fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning /fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages /fr/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding /fr/docs/Web/CSS/CSS_Masks /fr/docs/Web/CSS/CSS_Masking -/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs /fr/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat +/fr/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat /fr/docs/conflicting/Web/CSS/CSS_Scroll_Snap +/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs /fr/docs/conflicting/Web/CSS/CSS_Scroll_Snap /fr/docs/Web/CSS/CSS_Scroll_Snap/Concepts_de_base /fr/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts /fr/docs/Web/CSS/CSS_Selectors/Utiliser_la_pseudo-classe_:target_dans_un_selecteur /fr/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors /fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS /fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index f13989f5f4..ddff6a86f4 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -25048,12 +25048,6 @@ "SphinxKnight" ] }, - "Web/CSS/CSS_Scroll_Snap/Browser_compat": { - "modified": "2019-07-21T13:28:24.043Z", - "contributors": [ - "SphinxKnight" - ] - }, "Web/CSS/CSS_Scroll_Snap_Points": { "modified": "2019-04-26T04:18:54.788Z", "contributors": [ @@ -43312,6 +43306,12 @@ "SphinxKnight" ] }, + "conflicting/Web/CSS/CSS_Scroll_Snap": { + "modified": "2019-07-21T13:28:24.043Z", + "contributors": [ + "SphinxKnight" + ] + }, "conflicting/Web/CSS/Filter_Effects": { "modified": "2019-03-23T22:35:55.917Z", "contributors": [ diff --git a/files/fr/conflicting/web/css/css_scroll_snap/index.md b/files/fr/conflicting/web/css/css_scroll_snap/index.md new file mode 100644 index 0000000000..e2f74c3d97 --- /dev/null +++ b/files/fr/conflicting/web/css/css_scroll_snap/index.md @@ -0,0 +1,45 @@ +--- +title: Compatibilité des navigateurs et CSS Scroll Snap +slug: conflicting/Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS Scroll Snap + - Compatibilité + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +original_slug: 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 : + +- Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées +- La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. `scroll-snap-type: mandatory`) cessera de fonctionner + +## 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](/fr/docs/Web/CSS/CSS_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é](/en-US/docs/Web/CSS/@supports), 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/browser_compat/index.md b/files/fr/web/css/css_scroll_snap/browser_compat/index.md deleted file mode 100644 index c68c8d9693..0000000000 --- a/files/fr/web/css/css_scroll_snap/browser_compat/index.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Compatibilité des navigateurs et CSS Scroll Snap -slug: Web/CSS/CSS_Scroll_Snap/Browser_compat -tags: - - CSS - - CSS Scroll Snap - - Compatibilité - - Guide -translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat -original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs ---- -{{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 : - -- Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées -- La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. `scroll-snap-type: mandatory`) cessera de fonctionner - -## 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](/fr/docs/Web/CSS/CSS_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é](/en-US/docs/Web/CSS/@supports), 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/ja/_redirects.txt b/files/ja/_redirects.txt index 029fae7726..22601ab223 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3656,6 +3656,7 @@ /ja/docs/Web/CSS/CSS_Masks /ja/docs/Web/CSS/CSS_Masking /ja/docs/Web/CSS/CSS_Reference /ja/docs/Web/CSS/Reference /ja/docs/Web/CSS/CSS_Reference/Mozilla_Extensions /ja/docs/Web/CSS/Mozilla_Extensions +/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat /ja/docs/conflicting/Web/CSS/CSS_Scroll_Snap /ja/docs/Web/CSS/CSS_Selectors/Comparison_with_XPath /ja/docs/Web/XPath/Comparison_with_CSS_selectors /ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values /ja/docs/Web/CSS/CSS_Shapes/From_box_values /ja/docs/Web/CSS/CSS_User_Interface /ja/docs/Web/CSS/CSS_Basic_User_Interface diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index ad7fa7a410..3b3ca3532e 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -28684,13 +28684,6 @@ "mfuji09" ] }, - "Web/CSS/CSS_Scroll_Snap/Browser_compat": { - "modified": "2020-02-21T23:37:52.316Z", - "contributors": [ - "yuheiy", - "mfuji09" - ] - }, "Web/CSS/CSS_Scroll_Snap_Points": { "modified": "2020-10-15T21:58:12.862Z", "contributors": [ @@ -48605,6 +48598,13 @@ "Wind1808" ] }, + "conflicting/Web/CSS/CSS_Scroll_Snap": { + "modified": "2020-02-21T23:37:52.316Z", + "contributors": [ + "yuheiy", + "mfuji09" + ] + }, "conflicting/Web/CSS/Media_Queries/Using_media_queries": { "modified": "2020-05-24T03:45:53.652Z", "contributors": [ diff --git a/files/ja/conflicting/web/css/css_scroll_snap/index.md b/files/ja/conflicting/web/css/css_scroll_snap/index.md new file mode 100644 index 0000000000..3a477e0dbb --- /dev/null +++ b/files/ja/conflicting/web/css/css_scroll_snap/index.md @@ -0,0 +1,49 @@ +--- +title: ブラウザーの互換性とスクロールスナップ +slug: conflicting/Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS スクロールスナップ + - 互換性 + - FAQ + - ガイド + - Usage + - browser compat + - compat +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +original_slug: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +{{CSSRef}} + +Firefox は当初、初期版のスクロールスナップの仕様書、いわゆるスクロールスナップ点 (Scroll Snap Points) を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。 + +この記事では、ウェブサイトやアプリにスクロールスナップの対応を追加する際に、ブラウザー間やブラウザーのバージョン間の互換性に関連して発生する可能性のある質問について考えます。 + +## 古い Firefox の実装を使用していた場合はどうすればよいのか + +もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。 + +主に以下のようなことに注意してください。 + +- {{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された +- {{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 `scroll-snap-type:mandatory` のような古い一括指定の構文が動作しなくなった + +## フォールバックとして古い実装を使用することができるか + +既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit 接頭辞付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。 + +この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。 + +この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な `y` 軸の値を伴い、もう一つは Firefox 68 以前の、 `y` 値のないプロパティに対応しているもののためです。 + +{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}} + +## 両方の仕様書を使用する必要があるか + +スクロールスナップは、強化された機能が得られなくても、すべてが機能するというフォールバックが可能な、CSS の優れた部分のひとつです。現時点では、フォールバック版の恩恵を受けるユーザーが多数いるというデータがない限り、新仕様のみを実装することをお勧めします。 + +[機能クエリー](/ja/docs/Web/CSS/@supports)を使用して新しい仕様書に対応していることを確認したいのであれば、{{CSSxRef("scroll-snap-align")}} を確認することをお勧めします。このプロパティは古い実装には存在しないからです。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。 + +## なぜ 2 つの版があるのか + +最後に、なぜ 2 つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。 diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.md b/files/ja/web/css/css_scroll_snap/browser_compat/index.md deleted file mode 100644 index f34236fb01..0000000000 --- a/files/ja/web/css/css_scroll_snap/browser_compat/index.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: ブラウザーの互換性とスクロールスナップ -slug: Web/CSS/CSS_Scroll_Snap/Browser_compat -tags: - - CSS - - CSS スクロールスナップ - - 互換性 - - FAQ - - ガイド - - Usage - - browser compat - - compat -translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat ---- -{{CSSRef}} - -Firefox は当初、初期版のスクロールスナップの仕様書、いわゆるスクロールスナップ点 (Scroll Snap Points) を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。 - -この記事では、ウェブサイトやアプリにスクロールスナップの対応を追加する際に、ブラウザー間やブラウザーのバージョン間の互換性に関連して発生する可能性のある質問について考えます。 - -## 古い Firefox の実装を使用していた場合はどうすればよいのか - -もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。 - -主に以下のようなことに注意してください。 - -- {{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された -- {{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 `scroll-snap-type:mandatory` のような古い一括指定の構文が動作しなくなった - -## フォールバックとして古い実装を使用することができるか - -既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit 接頭辞付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。 - -この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。 - -この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な `y` 軸の値を伴い、もう一つは Firefox 68 以前の、 `y` 値のないプロパティに対応しているもののためです。 - -{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}} - -## 両方の仕様書を使用する必要があるか - -スクロールスナップは、強化された機能が得られなくても、すべてが機能するというフォールバックが可能な、CSS の優れた部分のひとつです。現時点では、フォールバック版の恩恵を受けるユーザーが多数いるというデータがない限り、新仕様のみを実装することをお勧めします。 - -[機能クエリー](/ja/docs/Web/CSS/@supports)を使用して新しい仕様書に対応していることを確認したいのであれば、{{CSSxRef("scroll-snap-align")}} を確認することをお勧めします。このプロパティは古い実装には存在しないからです。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。 - -## なぜ 2 つの版があるのか - -最後に、なぜ 2 つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。 -- cgit v1.2.3-54-g00ecf