fix(css): add snappport glossary section (#36300)

* fix(css): add scroll snap glossary page * address review comments * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Estelle Weyl <[email protected]> * Revert intro para order * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix def list --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Estelle Weyl <[email protected]>
mdn · Oct 18, 2024 · 2b112ae · 2b112ae
1 parent b580c9f
commit 2b112ae
Show file tree

Hide file tree

Showing 15 changed files with 52 additions and 14 deletions.
diff --git a/files/en-us/glossary/scroll_container/index.md b/files/en-us/glossary/scroll_container/index.md
@@ -15,3 +15,11 @@ A scroll container includes a scrollport and scroll bars.
 ## Scrollport
 
 The scrollport is the visible part of a scroll container and coincides with the padding box of the scroll container. The scroll bars are used to move content in and out of the scrollport so that the content can be viewed.
+
+## See also
+
+- [CSS building blocks: overflowing content](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content)
+- [Scroll snapping](/en-US/docs/Glossary/Scroll_snap), including [scroll snap container](/en-US/docs/Glossary/Scroll_snap#scroll_snap_container)
+- [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module
+- [CSS overscroll behavior](/en-US/docs/Web/CSS/CSS_overscroll_behavior) module
+- [CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap) module
diff --git a/files/en-us/glossary/scroll_snap/index.md b/files/en-us/glossary/scroll_snap/index.md
@@ -0,0 +1,30 @@
+---
+title: Scroll snap
+slug: Glossary/Scroll_snap
+page-type: glossary-definition
+---
+
+{{GlossarySidebar}}
+
+**Scroll snapping** is when content "snaps" to a specific position, rather than stopping at any random point, when a scroll operation finishes. Normal scrolling operations lack precision. They don't align to a paragraph, a sentence, or an image boundary. For example, in a carousel, a scrolling operation could finish in the middle of an image, leaving it partially visible. Web developers have long relied on JavaScript-based solutions. Browsers have recently started supporting [CSS scroll-snapping features](/en-US/docs/Web/CSS/CSS_scroll_snap) that enable defining scroll-snap containers and snapping behaviors.
+
+Scroll snapping is a well-controlled scrolling experience, whereby developers define an element as a [scroll container](/en-US/docs/Glossary/Scroll_container) with boundaries for scroll operations. Scroll operations then finish at these snap position boundaries, with the scrolled to content snapping into place. In the above carousel example, as the user finishes scrolling the carousel, its visible image will snap into place.
+
+- `Scroll snap container`
+
+  - : The **scroll snap container** is a scroll container with scroll snapping applied. For example, if a box has overflowing content and a {{CSSXref("scroll-snap-type")}} set to a value other than `none`, then the box captures snap positions. A box's scroll snap container is the element's nearest snap-position capturing scroll container ancestor. If a box has no scroll snap container, its snap positions, if any, will not trigger snapping.
+
+- `Snapport`
+
+  - : The **snapport** is the area of the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport) that is used as the alignment container for the scroll snap areas when calculating snap positions. By default, it is the same as the scroll container's visual viewport, but is the area of the scrollport defined by the {{CSSXref("scroll-padding")}} property. The [snap areas](#snap_area) are aligned to the scrollport.
+
+- `Snap area`
+  - : The **snap area** of an element in a scroll container is the area defined using {{CSSXref("scroll-margin")}} outsets specified on the element. The snap area is used to snap the element to its snapport.
+
+## See also
+
+- {{CSSXref("scroll-snap-type")}}
+- {{CSSXref("scroll-snap-align")}}
+- {{CSSXref("scroll-padding")}}
+- {{CSSXref("scroll-margin")}}
+- [CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap) module
diff --git a/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md b/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md
@@ -8,7 +8,7 @@ page-type: guide
 
 The properties in the [CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap) module enable you to define how scrolling snaps to specific points as a user scrolls through a document.
 
-The scroll snap feature lets you define the snap positions where a [scroll container](/en-US/docs/Glossary/Scroll_container)'s scrollport may end or "snap to" after a scrolling operation has completed.
+The [scroll snap](/en-US/docs/Glossary/Scroll_snap) feature lets you define the snap positions where a [scroll container](/en-US/docs/Glossary/Scroll_container)'s scrollport may end or "snap to" after a scrolling operation has completed.
 
 ## Key properties for CSS scroll snap
 

diff --git a/files/en-us/web/css/scroll-margin-block-end/index.md b/files/en-us/web/css/scroll-margin-block-end/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-block-end
 
 {{CSSRef}}
 
-The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}
 

diff --git a/files/en-us/web/css/scroll-margin-block-start/index.md b/files/en-us/web/css/scroll-margin-block-start/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-block-start
 
 {{CSSRef}}
 
-The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}
 

diff --git a/files/en-us/web/css/scroll-margin-block/index.md b/files/en-us/web/css/scroll-margin-block/index.md
@@ -40,7 +40,7 @@ scroll-margin-block: unset;
 
 ## Description
 
-The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 ## Formal definition
 

diff --git a/files/en-us/web/css/scroll-margin-bottom/index.md b/files/en-us/web/css/scroll-margin-bottom/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-bottom
 
 {{CSSRef}}
 
-The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}
 

diff --git a/files/en-us/web/css/scroll-margin-inline-end/index.md b/files/en-us/web/css/scroll-margin-inline-end/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-inline-end
 
 {{CSSRef}}
 
-The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}
 

diff --git a/files/en-us/web/css/scroll-margin-inline-start/index.md b/files/en-us/web/css/scroll-margin-inline-start/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-inline-start
 
 {{CSSRef}}
 
-The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}
 

diff --git a/files/en-us/web/css/scroll-margin-inline/index.md b/files/en-us/web/css/scroll-margin-inline/index.md
@@ -40,7 +40,7 @@ scroll-margin-inline: unset;
 
 ## Description
 
-The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 ## Formal definition
 

diff --git a/files/en-us/web/css/scroll-margin-left/index.md b/files/en-us/web/css/scroll-margin-left/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-left
 
 {{CSSRef}}
 
-The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}
 

diff --git a/files/en-us/web/css/scroll-margin-right/index.md b/files/en-us/web/css/scroll-margin-right/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-right
 
 {{CSSRef}}
 
-The `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}
 

diff --git a/files/en-us/web/css/scroll-margin-top/index.md b/files/en-us/web/css/scroll-margin-top/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-top
 
 {{CSSRef}}
 
-The `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}
 

diff --git a/files/en-us/web/css/scroll-margin/index.md b/files/en-us/web/css/scroll-margin/index.md
@@ -42,7 +42,7 @@ scroll-margin: unset;
 
 ## Description
 
-You can see the effect of `scroll-margin` by scrolling to a point partway between two of the "pages" of the example's content. The value specified for `scroll-margin` determines how much of the page that's primarily outside the snapport should remain visible.
+You can see the effect of `scroll-margin` by scrolling to a point partway between two of the "pages" of the example's content. The value specified for `scroll-margin` determines how much of the page that's primarily outside the [snapport](/en-US/docs/Glossary/Scroll_snap#snapport) should remain visible.
 
 Thus, the `scroll-margin` values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 

diff --git a/files/en-us/web/css/scroll-snap-align/index.md b/files/en-us/web/css/scroll-snap-align/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-snap-align
 
 {{CSSRef}}
 
-The `scroll-snap-align` property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snap port (as the alignment container).
+The `scroll-snap-align` property specifies the box's snap position as an alignment of its [snap area](/en-US/docs/Glossary/Scroll_snap#snap_area) (as the alignment subject) within its snap container's snap port (as the alignment container).
 
 {{EmbedInteractiveExample("pages/css/scroll-snap-align.html")}}
 
@@ -40,7 +40,7 @@ One or two values can be specified for the `scroll-snap-align` property. If one
 - `none`
   - : The box does not define a snap position in that axis.
 - `start`
-  - : The start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.
+  - : The start alignment of this box's scroll [snap area](/en-US/docs/Glossary/Scroll_snap#snap_area), within the scroll container's [snapport](/en-US/docs/Glossary/Scroll_snap#snapport) is a snap position in this axis.
 - `end`
   - : The end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.
 - `center`