scroll-snap-type - CSS: Cascading Style Sheets

scroll-snap-type
================

The **`scroll-snap-type`** CSS property sets how strictly snap points are enforced on the scroll container in case there is one.

Try it
------

Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.

Syntax
------

```css
/\* No snapping \*/
scroll-snap-type: none;

/\* Keyword values for snap axes \*/
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/\* Optional keyword values for snap strictness \*/
/\* mandatory | proximity \*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/\* Global values \*/
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;
```

### Values

`none`

When the visual viewport of this scroll container is scrolled, it must ignore snap points.

`x`

The scroll container snaps to snap positions in its horizontal axis only.

`y`

The scroll container snaps to snap positions in its vertical axis only.

`block`

The scroll container snaps to snap positions in its block axis only.

`inline`

The scroll container snaps to snap positions in its inline axis only.

`both`

The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).

`mandatory`

The visual viewport of this scroll container must snap to a snap position if it isn't currently scrolled.

`proximity`

The visual viewport of this scroll container may snap to a snap position if it isn't currently scrolled. The user agent decides if it snaps or not based on scroll parameters. This is the default snap strictness if any snap axis is specified.

**Note:** If the content in the snap port is changed (e.g. added, moved, deleted, or resized) or the value of any scroll snap-related property (e.g. `scroll-snap-type` or `scroll-margin`) is changed, the scroll container will be resnapped according to the latest value of `scroll-snap-type`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

scroll-snap-type =
  none                                                |
  [ x | y | block | inline | both ] [ mandatory | proximity ]?

```

Examples
--------

### Snapping in different axes

#### HTML

```html
<div class="holster">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
    <div>X Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x proximity-scroll-snapping" dir="ltr">
    <div>X Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y mandatory-scroll-snapping" dir="ltr">
    <div>Y Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y proximity-scroll-snapping" dir="ltr">
    <div>Y Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x mandatory-scroll-snapping" dir="rtl">
    <div>X Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x proximity-scroll-snapping" dir="rtl">
    <div>X Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y mandatory-scroll-snapping" dir="rtl">
    <div>Y Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y proximity-scroll-snapping" dir="rtl">
    <div>Y Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>
```

#### CSS
```

.holster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}
.container {
  display: flex;
  margin: 1em auto;
  outline: 1px dashed lightgray;
  flex: none;
  overflow: auto;
}
.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
  overflow-y: hidden;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
  overflow-x: hidden;
}
```

```css
/\* scroll-snap \*/
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
```

```
.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 100%;
}

/\* appearance fixes \*/
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}

/\* coloration \*/
.container > div:nth-child(even) {
  background-color: #87ea87;
}
.container > div:nth-child(odd) {
  background-color: #87ccea;
}
```

#### Results

Specifications
--------------

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-type |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap


:paused - CSS: Cascading Style Sheets

:paused
=======

The **`:paused`** CSS pseudo-class selector represents an element that is playable, such as `<audio>` or `<video>`, when that element is "paused" (i.e. not "playing").

 A resource is paused if the user explicitly paused it, or if it is in a non-activated or other non-playing state, like "loaded, hasn't been activated yet".
 This is different from `:buffering` or `:stalled`, which are states that occur while the resource is considered "playing".

Syntax
------

```css
:paused {
  /\* ... \*/
}
```

Examples
--------

### CSS

```css
:paused {
  border: 5px solid orange;
}
```

Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # selectordef-paused |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `:buffering`
* `:muted`
* `:playing`
* `:seeking`
* `:stalled`
* `:volume-locked`
* CSS selectors


mask-border-mode - CSS: Cascading Style Sheets

mask-border-mode
================

The **`mask-border-mode`** CSS property specifies the blending mode used in a mask border.

Syntax
------

```css
/\* Keyword values \*/
mask-border-mode: luminance;
mask-border-mode: alpha;

/\* Global values \*/
mask-border-mode: inherit;
mask-border-mode: initial;
mask-border-mode: revert;
mask-border-mode: revert-layer;
mask-border-mode: unset;
```

### Values

`luminance`

The luminance values of the mask border image are used as the mask values.

`alpha`

The alpha values of the mask border image are used as the mask values.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `alpha` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

mask-border-mode =
  luminance  |
  alpha

```

Specifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-mode |

Browser compatibility
---------------------

This property is not supported by any browser yet.

See also
--------

* `mask-border`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`


:volume-locked - CSS: Cascading Style Sheets

:volume-locked
==============

The **`:volume-locked`** CSS pseudo-class selector represents an element that is capable of making sound, such as `<audio>` or `<video>`, but the audio volume of the media element is currently "locked" by the user.

 User agents may set media `muted` or `volume` values according to user preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise).
 An element that is `:volume-locked` cannot be muted, un-muted, or have its volume changed via JavaScript. The locked status is an operating system or user agent preference.

Syntax
------

```css
:volume-locked {
  /\* ... \*/
}
```

Examples
--------

### CSS

```css
:volume-locked {
  border: 5px solid green;
}

video:volume-locked {
  border: 5px solid aqua;
}
```

Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # selectordef-volume-locked |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `:buffering`
* `:muted`
* `:paused`
* `:playing`
* `:seeking`
* `:stalled`
* CSS selectors
* `volume` property of `HTMLMediaElement` objects


CSS properties and values API - CSS: Cascading Style Sheets

CSS properties and values API
=============================

 The **CSS properties and values API** module defines a method for registering new CSS properties, defining the property's data type, inheritance behavior, and, optionally, an initial value.
 This API expands on CSS custom properties for cascading variables module, which allows authors to define custom properties in CSS using two dash syntax (`--`).
 The CSS properties and values API is part of the CSS Houdini umbrella of APIs.

 Custom properties let you reuse values across a project to simplify complex or repetitive stylesheets.
 Basic custom properties are defined in the CSS custom properties for cascading variables module.
 The CSS properties and values API expands on that module, enabling adding metadata to custom properties using CSS with the `@property` at-rule or, alternatively, using JavaScript's `CSS.registerProperty` method.

Whether registered with CSS or JavaScript, setting metadata on custom properties provides for an expected data type that the browser can use depending on the context, defines an initial value, and lets you control inheritance.

CSS properties and values API custom property registration is more robust than the more basic CSS cascading variable custom property declaration, especially when it comes to transitioning and animating values as browsers can interpolate between custom values of this type, whereas properties that use two dash syntax (`--`) behave more like a string substitution.

Properties and values API in action
-----------------------------------

To see how custom properties and values can be used via API, hover over the box below.
```

CSS.registerProperty({
  name: "--stop-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "cornflowerblue",
});
```

```
.box {
  padding: 1rem;
  width: 90%;
  height: 4rem;
  font-family: sans-serif;
  font-size: large;
  color: white;
  border-radius: 0.5rem;
}

.box {
  background: linear-gradient(to right, var(--stop-color), lavenderblush);
  transition: --stop-color 2s;
}

.box:hover {
  --stop-color: aquamarine;
}
```

```
<div class="box"><p>Linear gradient with transition</p></div>
```

 The box has a backround consisting of a linear gradient from `--stop-color` (the custom property) to `lavenderblush`.
 The value of `--stop-color` is set to `cornflowerblue` at first, but when you hover over the box, `--stop-color` transitions to `aquamarine` over two seconds (`linear-gradient(to right, aquamarine, lavenderblush)`).

Reference
---------

### At-rules

* `@property`
    + syntax descriptor
        - `+` and `#` multipliers
        - `|` combinator
    + inherits descriptor
    + initial-value descriptor
### Interfaces and APIs

* `CSSPropertyRule`
* `CSS.registerProperty()`
Guides
------

Using the CSS properties and values API

Explains how to register custom properties in CSS and JavaScript, with hints on handling undefined and invalid values, fallbacks, and inheritance.

Houdini APIs

Explains what CSS Houdini is and its advantages, along with a list of available APIs and their statuses.

Related concepts
----------------

* `var()`
* CSSRule
* CSSStyleValue
* CSS scoping
* Using shadow DOM
* CSS Typed Object Model API
* CSS Painting API
* Worklet
Specifications
--------------

| Specification |
| --- |
| CSS Properties and Values API Level 1  |

See also
--------

* CSS cascade and inheritance
* CSS scoping module
* Using shadow DOM
* CSS Painting API module
* Worklet interface
* CSS `env()`
* CSS Typed Object Model


border-image-repeat - CSS: Cascading Style Sheets

border-image-repeat
===================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
The **`border-image-repeat`** CSS property defines how the edge regions and middle region of a source image are adjusted to fit the dimensions of an element's border image. The middle region can be displayed by using the keyword "fill" in the border-image-slice property.

Try it
------

Syntax
------

```css
/\* Keyword value \*/
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/\* top and bottom | left and right \*/
border-image-repeat: round stretch;

/\* Global values \*/
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;
```

The `border-image-repeat` property may be specified using one or two values chosen from the list of values below.

* When **one** value is specified, it applies the same behavior on **all four sides**.
* When **two** values are specified, the first applies to the **top, middle, and bottom**, the second to the **left and right**.
### Values

`stretch`

The source image's edge regions are stretched to fill the gap between each border.

`repeat`

The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.

`round`

The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.

`space`

The source image's edge regions are tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `stretch` |
| Applies to | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

border-image-repeat =
  [ stretch | repeat | round | space ]{1,2}

```

Examples
--------

### Repeating border images

#### CSS

```css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /\* Can be changed in the live sample \*/
}
```

```
<div id="bordered">You can try out various border repetition rules on me!</div>

<select id="repetition">
  <option value="stretch">stretch</option>
  <option value="repeat">repeat</option>
  <option value="round">round</option>
  <option value="space">space</option>
  <option value="stretch repeat">stretch repeat</option>
  <option value="space round">space round</option>
</select>
```

```
const repetition = document.getElementById("repetition");
repetition.addEventListener("change", (evt) => {
  document.getElementById("bordered").style.borderImageRepeat =
    evt.target.value;
});
```

#### Results

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-repeat |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Backgrounds and borders
* Learn CSS: Backgrounds and borders
* Border images in CSS: A key focus area for Interop 2023 on MDN blog (2023)


offset-anchor - CSS: Cascading Style Sheets

offset-anchor
=============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`offset-anchor`** CSS property specifies the point inside the box of an element traveling along an `offset-path` that is actually moving along the path.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;

/\* <percentage> values \*/
offset-anchor: 25% 75%;

/\* <length> values \*/
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;

/\* Edge offsets values \*/
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;

/\* Global values \*/
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: revert;
offset-anchor: revert-layer;
offset-anchor: unset;
```

### Values

`auto`

`offset-anchor` is given the same value as the element's `transform-origin`, unless `offset-path` is `none`, in which case it takes its value from `offset-position`.

`<position>`

A `<position>` defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. For more specifics, see the `<position>` and `background-position` reference pages. Note that the 3-value position syntax does not work for any usage of `<position>`, except for in `background(-position)`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | relative to the width and the height of the element's reference box |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | a position |

Formal syntax
-------------
```

offset-anchor =
  auto        |
  <position>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Setting various offset-anchor values

In the following example, we have three `<div>` elements nested in `<section>` elements. Each `<div>` is given the same `offset-path` (a horizontal line 200 pixels long) and animated to move along it. The three are then given different `background-color` and `offset-anchor` values.

Each `<section>` has been styled with a linear gradient to give it a horizontal line running through its center, to give you a visual display of where the `<div>`'s offset paths are running.

This allows you to see what effect the different `offset-anchor` values have — the first one, `auto`, causes the `<div>`'s center point to move along the path. The other two cause the `<div>`'s top-right and bottom-left points to move along the path, respectively.

#### HTML

```html
<section>
  <div class="offset-anchor1"></div>
</section>
<section>
  <div class="offset-anchor2"></div>
</section>
<section>
  <div class="offset-anchor3"></div>
</section>
```

#### CSS

```css
div {
  offset-path: path("M 0,20 L 200,20");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
}

section {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    #000 50%,
    #000 51%,
    transparent 52%
  );
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.offset-anchor1 {
  offset-anchor: auto;
  background: cyan;
}

.offset-anchor2 {
  offset-anchor: right top;
  background: purple;
}

.offset-anchor3 {
  offset-anchor: left bottom;
  background: magenta;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| Motion Path Module Level 1 # offset-anchor-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `offset`
* `offset-distance`
* `offset-rotate`
* SVG `<path>`


background-attachment - CSS: Cascading Style Sheets

background-attachment
=====================

The **`background-attachment`** CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/\* Global values \*/
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;
```

The `background-attachment` property is specified as one of the keyword values from the list below.

### Values

`fixed`

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with `background-clip: text`.)

`local`

The background is fixed relative to the element's contents. If the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

`scroll`

The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `scroll` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

background-attachment =
  <attachment>#

<attachment> =
  scroll  |
  fixed   |
  local

```

Examples
--------

### Simple example

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```

#### Result

### Multiple background images

This property supports multiple background images. You can specify a different `<attachment>` for each background, separated by commas. Each image is matched with the corresponding `<attachment>` type, from first specified to last.

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-attachment |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using multiple backgrounds


::-moz-color-swatch - CSS: Cascading Style Sheets

::-moz-color-swatch
===================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`::-moz-color-swatch`** CSS pseudo-element is a Mozilla extension that represents the color selected in an `<input>` of `type="color"`.

**Note:** Using `::-moz-color-swatch` with anything but an `<input type="color">` doesn't match anything and has no effect.

Syntax
------

```css
::-moz-color-swatch {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<input type="color" value="#de2020" />
```

### CSS

```css
input[type="color"]::-moz-color-swatch {
  border-radius: 10px;
  border-style: none;
}
```

### Result

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Similar pseudo-elements used by other browsers:
    + `::-webkit-color-swatch`, pseudo-element supported by WebKit and Blink (Safari, Chrome, and Opera)


Shorthand properties - CSS: Cascading Style Sheets

Shorthand properties
====================

***Shorthand properties*** are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS `background` property is a shorthand property that's able to define the values of `background-color`, `background-image`, `background-repeat`, and `background-position`. Similarly, the most common font-related properties can be defined using the shorthand `font`, and the different margins around a box can be defined using the `margin` shorthand.

Tricky edge cases
-----------------

There are a few edge cases to keep in mind when using shorthand properties.

### Omitting properties

A value which is not specified is set to its initial value. That means that it **overrides** previously set values. For example:

```css
p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}
```

This will not set the color of the background to `red` but to the default value for `background-color`, which is `transparent`.

Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword `inherit` can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword `inherit`.

### Ordering properties

Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values.

Two important cases here are:

* properties related to the edges of a box, like `border-style`, `margin` or `padding`
* properties related to the corners of a box, like `border-radius`

#### Edges of a box

Shorthands handling properties related to edges of a box, like `border-style`, `margin` or `padding`, always use a consistent 1-to-4-value syntax representing those edges:

* **1-value syntax:** `border-width: 1em` — The single value represents all edges:
 ![Box edges with one-value syntax](/en-US/docs/Web/CSS/Shorthand_properties/border1.png)
* **2-value syntax:** `border-width: 1em 2em` — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones:
 ![Box edges with two-value syntax](/en-US/docs/Web/CSS/Shorthand_properties/border2.png)
* **3-value syntax:** `border-width: 1em 2em 3em` — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge:
 ![Box edges with three-value syntax](/en-US/docs/Web/CSS/Shorthand_properties/border3.png)
* **4-value syntax:** `border-width: 1em 2em 3em 4em` — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top:
 ![Box edges with four-value syntax](/en-US/docs/Web/CSS/Shorthand_properties/border4.png) The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word *trouble*: TRBL. You can also remember it as the order that the hands would rotate on a clock: `1em` starts in the 12 o'clock position, then `2em` in the 3 o'clock position, then `3em` in the 6 o'clock position, and `4em` in the 9 o'clock position.

#### Corners of a box

Similarly, shorthands handling properties related to corners of a box, like `border-radius`, always use a consistent 1-to-4-value syntax representing those corners:

* **1-value syntax:** `border-radius: 1em` — The single value represents all corners:
 ![Box corners with one-value syntax](/en-US/docs/Web/CSS/Shorthand_properties/corner1.png)
* **2-value syntax:** `border-radius: 1em 2em` — The first value represents the top left and bottom right corner, the second the top right and bottom left ones:
 ![Box corners with two-value syntax](/en-US/docs/Web/CSS/Shorthand_properties/corner2.png)
* **3-value syntax:** `border-radius: 1em 2em 3em` — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner:
 ![Box corners with three-value syntax](/en-US/docs/Web/CSS/Shorthand_properties/corner3.png)
* **4-value syntax:** `border-radius: 1em 2em 3em 4em` — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left:
 ![Box corners with four-value syntax](/en-US/docs/Web/CSS/Shorthand_properties/corner4.png)
Background properties
---------------------

Consider a background with the following properties

```css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```

These four declarations can be shortened to just one:

```css
background: #000 url(images/bg.gif) no-repeat left top;
```

(The shorthand form is actually the equivalent of the longhand properties above plus `background-attachment: scroll` and, in CSS3, some additional properties.)

See `background` for more detailed information, including CSS3 properties.

Font properties
---------------

Consider the following declarations:

```css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
```

These 5 statements can be shortened to the following:

```css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;
```

This shorthand declaration is actually equivalent to the longhand declarations above plus `font-variant: normal`, `font-size-adjust: none`, and `font-stretch: normal`.

Border properties
-----------------

With borders, the width, color, and style can be simplified into one declaration. For example, consider the following CSS:

```css
border-width: 1px;
border-style: solid;
border-color: #000;
```

It can be simplified as:

```css
border: 1px solid #000;
```

Margin and padding properties
-----------------------------

Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. Consider the following CSS declarations:

```css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
```

They are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").

```css
margin: 10px 5px 10px 5px;
```

Margin shorthand rules for one, two, three and four value declarations are:

* When **one** value is specified, it applies the same margin to **all four sides**.
* When **two** values are specified, the first margin applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first margin applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the margins apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
Position properties
-------------------

With position, the shorthand versions of top, right, bottom and left can be simplified into one declaration. For example, consider the following CSS:

```css
top: 0;
right: 20px;
bottom: 0;
left: 20px;
```

It can be simplified as:

```css
inset: 0 20px 0 20px;
```

Just like margins and paddings, the inset values are ordered clockwise - top, right, bottom, then left (TRBL).

The universal shorthand property
--------------------------------

CSS provides a universal shorthand property, `all`, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model.

See Cascade and inheritance or Introducing the CSS Cascade for more information about how inheritance works in CSS.

See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Replaced elements
* Shorthand properties:
    + `all`
    + `animation`
    + `background`
    + `border`
    + `border-block-end`
    + `border-block-start`
    + `border-bottom`
    + `border-color`
    + `border-image`
    + `border-inline-end`
    + `border-inline-start`
    + `border-left`
    + `border-radius`
    + `border-right`
    + `border-style`
    + `border-top`
    + `border-width`
    + `column-rule`
    + `columns`
    + `container`
    + `contain-intrinsic-size`
    + `flex`
    + `flex-flow`
    + `font`
    + `font-synthesis`
    + `font-variant`
    + `gap`
    + `grid`
    + `grid-area`
    + `grid-column`
    + `grid-row`
    + `grid-template`
    + `inset`
    + `list-style`
    + `margin`
    + `mask`
    + `mask-border`
    + `offset`
    + `outline`
    + `overflow`
    + `padding`
    + `place-content`
    + `place-items`
    + `place-self`
    + `scroll-margin`
    + `scroll-padding`
    + `scroll-timeline`
    + `text-decoration`
    + `text-emphasis`
    + `transition`


align-tracks - CSS: Cascading Style Sheets

align-tracks
============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis.

Syntax
------

```css
/\* Keyword values \*/
align-tracks: start;
align-tracks: space-between;
align-tracks: center;
align-tracks: start, center, end;

/\* Global values \*/
align-tracks: inherit;
align-tracks: initial;
align-tracks: revert;
align-tracks: revert-layer;
align-tracks: unset;
```

The property can take a single value, in which case all tracks are aligned in the same way. If a list of values is used then the first value applies to the first track in the grid axis, the second to the next and so on.

If there are fewer values than tracks, the last value is used for all remaining tracks. If there are more values than tracks, any additional values are ignored.

### Values

`start`

The items are packed flush to each other toward the start edge of the alignment container in the masonry axis.

`end`

The items are packed flush to each other toward the end edge of the alignment container in the masonry axis.

`center`

The items are packed flush to each other toward the center of the alignment container along the masonry axis.

`normal`

Acts as `start`.

`baseline first baseline`
`last baseline`

 Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`space-between`

The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

`space-around`

The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.

`space-evenly`

The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

`stretch`

The items stretch along the masonry axis to fill the content box. Items with definite size do not stretch.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | Grid containers with masonry layout in their block axis |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------

Error: could not find syntax for this itemExamples
--------

### Masonry layout with multiple values for align-tracks

Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # tracks-alignment |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `justify-tracks`, `masonry-auto-flow`


@color-profile - CSS: Cascading Style Sheets

@color-profile
==============

The **`@color-profile`** CSS at-rule defines and names a color profile which can later be used in the `color()` function to specify a color.

Syntax
------

```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
```

### Descriptors

`src`

Specifies the URL to retrieve the color-profile information from.

`rendering-intent`

If the color profile contains more than one rendering intent, this descriptor allows one to be selected as the one to use to define how to map the color to smaller gamuts than this profile is defined over.

If used, it must be one of the following keywords:

`relative-colorimetric`

Media-relative colorimetric is required to leave source colors that fall inside the destination medium gamut unchanged relative to the respective media white points. Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.

`absolute-colorimetric`

ICC-absolute colorimetric is required to leave source colors that fall inside the destination medium gamut unchanged relative to the adopted white (a perfect reflecting diffuser). Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.

`perceptual`

This method is often the preferred choice for images, especially when there are substantial differences between the source and destination (such as a screen display image reproduced on a reflection print). It takes the colors of the source image and re-optimizes the appearance for the destination medium using proprietary methods.

`saturation`

This option was created to preserve the relative saturation (chroma) of the original, and to keep solid colors pure. However, it experienced interoperability problems like the perceptual intent.

Examples
--------

This example is from the specification and demonstrates using offset printing to ISO 12647-2:2004 using the CGATS/SWOP TR005 2007 characterization data on grade 5 paper with an ink limit of 300% Total Area Coverage, and medium gray component replacement (GCR).

The `src` descriptor specifies the URL to retrieve the color-profile information from.

```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
.header {
  background-color: color(--swop5c 0% 70% 20% 0%);
}
```

Formal syntax
-------------
```

@color-profile =
  @color-profile [ <dashed-ident> | device-cmyk ] { <declaration-list> }

```

Specifications
--------------

| Specification |
| --- |
| CSS Color Module Level 5 # at-profile |

Browser compatibility
---------------------

There is no browser implementing this feature.


white-space-collapse - CSS: Cascading Style Sheets

white-space-collapse
====================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`white-space-collapse`** CSS property controls how white space inside an element is collapsed.

**Note:** The `white-space-collapse` and `text-wrap` properties can be declared together using the `white-space` shorthand property.

Syntax
------

```css
/\* Keyword values \*/
white-space-collapse: collapse;
white-space-collapse: preserve;
white-space-collapse: preserve-breaks;
white-space-collapse: preserve-spaces;
white-space-collapse: break-spaces;

/\* Global values \*/
white-space-collapse: inherit;
white-space-collapse: initial;
white-space-collapse: revert;
white-space-collapse: revert-layer;
white-space-collapse: unset;
```

The `white-space-collapse` property is specified as a single keyword chosen from the list of values below.

### Values

`collapse`

White space sequences are collapsed.

`preserve`

White space sequences and segment break characters are preserved.

`preserve-breaks`

White space sequences are collapsed, while segment break characters are preserved.

`preserve-spaces`

White space sequences are preserved, while tabs and segment break characters are converted to spaces.

`break-spaces`

The behavior is identical to `preserve`, except that:

* Any sequence of preserved white space always takes up space, including at the end of the line.
* A line-breaking opportunity exists after every preserved white space character, including between white space characters.
* Preserved spaces take up space and do not hang, thus affecting the box's intrinsic sizes (`min-content` size and `max-content` size).

**Note:** *Segment break characters* are characters such as line feeds that cause text to break onto new lines.

Collapsing of white space
-------------------------

User agents handle white space collapsing as follows:

* Tabs are generally converted to spaces.
* If segment breaks are to be collapsed:
    + Sequences of segment breaks are collapsed down to a single segment break.
    + They are converted to spaces in the case of languages that separate words with spaces (like English), or removed altogether in the case of languages that do not separate words with spaces (like Chinese).
* If spaces are to be collapsed:
    + Spaces or tabs before or after segment breaks are removed.
    + Sequences of spaces are converted, or "collapsed", to a single space.
* When spaces are preserved, sequences of spaces are treated as non-breaking except that they will soft-wrap at the end of each sequence — i.e. the next line will always start with the next non-space character. In the case of the `break-spaces` value however, a soft wrap could potentially occur after each space, so the next line may start with one or more spaces.
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `collapse` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

white-space-collapse =
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces

```

Examples
--------

### HTML

```html
<h2 class="collapse">Default behavior; all whitespace is
    collapsed          in the          heading     .</h2>

<h2 class="preserve">In this case all whitespace is
    preserved          in the          heading     .</h2>

<h2 class="preserve-breaks">In this case only the line break is
    preserved          in the          heading     .</h2>
```

### CSS

```css
.collapse {
  white-space-collapse: collapse;
}

.preserve {
  white-space-collapse: preserve;
}

.preserve-breaks {
  white-space-collapse: preserve-breaks;
}

h2 {
  font-size: 1.6rem;
  font-family: monospace;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Text Module Level 4 # white-space-collapsing |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Shorthand for `white-space-collapse` and `text-wrap`: The `white-space` property.
* CSS text module


overflow-clip-margin - CSS: Cascading Style Sheets

overflow-clip-margin
====================

The **`overflow-clip-margin`** CSS property determines how far outside its bounds an element with `overflow: clip` may be painted before being clipped. The bound defined by this property is called the *overflow clip edge* of the box.

Syntax
------

```css
/\* <length> values \*/
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

/\* <visual-box> | <length> \*/
overflow-clip-margin: content-box 5px;

/\* Global values \*/
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;
```

The `<visual-box>` value, which defaults to `padding-box`, specifies the box edge to use as the overflow clip edge origin. The `<length>` value specified in `overflow-clip-margin` must be nonnegative.

**Note:** If the element does not have `overflow: clip` then this property will be ignored.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0px` |
| Applies to | all elements |
| Inherited | no |
| Computed value | the computed <length> and a <visual-box> keyword |
| Animation type | discrete |

Formal syntax
-------------
```

overflow-clip-margin =
  <visual-box>    ||
  <length [0,∞]>

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

Examples
--------

### HTML

```html
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
</div>
```

### CSS

```css
.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-clip-margin |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `text-overflow`, `white-space`, `overflow`, `overflow-inline`, `overflow-x`, `overflow-y`, `clip`, `display`


width - CSS: Cascading Style Sheets

width
=====

The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.

Try it
------

The specified value of `width` applies to the content area so long as its value remains within the values defined by `min-width` and `max-width`.

* If the value for `width` is less than the value for `min-width`, then `min-width` overrides `width`.
* If the value for `width` is greater than the value for `max-width`, then `max-width` overrides `width`.
Syntax
------

```css
/\* <length> values \*/
width: 300px;
width: 25em;

/\* <percentage> value \*/
width: 75%;

/\* Keyword values \*/
width: max-content;
width: min-content;
width: fit-content;
width: fit-content(20em);
width: auto;

/\* Global values \*/
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;
```

### Values

`<length>`

Defines the width as a distance value.

`<percentage>`

Defines the width as a percentage of the containing block's width.

`auto`

The browser will calculate and select a width for the specified element.

`max-content`

The intrinsic preferred width.

`min-content`

The intrinsic minimum width.

`fit-content`

Use the available space, but not more than max-content, i.e `min(max-content, max(min-content, stretch))`.

`fit-content(`<length-percentage>`)`
Experimental

Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.

Accessibility concerns
----------------------

Ensure that elements set with a `width` aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

width =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Default width

```css
p.goldie {
  background: gold;
}
```

```html
<p class="goldie">The Mozilla community produces a lot of great software.</p>
```

### Example using pixels and ems

```css
.px\_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em\_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
```

```html
<div class="px\_length">Width measured in px</div>
<div class="em\_length">Width measured in em</div>
```

### Example with percentage

```css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
```

```html
<div class="percent">Width in percentage</div>
```

### Example using "max-content"

```css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit uses a non-standard name \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
  width: max-content;
}
```

```html
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
```

### Example using "min-content"

```css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
  width: min-content;
}
```

```html
<p class="minblue">The Mozilla community produces a lot of great software.</p>
```

Specifications
--------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The box model
* `height`
* `box-sizing`
* `min-width`, `max-width`
* The mapped logical properties: `block-size`, `inline-size`


font-variant-numeric - CSS: Cascading Style Sheets

font-variant-numeric
====================

The **`font-variant-numeric`** CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

Try it
------

Syntax
------

```css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: oldstyle-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: proportional-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: tabular-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: diagonal-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: stacked-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: oldstyle-nums stacked-fractions;

/\* Global values \*/
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;
```

This property can take one of two forms:

* either the keyword value `normal`
* or one or more of the other values listed below, space-separated, in any order.
### Values

`normal`

This keyword leads to the deactivation of the use of such alternate glyphs.

`ordinal`

This keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd, 4th in English or a 1a in Italian. It corresponds to the OpenType values `ordn`.

`slashed-zero`

This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values `zero`.

*`<numeric-figure-values`>*

These values control the figures used for numbers. Two values are possible:

* `lining-nums` activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType values `lnum`.
* `oldstyle-nums` activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values `onum`.

*`<numeric-spacing-values>`*

These values controls the sizing of figures used for numbers. Two values are possible:

* `proportional-nums` activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values `pnum`.
* `tabular-nums` activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values `tnum`.

*`<numeric-fraction-values>`*

These values controls the glyphs used to display fractions. Two values are possible:

* `diagonal-fractions` activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType values `frac`.
* `stacked-fractions` activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType values `afrc`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

font-variant-numeric =
  normal                                              |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]

<numeric-figure-values> =
  lining-nums    |
  oldstyle-nums

<numeric-spacing-values> =
  proportional-nums  |
  tabular-nums

<numeric-fraction-values> =
  diagonal-fractions  |
  stacked-fractions

```

Examples
--------

### Setting ordinal numeric forms

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-numeric-prop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-position`


<color> - CSS: Cascading Style Sheets

<color>
=======

 The **`<color>`** CSS data type represents a color.
 A `<color>` may also include an alpha-channel *transparency value*, indicating how the color should composite with its background.

**Note:** Although `<color>` values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' color profiles.

Syntax
------

```css
/\* Named colors \*/
rebeccapurple
aliceblue

/\* RGB Hexadecimal \*/
#f09
#ff0099

/\* RGB (Red, Green, Blue) \*/
rgb(255 0 153)
rgb(255 0 153 / 80%)

/\* HSL (Hue, Saturation, Lightness) \*/
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/\* HWB (Hue, Whiteness, Blackness) \*/
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/\* LAB (Lightness, A-axis, B-axis) \*/
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/\* LCH (Lightness, Chroma, Hue) \*/
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/\* Oklab (Lightness, A-axis, B-axis) \*/
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/\* Oklch (Lightness, Chroma, Hue) \*/
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/\* light-dark \*/
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))
```

A `<color>` value can be specified using one of the methods listed below:

* By keywords: `<named-color>` (such as `blue` or `pink`), `<system-color>`, and `currentcolor`.
* By hexadecimal notations: `<hex-color>` (such as `#ff0000`).
* By parameters in a color space using functional notations:
    + sRGB color space: `hsl()`, `hwb()`, `rgb()`;
    + CIELAB color space: `lab()`, `lch()`;
    + Oklab color space: `oklab()`, `oklch()`;
    + Other color spaces: `color()`.
* By mixing two colors: `color-mix()`.
* By specifying two colors, the first used for light color-schemes and the second used for dark color-schemes: `light-dark()`.
### currentcolor keyword

The `currentcolor` keyword represents the value of an element's `color` property. This lets you use the `color` value on properties that do not receive it by default.

If `currentcolor` is used as the value of the `color` property, it instead takes its value from the inherited value of the `color` property.

```html
<div style="color: blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background: currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>
```

### Missing color components

Each component of any CSS color functions - except for those using the legacy comma-separated syntax - can be specified as the keyword `none` to be a missing component.

Explicitly specifying missing components is useful in color interpolation for cases where you would like to interpolate some color components but not others. For all other purposes, a missing component will effectively have a zero value in an appropriate unit: `0`, `0%`, or `0deg`. For example, the following colors are equivalent when used outside of interpolation:

```css
/\* These are equivalent \*/
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/\* These are equivalent \*/
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);
```

Interpolation
-------------

Color interpolation happens with gradients, transitions, and animations.

When interpolating `<color>` values, they are first converted to a given color space, and then each component of the computed values are interpolated linearly, with interpolation's speed being determined by the easing function in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through `<color-interpolation-method>` in some color-related functional notations.

### Interpolation with missing components

#### Interpolating colors in the same space

 When interpolating colors that are exactly in the interpolation color space, missing components from one color are replaced with existing values of the same components from the other color.
 For example, the following two expressions are equivalent:

```css
color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))
```

**Note:** If a component is missing from both colors, this component will be missing after the interpolation.

#### Interpolating colors from different spaces: analogous components

If any color to be interpolated is not in the interpolation color space, its missing components are transferred into the converted color based on **analogous components** of the same category as described in the following table:

| Category | Analogous components |
| --- | --- |
| Reds | `R`, `X` |
| Greens | `G`, `Y` |
| Blues | `B`, `Z` |
| Lightness | `L` |
| Colorfulness | `C`, `S` |
| Hue | `H` |
| a | `a` |
| b | `b` |

For example:

* `X` (`0.2`) in `color(xyz 0.2 0.1 0.6)` is analogous to `R` (`50%`) in `rgb(50% 70% 30%)`.
* `H` (`0deg`) in `hsl(0deg 100% 80%)` is analogous to `H` (`140`) in `oklch(80% 0.1 140)`.

Using Oklch as the interpolation color space and the two colors below as an example:

```css
lch(80% 30 none)
color(display-p3 0.7 0.5 none)
```

the preprocessing procedure is:

1. Replace the missing components in both colors with a zero value:

```css
lch(80% 30 0)
color(display-p3 0.7 0.5 0)
```

2. Convert both colors into the interpolation color space:

```css
oklch(83.915% 0.0902 0.28)
oklch(63.612% 0.1522 78.748)
```

3. If any component of the converted colors is analogous to a missing component in the corresponding original color, reset it as a missing component:

```css
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)
```

4. Replace any missing component with the same component from the other converted color:

```css
oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748)
```

Accessibility concerns
----------------------

Some people have difficulty distinguishing colors. The WCAG 2.2 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See color and color contrast for more information.

Formal syntax
-------------
```

<color> =
  <absolute-color-base>  |
  currentcolor           |
  <system-color>

<absolute-color-base> =
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent

<absolute-color-function> =
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>

<rgb()> =
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>

<rgba()> =
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>

<hsl()> =
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>

<hsla()> =
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>

<hwb()> =
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> =
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lch()> =
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<oklab()> =
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<oklch()> =
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<color()> =
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<legacy-rgb-syntax> =
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )

<modern-rgb-syntax> =
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<legacy-rgba-syntax> =
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )

<modern-rgba-syntax> =
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<legacy-hsl-syntax> =
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )

<modern-hsl-syntax> =
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<legacy-hsla-syntax> =
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )

<modern-hsla-syntax> =
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
  <number>  |
  <angle>

<alpha-value> =
  <number>      |
  <percentage>

<colorspace-params> =
  <predefined-rgb-params>  |
  <xyz-params>

<predefined-rgb-params> =
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> =
  <xyz-space> [ <number> | <percentage> | none ]{3}

<predefined-rgb> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020

<xyz-space> =
  xyz      |
  xyz-d50  |
  xyz-d65

```

Examples
--------

### Color value tester

In this example we provide a `<div>` and a text input. Entering a valid color into the input causes the `<div>` to adopt that color, allowing you to test our color values.

#### HTML

```html
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
```

```
div {
  height: 200px;
  width: 200px;
}
```

```
const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Invalid color value";
  }
});
```

#### Result

### Fully saturated sRGB colors

This example shows fully saturated sRGB colors in the sRGB color space.

#### HTML

```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

```css
div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}
```

#### Result

### Reds of different shades

This example shows reds of different shades in the sRGB color space.

#### HTML

```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

```css
div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}
```

#### Result

### Reds of different saturations

This example shows reds of different saturations in the sRGB color space.

#### HTML

```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

```css
div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `opacity`: the property defining transparency at the element level
* `<hue>`: the data type representing the hue angle of a color
* `color`, `background-color`, `border-color`, `box-shadow`, `outline-color`, `text-shadow`: common properties that use `<color>`
* Applying color to HTML elements using CSS
* New functions, gradients, and hues in CSS colors (Level 4) on MDN blog (2023)


@media - CSS: Cascading Style Sheets

@media
======

The **`@media`** CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

**Note:** In JavaScript, the rules created using `@media` can be accessed with the `CSSMediaRule` CSS object model interface.

Try it
------

Syntax
------

The `@media` at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

```css
/\* At the top level of your code \*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/\* Nested within another conditional at-rule \*/
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
```

For a discussion of media query syntax, please see Using media queries.

Description
-----------

### Media types

*Media types* describe the general category of a device.
 Except when using the `not` or `only` logical operators, the media type is optional and the `all` type is implied.

`all`

Suitable for all devices.

`print`

Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)

`screen`

Intended primarily for screens.

**Note:** CSS2.1 and Media Queries 3 defined several additional media types (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, and `aural`), but they were deprecated in Media Queries 4 and shouldn't be used.

### Media features

*Media features* describe specific characteristics of the user agent, output device, or environment.
 Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.

`any-hover`

 Does any available input mechanism allow the user to hover over elements?
 Added in Media Queries Level 4.

`any-pointer`

 Is any available input mechanism a pointing device, and if so, how accurate is it?
 Added in Media Queries Level 4.

`aspect-ratio`

Width-to-height aspect ratio of the viewport

`color`

Number of bits per color component of the output device, or zero if the device isn't color

`color-gamut`

 Approximate range of colors that are supported by the user agent and output device.
 Added in Media Queries Level 4.

`color-index`

Number of entries in the output device's color lookup table, or zero if the device does not use such a table

`device-aspect-ratio`
Deprecated

 Width-to-height aspect ratio of the output device.
 Deprecated in Media Queries Level 4.

`device-height`
Deprecated

 Height of the rendering surface of the output device.
 Deprecated in Media Queries Level 4.

`device-width`
Deprecated

Width of the rendering surface of the output device. Deprecated in Media Queries Level 4.

`display-mode`

 The display mode of the application, as specified in the web app manifest's `display` member.
 Defined in the Web App Manifest spec.

`dynamic-range`

Combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device. Added in Media Queries Level 5.

`forced-colors`

 Detect whether user agent restricts color palette.
 Added in Media Queries Level 5.

`grid`

Does the device use a grid or bitmap screen?

`height`

Height of the viewport.

`hover`

 Does the primary input mechanism allow the user to hover over elements?
 Added in Media Queries Level 4.

`inverted-colors`

 Is the user agent or underlying OS inverting colors?
 Added in Media Queries Level 5.

`monochrome`

Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome.

`orientation`

Orientation of the viewport.

`overflow-block`

 How does the output device handle content that overflows the viewport along the block axis?
 Added in Media Queries Level 4.

`overflow-inline`

 Can content that overflows the viewport along the inline axis be scrolled?
 Added in Media Queries Level 4.

`pointer`

 Is the primary input mechanism a pointing device, and if so, how accurate is it?
 Added in Media Queries Level 4.

`prefers-color-scheme`

 Detect if the user prefers a light or dark color scheme.
 Added in Media Queries Level 5.

`prefers-contrast`

 Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors.
 Added in Media Queries Level 5.

`prefers-reduced-motion`

 The user prefers less motion on the page.
 Added in Media Queries Level 5.

`resolution`

Pixel density of the output device.

`scripting`

 Detects whether scripting (i.e. JavaScript) is available.
 Added in Media Queries Level 5.

`update`

 How frequently the output device can modify the appearance of content.
 Added in Media Queries Level 4.

`video-dynamic-range`

Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device. Added in Media Queries Level 5.

`width`

Width of the viewport including width of scrollbar.

### Logical operators

 The *logical operators* `not`, `and`, `only`, and `or` can be used to compose a complex media query.
 You can also combine multiple media queries into a single rule by separating them with commas.

`and`

 Used for combining multiple media features together into a single media query, requiring each chained feature to return `true` for the query to be `true`.
 It is also used for joining media features with media types.

`not`

 Used to negate a media query, returning `true` if the query would otherwise return `false`.
 If present in a comma-separated list of queries, it will only negate the specific query to which it is applied.
 If you use the `not` operator, you *must also* specify a media type.

**Note:** In Level 3, the `not` keyword can't be used to negate an individual media feature expression, only an entire media query.

`only`

 Applies a style only if an entire query matches.
 It is useful for preventing older browsers from applying selected styles.
 When not using `only`, older browsers would interpret the query `screen and (max-width: 500px)` as `screen`, ignoring the remainder of the query, and applying its styles on all screens.
 If you use the `only` operator, you *must also* specify a media type.

`,` (comma)

 Commas are used to combine multiple media queries into a single rule.
 Each query in a comma-separated list is treated separately from the others
 Thus, if any of the queries in a list is `true`, the entire media statement returns `true`.
 In other words, lists behave like a logical `or` operator.

`or`

Equivalent to the `,` operator. Added in Media Queries Level 4.

### User agent client hints

 Some media queries have corresponding user agent client hints.
 These are HTTP headers that request content that is pre-optimized for the particular media requirement.
 They include `Sec-CH-Prefers-Color-Scheme` and `Sec-CH-Prefers-Reduced-Motion`.

Accessibility concerns
----------------------

To best accommodate people who adjust a site's text size, use `em`s when you need a `<length>` for your media queries.

Both `em` and `px` are valid units, but `em` works better if the user changes the browser text size.

 Also consider media queries or HTTP user agent client hints to improve the user's experience.
 For example, the media query `prefers-reduced-motion` or the equivalent HTTP header `Sec-CH-Prefers-Reduced-Motion`) can be used to minimize the amount of animation or motion used based on user preferences.

Security
--------

Because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.

Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.

Formal syntax
-------------
```

@media =
  @media <media-query-list> { <rule-list> }

```

Examples
--------

### Testing for print and screen media types

```css
@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}
```

Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples:

```css
@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}
```

For more examples, please see Using media queries.

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # media-descriptor-table |
| CSS Conditional Rules Module Level 3 # at-media |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using media queries
* In JavaScript, `@media` can be accessed via the CSS object model interface `CSSMediaRule`.
* Extended Mozilla media features
* Extended WebKit media features


At-rules - CSS: Cascading Style Sheets

At-rules
========

**At-rules** are CSS statements that instruct CSS how to behave. They begin with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and includes everything up to the next semicolon, '`;`' (`U+003B SEMICOLON`), or the next CSS block, whichever comes first.

Syntax
------

### Regular

```css
/\* General structure \*/
@identifier (RULE);

/\* Example: tells browser to use UTF-8 character set \*/
@charset "utf-8";
```

There are several regular at-rules, designated by their identifiers, each with a different syntax:

* `@charset` — Defines the character set used by the style sheet.
* `@import` — Tells the CSS engine to include an external style sheet.
* `@namespace` — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.
### Nested

```css
@identifier (RULE) {
}
```

A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules.

* `@media` — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a *media query*.
* `@scope` - A conditional group rule that will apply its content if the device meets the criteria of the given condition.
* `@starting-style` - A conditional group rule that will apply starting transition if the browser meets the criteria of the given condition.
* `@supports` — A conditional group rule that will apply its content if the browser meets the criteria of the given condition.
* `@document`
Deprecated
 — A conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition.
* `@page` — Describes the aspect of layout changes that will be applied when printing the document.
* `@font-face` — Describes the aspect of an external font to be downloaded.
* `@keyframes` — Describes the aspect of intermediate steps in a CSS animation sequence.
* `@counter-style` — Defines specific counter styles that are not part of the predefined set of styles.
* `@font-feature-values` (plus `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` and `@character-variant`) — Define common names in `font-variant-alternates` for feature activated differently in OpenType.
* `@property` — Describes the aspect of custom properties and variables.
* `@layer` – Declares a cascade layer and defines the order of precedence in case of multiple cascade layers.
Conditional group rules
-----------------------

Much like the values of properties, each at-rule has a different syntax. Nevertheless, several of them can be grouped into a special category named **conditional group rules**. These statements share a common syntax and each of them can include *nested statements*—either *rulesets* or *nested at-rules*. Furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either **true** or **false**. If the condition evaluates to **true**, then all of the statements within the group will be applied.

Conditional group rules are:

* `@media`,
* `@scope`,
* `@starting-style`,
* `@supports`,
* `@document`. *(deferred to Level 4 of CSS Spec)*

Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.

Nesting @layer with CSS nesting
-------------------------------

Cascade layers can be nested to create nested layers. These are joined with a `.`(dot). This can also be achieved using CSS nesting.

Index
-----

* `@charset`
* `@color-profile`
* `@container`
* `@counter-style`
* `@document`
Deprecated
* `@font-face`
* `@font-feature-values`
* `@font-palette-values`
* `@import`
* `@keyframes`
* `@layer`
* `@media`
* `@namespace`
* `@page`
* `@property`
* `@scope`
* `@starting-style`
* `@supports`
Specifications
--------------

| Specification |
| --- |
| CSS Conditional Rules Module Level 3  |
| Compatibility Standard # css-at-rules |

See also
--------

* CSS key concepts:
    + CSS syntax
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements
    + CSS nesting module


CSS box alignment - CSS: Cascading Style Sheets

CSS box alignment
=================

The **CSS box alignment** module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. The module aims to create a consistent method of alignment across all of CSS. This document details the general concepts found in the specification.

**Note:** The documentation for each layout method will detail how Box Alignment is applied there.

Older alignment methods
-----------------------

CSS traditionally had very limited alignment capabilities. We were able to align text using `text-align`, center blocks using auto `margin`s, and in table or inline-block layouts using the `vertical-align` property. Alignment of text is now covered by the Inline Layout and CSS Text modules, and for the first time in Box Alignment we have full horizontal and vertical alignment capabilities.

If you initially learned Flexbox then you may consider these properties to be part of the Flexbox specification, and some of the properties are indeed listed in Level 1 of Flexbox. However the specification notes that the Box Alignment specification should be referred to as it may add additional capabilities over what is currently in Flexbox.

Basic examples
--------------

The following examples demonstrate how some of the Box Alignment Properties are applied in Grid and Flexbox.

### CSS grid layout alignment example

In this example using Grid Layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. This space is distributed using `justify-content`. On the block (cross) axis the alignment of the items inside their grid areas is controlled with `align-items`. The first item overrides the `align-items` value set on the group by setting `align-self` to `center`.

### Flexbox Alignment Example

In this example, three flex items are aligned on the main axis using `justify-content` and on the Cross Axis using `align-items`. The first item overrides the `align-items` set on the group by setting `align-self` to `center`.

Key concepts and terminology
----------------------------

The specification details some alignment terminology to make it easier to discuss these alignment properties outside their implementation within a particular layout method. There are also some key concepts which are common to all layout methods.

### Relationship to writing modes

Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. Instead we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.

### Two dimensions of alignment

When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used — for English, for example, the inline axis is horizontal. The block axis is the axis along which blocks, such as paragraph elements, are laid out and it runs across the Inline axis.

![Inline axis is the left / right, or horizontal, direction. Block axis is vertical, or top / bottom.](/en-US/docs/Web/CSS/CSS_box_alignment/two-axes.png)

When aligning items on the inline axis you will use the properties which begin with `justify-`:

* `justify-items`
* `justify-self`
* `justify-content`

When aligning items on the block axis you will use the properties that begin `align-`:

* `align-items`
* `align-self`
* `align-content`

Flexbox adds an additional complication in that the above is true when `flex-direction` is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis.

### The alignment subject

The **alignment subject** is the thing that is being aligned. For `justify-self` or `align-self`, or when setting these values as a group with `justify-items` or `align-items`, this will be the margin box of the element that this property is being used on. The `justify-content` and `align-content` properties differ per layout method.

### The alignment container

The **alignment container** is the box the subject is being aligned inside. This will typically be the alignment subject's containing block. An alignment container may contain one or many alignment subjects.

The below image shows an alignment container with two alignment subjects inside.

![A box containing two rectangles of the same width but different heights. The two rectangles are top aligned, meaning they both have their top lines about 10px inside the top of the box in which they are contained.](/en-US/docs/Web/CSS/CSS_box_alignment/align-container-subjects.png)

### Fallback alignment

If you set an alignment that cannot be fulfilled, then the **fallback alignment** will come into play and deal with the available space. This fallback alignment is specified individually for each layout method and detailed on the page for that method.

Types of alignment
------------------

There are three different types of alignment that the specification details; these use keyword values.

* **Positional alignment**: specifying the position of an alignment subject with relation to its alignment container.
* **Baseline alignment**: These keywords define alignment as a relationship among the baselines of multiple alignment subjects within an alignment context.
* **Distributed alignment**: These keywords define alignment as a distribution of space among alignment subjects.
### Positional alignment keyword values

The following values are defined for positional alignment, and can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.

* `center`
* `start`
* `end`
* `self-start`
* `self-end`
* `flex-start` for Flexbox only
* `flex-end` for Flexbox only
* `left`
* `right`

Other than the physical values of `left` and `right`, which relate to physical attributes of the screen, all of the other values are logical values and relate to the writing mode of the content.

For example, when working in CSS Grid Layout, if you are working in English and set `justify-content` to `start` this will move the items in the inline dimension to the start, which will be the left as sentences in English start on the left. If you were using Arabic, a right to left language, then the same value of `start` would result in the items moving to the right, as sentences in Arabic start on the right-hand side of the page.

Both of these examples have `justify-content: start`, however the location of start changes according to the writing mode.

![There are two boxes, each with 3 children of differing heights but similar widths. The first box has three children with the letters A, B, and C. These three boxes are all aligned to the left. The second box has three children with arabic letters in them. Those three boxes are all aligned to the right.](/en-US/docs/Web/CSS/CSS_box_alignment/writing-mode-start.png)

### Baseline alignment

The Baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.

* `baseline`
* `first baseline`
* `last baseline`

Baseline content alignment — specifying a baseline alignment value for `justify-content` or `align-content` — works in layout methods that lay items out in rows. The alignment subjects are baseline aligned against each other by adding padding inside the boxes.

Baseline self alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self alignment is when using `justify-self` or `align-self`, or when setting these values as a group with `justify-items` and `align-items`.

### Distributed alignment

The **distributed alignment keywords** are used with the `align-content` and `justify-content` properties. These keywords define what happens to any additional space after alignment subjects have been displayed. The values are as follows:

* `stretch`
* `space-between`
* `space-around`
* `space-evenly`

For example, in Flex Layout items are aligned with `flex-start` initially. Working in a horizontal top to bottom writing mode such as English, with `flex-direction` as `row` the items start on the far left and any available space after displaying the items is placed after the items.

![Three rectangles of different widths are inside a box. They are all aligned to the left side of the containing box, with about 10px between them, and 10px between the left side of the first rectangle and the parent container.](/en-US/docs/Web/CSS/CSS_box_alignment/justify-content-start.png)

If you set `justify-content: space-between` on the flex container, the available space is now shared out and placed between the items.

![Three rectangles of different widths are inside a box. The first rectangle is aligned to the left side of the containing box, the third rectangle is aligned right, and the middle rectangle is equally spaced between the first and last.](/en-US/docs/Web/CSS/CSS_box_alignment/justify-content-space-between.png)

There needs to be space available in the dimension you wish to align the items in, in order for these keywords to take effect. With no space, there is nothing to distribute.

Overflow alignment
------------------

The `safe` and `unsafe` keywords help define behavior when an alignment subject is larger than the alignment container. The `safe` keyword will align to `start` in the case of a specified alignment causing an overflow, the aim being to avoid "data loss" where part of the item is outside the boundaries of the alignment container and can't be scrolled to.

If you specify `unsafe` then the alignment will be honoured even if it would cause such data loss.

Gaps between boxes
------------------

The box alignment specification also includes the `gap`, `row-gap`, and `column-gap` properties. These properties enable the setting of a consistent gap between items in a row or column, in any layout method which has items arranged in this way.

The `gap` property is a shorthand for `row-gap` and `column-gap`, which allows us to set these properties at once:

* `row-gap`
* `column-gap`
* `gap`

In the below example, a grid layout uses the `gap` shorthand to set a `10px` gap between row tracks, and a `2em` gap between column tracks.

**Note:** The early grid implementation included `-gap` properties prefixed with `grid-`. All browsers now support the unprefixed properties, though you may see the following legacy properties in examples and tutorials: `grid-row-gap`, `grid-column-gap`, and `grid-gap`. The prefixed versions will be maintained as an alias of the unprefixed ones.

Be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items.

Pages detailing individual alignment properties
-----------------------------------------------

As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following pages for each layout type for details of how to use the alignment properties with it:

* Box alignment in Flexbox
* Box alignment in CSS Grid Layout
* Box alignment in multiple-column layout
* Box alignment for block, absolutely positioned and table layout
Reference
---------

### CSS Properties

* `justify-content`
* `align-content`
* `place-content`
* `justify-items`
* `align-items`
* `place-items`
* `justify-self`
* `align-self`
* `place-self`
* `row-gap`
* `column-gap`
* `gap`
### Glossary Entries

* Cross axis
* Main axis
* Alignment container
* Alignment subject
* Fallback alignment
Guides
------

* CSS Flexbox guide: *Basic concepts of Flexbox*
* CSS Flexbox guide: *Aligning items in a flex container*
* CSS Grid guide: *Box alignment in CSS Grid layouts*
External Resources
------------------

* CSS Grid, Flexbox and Box alignment
* Thoughts on partial implementations of Box alignment


:past - CSS: Cascading Style Sheets

:past
=====

The **`:past`** CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches `:current`. For example in a video with captions which are being displayed by WebVTT.

```css
:past(p, span) {
  display: none;
}
```

Syntax
------

```css
:past {
  /\* ... \*/
}
```

Examples
--------

### CSS

```css
:past(p, span) {
  display: none;
}
```

### HTML

```html
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
 label="English"
 kind="subtitles"
 srclang="en"
 src="subtitles.vtt"
 default />
</video>
```

### WebVTT
```

WEBVTT FILE

1
00:00:03.500 --> 00:00:05.000
This is the first caption

2
00:00:06.000 --> 00:00:09.000
This is the second caption

3
00:00:11.000 --> 00:00:19.000
This is the third caption
```

Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # the-past-pseudo |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Video Text Tracks Format (WebVTT)
* `:current`
* `:future`