diff options
Diffstat (limited to 'files/ja/web/css/css_scroll_snap')
| -rw-r--r-- | files/ja/web/css/css_scroll_snap/browser_compat/index.html | 47 | ||||
| -rw-r--r-- | files/ja/web/css/css_scroll_snap/index.html | 75 |
2 files changed, 122 insertions, 0 deletions
diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.html b/files/ja/web/css/css_scroll_snap/browser_compat/index.html new file mode 100644 index 0000000000..e4e1a3473a --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/browser_compat/index.html @@ -0,0 +1,47 @@ +--- +title: ブラウザーの互換性とスクロールスナップ +slug: Web/CSS/CSS_Scroll_Snap/Browser_compat +tags: + - CSS + - CSS Scroll Snap + - CSS スクロールスナップ + - Guide + - browser compat + - compat + - 互換性 +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +<div>{{CSSRef}}</div> + +<p class="summary">Firefox は当初、初期版のスクロールスナップの仕様書、いわゆる<ruby>スクロールスナップ点<rp> (</rp><rt>Scroll Snap Points</rt><rp>) </rp></ruby>を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。</p> + +<h2 id="What_should_I_do_if_I_used_the_old_Firefox_implementation" name="What_should_I_do_if_I_used_the_old_Firefox_implementation">古い Firefox の実装を使用していた場合はどうすればよいのか</h2> + +<p>もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。</p> + +<p>主に以下のようなことに注意してください。</p> + +<ul> + <li>{{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された</li> + <li>{{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 <code>scroll-snap-type:mandatory</code> のような古い一括指定の構文が動作しなくなった</li> +</ul> + +<h2 id="Can_I_use_the_old_implementation_as_a_fallback" name="Can_I_use_the_old_implementation_as_a_fallback">フォールバックとして古い実装を使用することができるか</h2> + +<p>既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit プリフィックス付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。</p> + +<p>この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。</p> + +<p>この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な <code>y</code> 軸の値を伴い、もう一つは Firefox 68 以前で、 <code>y</code> 値のないプロパティに対応しているもののためです。</p> + +<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}</p> + +<h2 id="Do_you_need_to_use_both_specs" name="Do_you_need_to_use_both_specs">両方の仕様書を使用する必要があるか</h2> + +<p>スクロールスナップは、 CSS の中で強化された機能を使用しなければ、代替手段がうまく行く部分の一つです。この点では、フォールバック版を使用することで利益を享受する膨大な数のユーザーに見せるデータがない限り、新しい仕様のみを実装することをお勧めします。</p> + +<p>新しい仕様書に対応していることを、<a href="/ja/docs/Web/CSS/@supports">特性クエリ</a>を使用して確認したいのであれば、 {{CSSxRef("scroll-snap-align")}} を確認すれば、このプロパティは古い実装には存在しません。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。</p> + +<h2 id="Why_do_we_have_two_versions" name="Why_do_we_have_two_versions">なぜ二つの版があるのか</h2> + +<p>最後に、なぜ二つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。</p> diff --git a/files/ja/web/css/css_scroll_snap/index.html b/files/ja/web/css/css_scroll_snap/index.html new file mode 100644 index 0000000000..57af06183b --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/index.html @@ -0,0 +1,75 @@ +--- +title: CSS スクロールスナップ +slug: Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS スクロールスナップ + - Reference + - 概要 +translation_of: Web/CSS/CSS_Scroll_Snap +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong>CSS スクロールスナップ</strong>は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。</p> + +<div class="note"> +<p><strong>メモ</strong>: 以前のバージョンのスクロールスナップはスクロールスナップ点と呼ばれており、非推奨になりました。このバージョンが現行です。</p> +</div> + +<h2 id="Reference" name="Reference">リファレンス</h2> + +<h3 id="CSS_Properties_on_Containers" name="CSS_Properties_on_Containers">コンテナーの CSS プロパティ</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="CSS_Properties_on_Children" name="CSS_Properties_on_Children">子の CSS プロパティ</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="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Scroll Snap Points")}}</td> + <td>{{Spec2("CSS Scroll Snap Points")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> |