CSS Scroll Snap | CSS Features

`scroll-initial-target`

Property Limited availability Experimental Modern CSS: scroll-initial-target

MDN The scroll-initial-target CSS property enables the definition of elements that are potential snap targets when their ancestor scroll container is first rendered.

Live preview Example from MDN

/* mandatory scroll-snap on parent */
div.nearest,
div.none {
  scroll-snap-type: x mandatory;
}

/* scroll-snap alignment for children */
div > div {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.none .set,
.nearest .set.unset {
  scroll-initial-target: none;
}
.nearest .set {
  scroll-initial-target: nearest;
}

/* setup */
body {
  height: 100%;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  font-family: sans-serif;
  text-align: center;
}

div.nearest,
div.none {
  display: flex;
  overflow: auto;
  font-size: 3rem;
}

div div {
  width: 90%;
  min-width: 15rem;
  flex: none;
  outline: 1px solid #333333;
}

/* coloration */
div > div:nth-child(even) {
  background-color: #87ea87;
}

div > div:nth-child(odd) {
  background-color: #87ccea;
}

p {
  margin: 1em 0 0;
}

@supports not (scroll-initial-target: nearest) {
  :root::before {
    content: "Your browser doesn't support the scroll-initial-target property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

<p><code>none</code> on #4 only</p>
<div class="none">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="set">4</div>
  <div>5</div>
</div>

<p><code>nearest</code> on #4 only</p>
<div class="nearest">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="set">4</div>
  <div>5</div>
</div>

<p><code>nearest</code> on even elements</p>
<div class="nearest">
  <div>1</div>
  <div class="set">2</div>
  <div>3</div>
  <div class="set">4</div>
  <div>5</div>
</div>

<p><code>nearest</code> on odd elements</p>
<div class="nearest">
  <div class="set">1</div>
  <div>2</div>
  <div class="set">3</div>
  <div>4</div>
  <div class="set">5</div>
</div>

<p><code>nearest</code> on odd elements, with <code>none</code> on #1</p>
<div class="nearest">
  <div class="set unset">1</div>
  <div>2</div>
  <div class="set">3</div>
  <div>4</div>
  <div class="set">5</div>
</div>

Syntax

none | nearest

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: specified keyword
Canonical order: per grammar
Animation type: none

Browser support

First browser version supporting scroll-initial-target
Chrome	133
Edge	133
Firefox	No
Safari	No
Chrome Android	133
Safari iOS	No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin`

Property Baseline: widely availablesince July 2022

MDN The scroll-margin CSS shorthand property sets all of the scroll margins of an element at once, assigning values much like the margin property does for margins of an element.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>{1,4}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: per side, an absolute length
Canonical order: per grammar
Animation type: by computed value type
Longhands: scroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left

Browser support

First browser version supporting scroll-margin
Chrome	69
Edge	79
Firefox	90
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-block`

Property Baseline: widely availablesince July 2022

MDN The scroll-margin-block CSS shorthand property sets the scroll margins of an element in the block dimension.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: see individual properties
Canonical order: per grammar
Animation type: by computed value type
Longhands: scroll-margin-block-start, scroll-margin-block-end

Browser support

First browser version supporting scroll-margin-block
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-block-end`

Property Baseline: widely availablesince July 2022

MDN 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.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: absolute length
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-margin-block-end
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-block-start`

Property Baseline: widely availablesince July 2022

MDN 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.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: absolute length
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-margin-block-start
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-bottom`

Property Baseline: widely availablesince July 2022

MDN 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.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: absolute length
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-margin-bottom
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-inline`

Property Baseline: widely availablesince July 2022

MDN The scroll-margin-inline CSS shorthand property sets the scroll margins of an element in the inline dimension.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: see individual properties
Canonical order: per grammar
Animation type: by computed value type
Longhands: scroll-margin-inline-start, scroll-margin-inline-end

Browser support

First browser version supporting scroll-margin-inline
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-inline-end`

Property Baseline: widely availablesince July 2022

MDN 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.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: absolute length
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-margin-inline-end
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-inline-start`

Property Baseline: widely availablesince July 2022

MDN 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.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: absolute length
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-margin-inline-start
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-left`

Property Baseline: widely availablesince July 2022

MDN 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.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: absolute length
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-margin-left
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-right`

Property Baseline: widely availablesince July 2022

MDN 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.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: absolute length
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-margin-right
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-margin-top`

Property Baseline: widely availablesince July 2022

MDN 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.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

<length>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: absolute length
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-margin-top
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding CSS shorthand property sets scroll padding on all sides of an element at once. It specifies offsets that define the optimal viewing region of a scrollport within a scroll container.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

[ auto | <length-percentage [0,∞]> ]{1,4}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the corresponding dimension of the scroll container’s scrollport
Computed value: per side, either the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type
Longhands: scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left

Browser support

First browser version supporting scroll-padding
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-block`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-block CSS shorthand property sets the scroll padding of an element in the block dimension.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

[ auto | <length-percentage [0,∞]> ]{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: see individual properties
Canonical order: per grammar
Animation type: by computed value
Longhands: scroll-padding-block-start, scroll-padding-block-end

Browser support

First browser version supporting scroll-padding-block
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-block-end`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-block-end property defines offsets for the end edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

auto | <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-padding-block-end
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-block-start`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-block-start property defines offsets for the start edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

auto | <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-padding-block-start
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-bottom`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-bottom property defines offsets for the bottom of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

auto | <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-padding-bottom
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-inline`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-inline CSS shorthand property sets the scroll padding of an element in the inline dimension.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

[ auto | <length-percentage [0,∞]> ]{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: see individual properties
Canonical order: per grammar
Animation type: by computed value
Longhands: scroll-padding-inline-start, scroll-padding-inline-end

Browser support

First browser version supporting scroll-padding-inline
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-inline-end`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-inline-end property defines offsets for the end edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

auto | <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-padding-inline-end
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-inline-start`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-inline-start property defines offsets for the start edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

auto | <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-padding-inline-start
Chrome	69
Edge	79
Firefox	68
Safari	15
Chrome Android	69
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-left`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-left property defines offsets for the left of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

auto | <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-padding-left
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-right`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-right property defines offsets for the right of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

auto | <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-padding-right
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-padding-top`

Property Baseline: widely availablesince July 2022

MDN The scroll-padding-top property defines offsets for the top of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Live preview Example from MDN

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

auto | <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: no
Percentages: relative to the scroll container’s scrollport
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting scroll-padding-top
Chrome	69
Edge	79
Firefox	68
Safari	14.1
Chrome Android	69
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-snap-align`

Property Baseline: widely availablesince July 2022

MDN The scroll-snap-align CSS property specifies the box's snap position as an alignment of its snap area.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

#example-parent {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

#example-parent > div {
  flex: 0 0 66%;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-parent > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div id="example-parent">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

[ none | start | end | center ]{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: two keywords
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting scroll-snap-align
Chrome	69
Edge	79
Firefox	68
Safari	11
Chrome Android	69
Safari iOS	11

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-snap-stop`

Property Baseline: widely availablesince July 2022

MDN The scroll-snap-stop CSS property defines whether or not the scroll container is allowed to "pass over" possible snap positions.

Live preview Example from MDN

.default-example {
  flex-direction: column;
}

.explanation {
  margin-top: 0;
}

.keyword {
  color: darkorange;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.snap-container {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.snap-container > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.snap-container > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <p class="explanation">
    The effect of this property can be noticed on devices with a touchpad. Try
    to scroll through all items with a single swing. Value
    <b class="keyword">'normal'</b> should pass through all pages, while
    <b class="keyword">'always'</b> will stop at the second page.
  </p>
  <div class="snap-container">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

normal | always

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting scroll-snap-stop
Chrome	75
Edge	79
Firefox	103
Safari	15
Chrome Android	75
Safari iOS	15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scroll-snap-type`

Property Baseline: widely availablesince July 2022

MDN The scroll-snap-type CSS property is set on a scroll container, opting it into scroll snapping by setting the direction and strictness of snap point enforcement within the snap port.

Live preview Example from MDN

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

#example-element {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
}

#example-element > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

#example-element > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

<section class="default-example" id="default-example">
  <div id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

Syntax

none | [ x | y | block | inline | both | pair ] [ mandatory | proximity ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: scroll containers
Inherited: no
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting scroll-snap-type
Chrome	69
Edge	79
Firefox	99
Safari	11
Chrome Android	69
Safari iOS	11

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`:snapped`

Selector Not in any browser yet

Spec The :snapped pseudo-class matches any snap targets, regardless of axis. The longform physical and logical pseudo-class selectors allow for more finite snapped children styling as they can target an individual axis.

Syntax

:snapped

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`:snapped-block`

Selector Not in any browser yet

Spec Matches the child snapped on the block axis.

Syntax

:snapped-block

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`:snapped-inline`

Selector Not in any browser yet

Spec Matches the child snapped on the inline axis.

Syntax

:snapped-inline

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`:snapped-x`

Selector Not in any browser yet

Spec Matches the child snapped on the horizontal axis.

Syntax

:snapped-x

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`:snapped-y`

Selector Not in any browser yet

Spec Matches the child snapped on the vertical axis.

Syntax

:snapped-y

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax