From 20143bb6140dd23ea816f7db81e986005628662a Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 11 Oct 2024 09:17:53 +0530 Subject: [PATCH] fix(css): add snappport glossary section --- files/en-us/glossary/scroll_container/index.md | 12 ++++++++++++ files/en-us/web/css/scroll-margin-block-end/index.md | 2 +- .../en-us/web/css/scroll-margin-block-start/index.md | 2 +- files/en-us/web/css/scroll-margin-block/index.md | 2 +- files/en-us/web/css/scroll-margin-bottom/index.md | 2 +- .../en-us/web/css/scroll-margin-inline-end/index.md | 2 +- .../web/css/scroll-margin-inline-start/index.md | 2 +- files/en-us/web/css/scroll-margin-inline/index.md | 2 +- files/en-us/web/css/scroll-margin-left/index.md | 2 +- files/en-us/web/css/scroll-margin-right/index.md | 2 +- files/en-us/web/css/scroll-margin-top/index.md | 2 +- files/en-us/web/css/scroll-margin/index.md | 2 +- files/en-us/web/css/scroll-snap-align/index.md | 4 ++-- 13 files changed, 25 insertions(+), 13 deletions(-) diff --git a/files/en-us/glossary/scroll_container/index.md b/files/en-us/glossary/scroll_container/index.md index d214b2a883e66d2..ffa102303aeed80 100644 --- a/files/en-us/glossary/scroll_container/index.md +++ b/files/en-us/glossary/scroll_container/index.md @@ -15,3 +15,15 @@ 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. + +## Scroll snap container + +If a box has {{CSSXref("scroll-snap-type")}} set to a value other than `none`, then the box captures snap positions. A box's **scroll snap container** is a box's nearest snap-position capturing scroll container ancestor. + +### Snapport + +The **snapport** is the area of the scroll container defined using {{CSSXref("scroll-padding")}} property set on the scroll container. By default, it is the same as the scroll container's visual viewport. 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. 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 index 04477fcba9ba543..75c6f9c6e10ec5d 100644 --- 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_container#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 index 5351aa38a5c4047..47c470e059470c1 100644 --- 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_container#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 index 168c72e2dd3de46..1da6a076a2cb1c7 100644 --- 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_container#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 index e38cc8aa2588349..bdae2f7a9f3463c 100644 --- 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_container#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 index 5163c5a36328a1f..e9adffb4f7b13e7 100644 --- 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_container#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 index 075a26af6cc9ed0..35e8713d28818fd 100644 --- 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_container#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 index c5bdb01ac99fbca..03b98c1f83932b1 100644 --- 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_container#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 index 4f82f55f395b12d..bd84faabf425826 100644 --- 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_container#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 index 5e25e7c5fae2a60..5f03b0b25eaa8a7 100644 --- 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_container#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 index 9e6edc15707ecaf..287be2185599c50 100644 --- 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_container#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 index 2693e2f2ba4a34b..9a8de37358f3356 100644 --- 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_container#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 index 450830ca3252d08..bc0a968d307b31e 100644 --- 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_container#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_container#snap_area), within the scroll container's [snapport](/en-US/docs/Glossary/Scroll_container#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`