Value definition syntax - CSS: Cascading Style Sheets

Value definition syntax
=======================

**CSS value definition syntax**, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).

The definition syntax describes which values are allowed and the interactions between them. A component can be a *keyword*, some characters considered as a *literal*, or a value of a given CSS data type or of another CSS property.

Component value types
---------------------

### Keywords

#### Generic keywords

A keyword with a predefined meaning appears literally, without quotation marks. For example: `auto`, `smaller` or `ease-in`.

#### The specific case of `inherit`, `initial` and `unset`

All CSS properties accept the keywords `inherit`, `initial` and `unset`, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.

### Literals

In CSS, a few characters can appear on their own, like the slash ('`/`') or the comma ('`,`'), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate components that are of the same type, but belong to different properties.

Both symbols appear literally in a value definition.

### Data types

#### Basic data types

Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called *basic data types*, they are represented with their name surrounded by the symbol '`<`' and '`>`': `<angle>`, `<string>`, …

#### Non-terminal data types

Less common data types, called *non-terminal data types*, are also surrounded by '`<`' and '`>`'.

Non-terminal data types are of two kinds:

* data types *sharing the same name of a property*, put between quotes. In this case, the data type shares the same set of values as the property. They are often used in the definition of shorthand properties.
* data type *not sharing the same name of a property*. These data types are very close to the basic data types. They only differ from the basic data types in the physical location of their definition. In this case, the definition is usually physically very close to the definition of the property using them.
Component value combinators
---------------------------

### Brackets

*Brackets* enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to **group components to bypass the precedence rules**.

```css
bold [ thin && <length> ]
```

This example matches the following values:

* `bold thin 2vh`
* `bold 0 thin`
* `bold thin 3.5em`

But not:

* `thin bold 3em`, as `bold` is juxtaposed with the component defined by the brackets, it must appear before it.
### Juxtaposition

Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called *juxtaposition*. All juxtaposed components are **mandatory and should appear in the exact order**.

```css
bold <length>, thin
```

This example matches the following values:

* `bold 1em, thin`
* `bold 0, thin`
* `bold 2.5cm, thin`
* `bold 3vh, thin`

But not:

* `thin 1em, bold`, as the entities must be in the expressed order
* `bold 1em thin`, as the entities are mandatory; the comma, a literal, must be present
* `bold 0.5ms, thin`, as the `ms` values are not `<length>`
### Double ampersand

Separating two or more components, by a *double ampersand*, `&&`, means that all these entities are **mandatory but may appear in any order**.

```css
bold && <length>
```

This example matches the following values:

* `bold 1em`
* `bold 0`
* `2.5cm bold`
* `3vh bold`

But not:

* `bold`, as both components must appear in the value.
* `bold 1em bold`, as both components must appear only one time.

**Note:** juxtaposition has precedence over the double ampersand, meaning that `bold thin && <length>` is equivalent to `[ bold thin ] && <length>`. It describes `bold thin <length>` or `<length> bold thin` but not `bold <length> thin`.

### Double bar

Separating two or more components by a *double bar*, `||`, means that all entities are options: **at least one of them must be present, and they may appear in any order**. Typically this is used to define the different values of a shorthand property.

```css
<'border-width'> || <'border-style'> || <'border-color'>
```

This example matches the following values:

* `1em solid blue`
* `blue 1em`
* `solid 1px yellow`

But not:

* `blue yellow`, as a component must appear at most one single time.
* `bold`, as it isn't a keyword allowed as value of any of the entity.

**Note:** the double ampersand has precedence over the double bar, meaning that `bold || thin && <length>` is equivalent to `bold || [ thin && <length> ]`. It describes `bold`, `thin <length>`, `bold thin <length>`, or `thin <length> bold` but not `<length> bold thin` as bold, if not omitted, must be placed before or after the whole `thin && <length>` component.

### Single bar

Separating two or more entities by a *single bar*, `|`, means that all entities are exclusive options: **exactly one of these options must be present**. This is typically used to separate a list of possible keywords.

```css
<percentage> | <length> | left | center | right | top | bottom
```

This example matches the following values:

* `3%`
* `0`
* `3.5em`
* `left`
* `center`
* `right`
* `top`
* `bottom`

But not:

* `center 3%`, as only one of the components must be present.
* `3em 4.5em`, as a component must be present at most one time.

**Note:** the double bar has precedence over the single bar, meaning that `bold | thin || <length>` is equivalent to `bold | [ thin || <length> ]`. It describes `bold`, `thin`, `<length>`, `<length> thin`, or `thin <length>` but not `bold <length>` as only one entity from each side of the `|` combinator can be present.

Component value multipliers
---------------------------

A multiplier is a sign that indicates how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

Note that multipliers cannot be added and have precedence over all combinators.

### Asterisk (`*`)

The *asterisk multiplier* indicates that the entity may appear **zero, one or several times**.

```css
bold smaller*
```

This example matches the following values:

* `bold`
* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`, and so on.

But not:

* `smaller`, as `bold` is juxtaposed, and must appear before any `smaller` keyword.
### Plus (`+`)

The *plus multiplier* indicates that the entity may appear **one or several times**.

```css
bold smaller+
```

This example matches the following values:

* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`, and so on.

But not:

* `bold`, as `smaller` must appear at least one time.
* `smaller`, as `bold` is juxtaposed and must appear before any `smaller` keyword.
### Question mark (`?`)

The *question mark multiplier* indicates that the entity is optional, and **must appear zero or one time**.

```css
bold smaller?
```

This example matches the following values:

* `bold`
* `bold smaller`

But not:

* `bold smaller smaller`, as `smaller` must appear at most one time.
* `smaller`, as `bold` is juxtaposed and must appear before any `smaller` keyword.
### Curly braces (`{ }`)

The *curly braces multiplier*, enclosing two integers separated by a comma, A and B, indicates that the entity **must appear at least A times and at most B times**.

```css
bold smaller{1,3}
```

This example matches the following values:

* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`

But not:

* `bold`, as `smaller` must appear at least one time.
* `bold smaller smaller smaller smaller`, as `smaller` must appear at most three times.
* `smaller`, as `bold` is juxtaposed and must appear before any `smaller` keyword
### Hash mark (`#`)

The *hash mark multiplier* indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

```css
bold smaller#
```

This example matches the following values:

* `bold smaller`
* `bold smaller, smaller`
* `bold smaller, smaller, smaller`, and so on.

But not:

* `bold`, as `smaller` must appear at least one time.
* `bold smaller smaller smaller`, as the different occurrences of `smaller` must be separated by commas.
* `smaller`, as `bold` is juxtaposed and must appear before any `smaller` keyword.

The hash mark may optionally be followed by curly braces to indicate precisely how many times the repetition occurs.

```css
bold smaller#{1,3}
```

This example matches the following values:

* `bold smaller`
* `bold smaller, smaller`
* `bold smaller, smaller, smaller`

But not:

* `bold smaller, smaller, smaller, smaller`, as `smaller` must appear at most three times.

```css
bold smaller#{2}
```

This example matches the following value:

* `bold smaller, smaller`

But not:

* `bold smaller`, as `smaller` must appear exactly two times.
### Exclamation point (`!`)

The *exclamation point multiplier* after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

```css
[ bold? smaller? ]!
```

This example matches the following values:

* `bold`
* `smaller`
* `bold smaller`

But not:

* neither `bold` nor `smaller`, as one of them must appear.
* `smaller bold`, as `bold` is juxtaposed and must appear before the `smaller` keyword.
* `bold smaller bold`, as `bold` and `smaller` may only appear once.
Summary
-------

| Sign | Name | Description | Example |
| --- | --- | --- | --- |
| Combinators |
| --- |
|  | Juxtaposition | Components are mandatory and should appear in that order | `solid <length>` |
| `&&` | Double ampersand | Components are mandatory but may appear in any order | `<length> && <string>` |
| `||` | Double bar |
 At least one of the components must be present, and they may appear in
 any order.
  | `<'border-image-outset'> || <'border-image-slice'>` |
| `|` | Single bar | Exactly one of the components must be present | `smaller | small | normal | big | bigger` |
| `[ ]` | Brackets | Group components to bypass precedence rules | `bold [ thin && <length> ]` |
| Multipliers |
|  | No multiplier | Exactly 1 time | `solid` |
| `*` | Asterisk | 0 or more times | `bold smaller*` |
| `+` | Plus sign | 1 or more times | `bold smaller+` |
| `?` | Question mark | 0 or 1 time (that is *optional)* | `bold smaller?` |
| `{A,B}` | Curly braces | At least `A` times, at most `B` times | `bold smaller{1,3}` |
| `#` | Hash mark |
 1 or more times, but each occurrence separated by a comma
 ('`,`')
  | `bold smaller#` |
| `!` | Exclamation point | Group must produce at least 1 value | `[ bold? smaller? ]!` |

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # value-defs |

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


list-style-image - CSS: Cascading Style Sheets

list-style-image
================

The **`list-style-image`** CSS property sets an image to be used as the list item marker.

It is often more convenient to use the shorthand `list-style`.

Try it
------

**Note:** This property is applied to list items, i.e. elements with ``display`: list-item;` by default this includes `<li>` elements. Because this property is inherited, it can be set on the parent element (normally `<ol>` or `<ul>`) to let it apply to all list items.

Syntax
------

```css
/\* Keyword values \*/
list-style-image: none;

/\* <url> values \*/
list-style-image: url("starsolid.gif");

/\* valid image values \*/
list-style-image: linear-gradient(to left bottom, red, blue);

/\* Global values \*/
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;
```

### Values

`<image>`

A valid image to use as the marker.

`none`

Specifies that no image is used as the marker. If this value is set, the marker defined in `list-style-type` will be used instead. This is the default value for `list-style`.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | list items |
| Inherited | yes |
| Computed value | The keyword `none` or the computed <image> |
| Animation type | discrete |

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

list-style-image =
  <image>  |
  none

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Using a url value

This example has a star as a marker, which we include using the `url()` image function.

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

#### CSS

```css
ul {
  list-style-image: url("starsolid.gif");
}
```

#### Result

### Using a gradient

This example has a CSS gradient as a marker, which we create uses the `linear-gradient()` image function.

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

#### CSS

```css
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}
```

#### Result

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # image-markers |

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

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

See also
--------

* `list-style` shorthand
* `list-style-type` property
* `list-style-position` property
* `::marker` pseudo-element
* CSS lists and counters module
* CSS counter styles module


<transform-function> - CSS: Cascading Style Sheets

<transform-function>
====================

The **`<transform-function>`** CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the `transform` property.

Syntax
------

The `<transform-function>` data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

### Matrix transformation

`matrix()`

Describes a homogeneous 2D transformation matrix.

`matrix3d()`

Describes a 3D transformation as a 4×4 homogeneous matrix.

### Perspective

`perspective()`

Sets the distance between the user and the z=0 plane.

### Rotation

`rotate()`

Rotates an element around a fixed point on the 2D plane.

`rotate3d()`

Rotates an element around a fixed axis in 3D space.

`rotateX()`

Rotates an element around the horizontal axis.

`rotateY()`

Rotates an element around the vertical axis.

`rotateZ()`

Rotates an element around the z-axis.

### Scaling (resizing)

`scale()`

Scales an element up or down on the 2D plane.

`scale3d()`

Scales an element up or down in 3D space.

`scaleX()`

Scales an element up or down horizontally.

`scaleY()`

Scales an element up or down vertically.

`scaleZ()`

Scales an element up or down along the z-axis.

### Skewing (distortion)

`skew()`

Skews an element on the 2D plane.

`skewX()`

Skews an element in the horizontal direction.

`skewY()`

Skews an element in the vertical direction.

### Translation (moving)

`translate()`

Translates an element on the 2D plane.

`translate3d()`

Translates an element in 3D space.

`translateX()`

Translates an element horizontally.

`translateY()`

Translates an element vertically.

`translateZ()`

Translates an element along the z-axis.

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

Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.

### Cartesian coordinates

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation `(x, y)`.

![A cartesian plane showing the negative Y and positive X axis starting from origin with three points P1, P2 and P3 with corresponding X and Y values](/en-US/docs/Web/CSS/transform-function/coord_in_r2.png)

In CSS (and most computer graphics), the origin `(0, 0)` represents the *top-left* corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be `(2, 5)`, while a point 3 units to the left and 12 units up would be `(-3, -12)`.

### Transformation functions

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

(

a

c

b

d

)

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

(

a

c

b

d

)

(

x

y

)

=

(

a
x
+
c
y

b
x
+
d
y

)

It is even possible to apply several transformations in a row:

(

a
1

c
1

b
1

d
1

)

(

a
2

c
2

b
2

d
2

)

=

(

a
1

a
2

+

c
1

b
2

a
1

c
2

+

c
1

d
2

b
1

a
2

+

d
1

b
2

b
1

c
2

+

d
1

d
2

)

With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector `(tx, ty)` must be expressed separately, as two additional parameters.

**Note:** Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can express translations as linear functions.

**Note:** Transform functions are used with the `transform` property but not with individual transform properties-`translate`, `scale`, and `rotate`.

Examples
--------

### Transform function comparison

The following example provides a 3D cube created from DOM elements and transforms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.

Choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts back to its starting state. The cube's starting state is slightly rotated using `transform3d()`, to allow you to see the effect of all the transforms.

#### HTML

```html
<main>
  <section id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </section>

  <div class="select-form">
    <label for="transfunction">Select a transform function</label>
    <select id="transfunction">
      <option selected>Choose a function</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>
```

#### CSS

```css
main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

.select-form {
  margin-top: 50px;
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");

selectElem.addEventListener("change", () => {
  if (selectElem.value === "Choose a function") {
    return;
  } else {
    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
    setTimeout(() => {
      example.style.transform = "rotate3d(1, 1, 1, 30deg)";
    }, 2000);
  }
});
```

#### Result

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-functions |
| CSS Transforms Module Level 2 # transform-functions |

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

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

See also
--------

* CSS `transform` property
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`


<resolution> - CSS: Cascading Style Sheets

<resolution>
============

The **`<resolution>`** CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.

On screens, the units are related to *CSS* inches, centimeters, or pixels, not physical values.

Syntax
------

The `<resolution>` data type consists of a strictly positive `<number>` followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

### Units

`dpi`

Represents the number of dots per inch. Screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. As 1 inch is 2.54 cm, `1dpi ≈ 0.39dpcm`.

`dpcm`

Represents the number of dots per centimeter. As 1 inch is 2.54 cm, `1dpcm ≈ 2.54dpi`.

`dppx`

Represents the number of dots per `px` unit. Due to the 1:96 fixed ratio of CSS `in` to CSS `px`, `1dppx` is equivalent to `96dpi`, which corresponds to the default resolution of images displayed in CSS as defined by `image-resolution`.

`x`

Alias for `dppx`.

**Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0dpi`, `0dpcm`, or `0dppx`.

Examples
--------

### Use in a media query

```css
@media print and (min-resolution: 300dpi) {
  /\* … \*/
}
```

### Valid resolutions
```

96dpi
50.82dpcm
3dppx
```

### Invalid resolutions
```

72 dpi     Spaces are not allowed between the number and the unit.
ten dpi    The number must use digits only.
0          The unit is required.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # resolution |

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

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

See also
--------

* resolution media feature
* The `image-resolution` property
* Using @media queries


::-webkit-slider-thumb - CSS: Cascading Style Sheets

::-webkit-slider-thumb
======================

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

The **`::-webkit-slider-thumb`** CSS pseudo-element represents the "thumb" that the user can move within the "groove" of an `<input>` of `type="range"` to alter its numerical value.

Syntax
------

```css
::-webkit-slider-thumb {
  /\* ... \*/
}
```

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

* `::-webkit-slider-runnable-track`
* Similar pseudo-elements used by other browsers:
    + `::-moz-range-thumb`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
* Couple of Gotchas to Watch-out For


:focus-visible - CSS: Cascading Style Sheets

:focus-visible
==============

Baseline 2022
-------------

Newly availableSince March 2022, 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 **`:focus-visible`** pseudo-class applies while an element matches the `:focus` pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)

Try it
------

This selector is useful to provide a different focus indicator based on the user's input modality (mouse vs. keyboard).

Syntax
------

```css
:focus-visible {
  /\* ... \*/
}
```

:focus vs :focus-visible
------------------------

Originally, user-agent CSS set focus styles based only on the `:focus` pseudo-class, styling most focused elements with a focus ring outline. This meant all elements, including all links and buttons, had a focus ring applied when focused, which many found ugly. Because of the appearance, some authors removed the user-agent outline focus styles. Changing focus style can negatively impact usability, while removing focus styles makes keyboard navigation inaccessible for sighted users.

Browsers no longer visibly indicate focus (such as by drawing a "focus ring"), around each element when it has focus. Instead, they use a variety of heuristics to provide focus indicators only when it would be most helpful to the user. For instance, when a button is clicked using a pointing device, the focus is generally not visually indicated, but when a text box needing user input has focus, focus is indicated. While focus styles are always required when users are navigating the page with the keyboard or when focus is managed via scripts, focus styles are not required when the user knows where they are putting focus, such as when they use a pointing device such as a mouse or finger to physically set focus on an element, unless that element continues to need user attention.

The `:focus` pseudo-class always matches the currently-focused element. The `:focus-visible` pseudo-class also matches the focused element, but only if the user needs to be informed where the focus currently is. Because the `:focus-visible` pseudo-class matches the focused element when needed, using the `:focus-visible` (instead of the `:focus` pseudo-class) allows authors to change the appearance of the focus indicator without changing when the focus indicator appears.

When the `:focus` pseudo-class is used, it always targets the currently focused element. This means that when a user employs a pointing device, a visible focus ring appears around the focused element, which some consider obtrusive. The `:focus-visible` pseudo-class respects user agents' selective focus indication behavior while still allowing focus indicator customization.

Examples
--------

### Comparing :focus and :focus-visible

This example presents three pairs of controls. Each pair consists of a `text` input and a button.

* The first pair does not add any custom styles for focus states, and shows the default case.
* The second pair adds styles using the `:focus` pseudo-class.
* The third pair add styles using the `:focus-visible` pseudo-class.

```html
<input type="text" value="Default styles" /><br />
<button>Default styles</button><br />

<input class="focus-only" type="text" value=":focus" /><br />
<button class="focus-only">:focus</button><br />

<input class="focus-visible-only" type="text" value=":focus-visible" /><br />
<button class="focus-visible-only">:focus-visible</button>
```

```css
input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}
```

If you click each element in turn, you will see that when `:focus` is used to style the focus ring, the UA draws the focus ring when the user clicks the button. However, when `:focus-visible` is used to style the focus ring, the UA does not draw the focus ring when the user clicks the button, just like in the default case.

If you then tab through each element, you will see that in all three cases — default, `:focus`, and `:focus-visible` — the UA draws the focus ring around the button when the user navigates to it with the keyboard.

This shows how `:focus-visible` enables a designer to follow the browser's logic in determining when a focus ring should be shown.

### Providing a :focus fallback

If your code has to work in old browser versions that do not support `:focus-visible`, check supports of `:focus-visible` with `@supports` and repeat the same focus styling in it, but inside a `:focus` rule. Note that even if you do not specify anything at all for `:focus`, old browsers will simply display the native outline, which can be enough.

```html
<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">
  Button without fallback
</button>
```

```css
.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /\* Draw the focus when :focus-visible is supported \*/
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /\* Fallback for browsers without :focus-visible support \*/
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}
```

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

### Low vision

Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

* Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### Cognition

It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.

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

| Specification |
| --- |
| Selectors Level 4 # the-focus-visible-pseudo |

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

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

See also
--------

* `:focus`
* `:focus-within`
* A polyfill for `:focus-visible`


inset-block - CSS: Cascading Style Sheets

inset-block
===========

The **`inset-block`** CSS property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top` and `bottom`, or `right` and `left` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `inset-block-end`
* `inset-block-start`
Syntax
------

```css
/\* <length> values \*/
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /\* value applied to start and end \*/

/\* <percentage>s of the width or height of the containing block \*/
inset-block: 10% 5%;

/\* Keyword value \*/
inset-block: auto;

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

### Values

The `inset-block` property takes the same values as the `left` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `inset-block-start`: `auto`
* `inset-block-end`: `auto`
 |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | logical-height of containing block |
| Computed value | as each of the properties of the shorthand:* `inset-block-start`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
* `inset-block-end`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
 |
| Animation type | a length, percentage or calc(); |

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

inset-block =
  <'top'>{1,2}

```

Examples
--------

### Setting block start and end offsets

#### HTML

```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block: 20px 50px;
  background-color: #c8c800;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset-block |

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

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

See also
--------

* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* The mapped physical shortcut: `inset`
* The mapped inline shortcut: `inset-inline`
* `writing-mode`, `direction`, `text-orientation`


margin - CSS: Cascading Style Sheets

margin
======

The **`margin`** CSS shorthand property sets the margin area on all four sides of an element.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`
Syntax
------

```css
/\* Apply to all four sides \*/
margin: 1em;
margin: -3px;

/\* top and bottom | left and right \*/
margin: 5% auto;

/\* top | left and right | bottom \*/
margin: 1em auto 2em;

/\* top | right | bottom | left \*/
margin: 2px 1em 0 auto;

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

The `margin` property may be specified using one, two, three, or four values. Each value is a `<length>`, a `<percentage>`, or the keyword `auto`. Negative values draw the element closer to its neighbors than it would be by default.

* 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 **right and left**, the third to the **bottom**.
* When **four** values are specified, the margins apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<length>`

The size of the margin as a fixed value.

`<percentage>`

The size of the margin as a percentage, relative to the inline size (*width* in a horizontal language, defined by `writing-mode`) of the containing block.

`auto`

The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

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

This property can be used to set a margin on all four sides of an element. Margins create extra space *around* an element, unlike `padding`, which creates extra space *within* an element.

The top and bottom margins have no effect on *non-replaced* inline elements, such as `<span>` or `<code>`.

### Horizontal centering

To center something horizontally in modern browsers, you can use `display``: flex;` `justify-content``: center;`.

However, in older browsers like IE8-9 that do not support Flexible Box Layout, these are not available. In order to center an element inside its parent, use `margin: 0 auto;`.

### Margin collapsing

Elements' top and bottom margins are sometimes collapsed into a single margin that is equal to the larger of the two margins. See Mastering margin collapsing for more information.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `margin-bottom`: `0`
* `margin-left`: `0`
* `margin-right`: `0`
* `margin-top`: `0`
 |
| Applies to | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | as each of the properties of the shorthand:* `margin-bottom`: the percentage as specified or the absolute length
* `margin-left`: the percentage as specified or the absolute length
* `margin-right`: the percentage as specified or the absolute length
* `margin-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

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

margin =
  <'margin-top'>{1,4}

```

Examples
--------

### Simple example

#### HTML

```html
<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>
```

#### CSS

```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### More examples

```css
margin: 5%; /\* All sides: 5% margin \*/

margin: 10px; /\* All sides: 10px margin \*/

margin: 1.6em 20px; /\* top and bottom: 1.6em margin \*/
/\* left and right: 20px margin \*/

margin: 10px 3% -1em; /\* top: 10px margin \*/
/\* left and right: 3% margin \*/
/\* bottom: -1em margin \*/

margin: 10px 3px 30px 5px; /\* top: 10px margin \*/
/\* right: 3px margin \*/
/\* bottom: 30px margin \*/
/\* left: 5px margin \*/

margin: 2em auto; /\* top and bottom: 2em margin \*/
/\* Box is horizontally centered \*/

margin: auto; /\* top and bottom: 0 margin \*/
/\* Box is horizontally centered \*/
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin |

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

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

See also
--------

* Introduction to the CSS basic box model
* Margin collapsing
* `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* The mapped logical properties: `margin-block-start`, `margin-block-end`, `margin-inline-start`, and `margin-inline-end` and the shorthands `margin-block` and `margin-inline`


overflow - CSS: Cascading Style Sheets

overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, 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 **`overflow`** CSS shorthand property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `overflow-x`
* `overflow-y`
Syntax
------

```css
/\* Keyword values \*/
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

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

The `overflow` property is specified as one or two `<overflow>` keyword values. If only one keyword is specified, both `overflow-x` and `overflow-y` are set to the same value. If two keywords are specified, the first value applies to `overflow-x` in the horizontal direction and the second one applies to `overflow-y` in the vertical direction.

### Values

`visible`

Overflow content is not clipped and may be visible outside the element's padding box. The element box is not a scroll container. This is the default value of the `overflow` property.

`hidden`

Overflow content is clipped at the element's padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content *can* be scrolled programmatically (for example, by setting the value of the `scrollLeft` property or the `scrollTo()` method), in which case the element box is a scroll container.

`clip`

Overflow content is clipped at the element's *overflow clip edge* that is defined using the `overflow-clip-margin` property. As a result, content overflows the element's padding box by the `<length>` value of `overflow-clip-margin` or by `0px` if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with `display: flow-root`. The element box is not a scroll container.

`scroll`

Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars. User agents display scroll bars in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes. Printers may still print overflowing content. The element box is a scroll container.

`auto`

Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike `scroll`, user agents display scroll bars *only if* the content is overflowing and hide scroll bars by default. If content fits inside the element's padding box, it looks the same as with `visible` but still establishes a new formatting context. The element box is a scroll container.

**Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space.

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

Overflow options include hiding overflowing content, enabling scroll bars to view overflow content or displaying the content flowing out of an element box into the surrounding area, and combinations there of.

The following nuances should be kept in mind while using the various keywords for `overflow`:

* Specifying a value other than `visible` (the default) or `clip` for `overflow` creates a new block formatting context. This is necessary for technical reasons; if a float intersects with a scrolling element, it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.
* For an `overflow` setting to create the desired effect, the block-level element must have either a set height (`height` or `max-height`) or `white-space` set to `nowrap`.
* Setting one axis to `visible` (the default) while setting the other to a *different* value results in `visible` behaving as `auto`.
* The JavaScript `Element.scrollTop` property may be used to scroll through content in a scroll container, including when `overflow` is set to `hidden`.
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `visible` |
| Applies to | Block-containers, flex containers, and grid containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `overflow-x`: as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
* `overflow-y`: as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
 |
| Animation type | discrete |

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

overflow =
  <'overflow-block'>{1,2}

```

Examples
--------

### Demonstrating results of various overflow keywords

#### HTML

```html
<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>
```

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}
```

```css
p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}
```

#### Result

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

A scrolling content area cannot be scrolled by a keyboard-only user, with the exception of users on Firefox (which makes the container keyboard focusable by default).

As a developer, to allow non-Firefox keyboard-only users to scroll the container, you will need to give it a `tabindex` using `tabindex="0"`. Unfortunately, when a screen reader encounters this tab-stop, they will have no context for what it is and their screen reader will likely announce the entirety of its contents. Giving it an appropriate WAI-ARIA role (`role="region"`, for example) and an accessible name (via `aria-label` or `aria-labelledby`) can mitigate this.

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

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

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

See also
--------

* `overflow-x`, `overflow-y`
* `overflow-block`, `overflow-clip-margin`, `overflow-inline`
* `clip`, `display`, `text-overflow`, `white-space`
* CSS overflow
* Keyboard-only scrolling areas on adrianroselli.com (2022)


background-color - CSS: Cascading Style Sheets

background-color
================

The **`background-color`** CSS property sets the background color of an element.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
background-color: red;
background-color: indigo;

/\* Hexadecimal value \*/
background-color: #bbff00; /\* Fully opaque \*/
background-color: #bf0; /\* Fully opaque shorthand \*/
background-color: #11ffee00; /\* Fully transparent \*/
background-color: #1fe0; /\* Fully transparent shorthand \*/
background-color: #11ffeeff; /\* Fully opaque \*/
background-color: #1fef; /\* Fully opaque shorthand \*/

/\* RGB value \*/
background-color: rgb(255 255 128); /\* Fully opaque \*/
background-color: rgb(117 190 218 / 50%); /\* 50% transparent \*/

/\* HSL value \*/
background-color: hsl(50 33% 25%); /\* Fully opaque \*/
background-color: hsl(50 33% 25% / 75%); /\* 75% opaque, i.e. 25% transparent \*/

/\* Special keyword values \*/
background-color: currentcolor;
background-color: transparent;

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

The `background-color` property is specified as a single `<color>` value.

### Values

`<color>`

The uniform color of the background. It is rendered behind any `background-image` that is specified, although the color will still be visible through any transparency in the image.

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

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `transparent` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | computed color |
| Animation type | a color |

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

background-color =
  <color>

```

Examples
--------

### HTML

```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS

```css
.exampleone {
  background-color: transparent;
}

.exampletwo {
  background-color: rgb(153 102 153);
  color: rgb(255 255 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### Result

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

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

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

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

See also
--------

* Multiple backgrounds
* The `<color>` data type
* Other color-related properties: `color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* Applying color to HTML elements using CSS


transform-origin - CSS: Cascading Style Sheets

transform-origin
================

The **`transform-origin`** CSS property sets the origin for an element's transformations.

Try it
------

The transform origin is the point around which a transformation is applied. For example, the transform origin of the `rotate()` function is the center of rotation.

In effect, this property wraps a pair of translations around the element's other transformations. The first translation moves the transform origin to the true origin at

(
0
,
0
)

. Then the other transformations are applied, and because the transform origin is at

(
0
,
0
)

, those transformations act about the transform origin. Finally, the opposite translation is applied, moving the transform origin back to its original location. Consequently, this definition

```css
transform-origin: -100% 50%;
transform: rotate(45deg);
```

results in the same transformation as

```css
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
```

Reading from right to left, `translate(100%, -50%)` is the translation to bring the transform origin to the true origin, `rotate(45deg)` is the original transformation, and `translate(-100%, 50%)` is the translation to restore the transform origin to its original location.

By default, the origin of a transform is `center`.

Syntax
------

```css
/\* One-value syntax \*/
transform-origin: 2px;
transform-origin: bottom;

/\* x-offset | y-offset \*/
transform-origin: 3cm 2px;

/\* x-offset-keyword | y-offset \*/
transform-origin: left 2px;

/\* x-offset-keyword | y-offset-keyword \*/
transform-origin: right top;

/\* y-offset-keyword | x-offset-keyword \*/
transform-origin: top right;

/\* x-offset | y-offset | z-offset \*/
transform-origin: 2px 30% 10px;

/\* x-offset-keyword | y-offset | z-offset \*/
transform-origin: left 5px -3px;

/\* x-offset-keyword | y-offset-keyword | z-offset \*/
transform-origin: right bottom 2cm;

/\* y-offset-keyword | x-offset-keyword | z-offset \*/
transform-origin: bottom right 2cm;

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

The `transform-origin` property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.

If a single `<length>` or `<percentage>` value is defined, it represents the horizontal offset.

If two or more values are defined and either no value is a keyword, or the only used keyword is `center`, then the first value represents the horizontal offset and the second represents the vertical offset.

* One-value syntax:
    + The value must be a `<length>`, a `<percentage>`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
* Two-value syntax:
    + One value must be a `<length>`, a `<percentage>`, or one of the keywords `left`, `center`, and `right`.
    + The other value must be a `<length>`, a `<percentage>`, or one of the keywords `top`, `center`, and `bottom`.
* Three-value syntax:
    + The first two values are the same as for the two-value syntax.
    + The third value must be a `<length>`. It always represents the Z offset.
### Values

*x-offset*

Is a `<length>` or a `<percentage>` describing how far from the left edge of the box the origin of the transform is set.

*offset-keyword*

Is one of the `left`, `right`, `top`, `bottom`, or `center` keyword describing the corresponding offset.

*y-offset*

Is a `<length>` or a `<percentage>` describing how far from the top edge of the box the origin of the transform is set.

*x-offset-keyword*

Is one of the `left`, `right`, or `center` keyword describing how far from the left edge of the box the origin of the transform is set.

*y-offset-keyword*

Is one of the `top`, `bottom`, or `center` keyword describing how far from the top edge of the box the origin of the transform is set.

*z-offset*

Is a `<length>` (and never a `<percentage>` which would make the statement invalid) describing how far from the user eye the z=0 origin is set.

The keywords are convenience shorthands and match the following `<percentage>` values:

| Keyword | Value |
| --- | --- |
| `left` | `0%` |
| `center` | `50%` |
| `right` | `100%` |
| `top` | `0%` |
| `bottom` | `100%` |

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

|  |  |
| --- | --- |
| Initial value | `50% 50% 0` |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | refer to the size of bounding box |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | simple list of length, percentage, or calc |

**Note:** The initial value of `transform-origin` is `0 0` for all SVG elements except for root `<svg>` elements and `<svg>` elements that are a direct child of a foreignObject, and whose `transform-origin` is `50% 50%`, like other CSS elements. See the SVG transform-origin attribute for more information.

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

transform-origin =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>?  |
  [ [ center | left | right ] && [ center | top | bottom ] ] <length>?

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

```

Examples
--------

### A demonstration of various transform values

This example shows the effect of choosing different `transform-origin` values for a variety of transformation functions.
```

<div class="container">
  <div class="example">
    <div class="box box1"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: none;
  </pre>

  <div class="example">
    <div class="box box2"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
  </pre>

  <div class="example">
    <div class="box box3"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box4"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 100% 100%;
  </pre>

  <div class="example">
    <div class="box box5"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: -1em -3em;
  </pre>

  <div class="example">
    <div class="box box6"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
  </pre>

  <div class="example">
    <div class="box box7"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box8"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box9"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: skewX(50deg);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box10"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: skewY(50deg);
transform-origin: 100% -30%;
  </pre>
</div>
```

```
.container {
  display: grid;
  grid-template-columns: 200px 100px;
  gap: 20px;
}

.example {
  position: relative;
  margin: 0 2em 4em 5em;
}

.box {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: solid 1px;
  background-color: palegreen;
}

.original {
  position: absolute;
  left: 0;
  opacity: 20%;
}

.box1 {
  transform: none;
}

.box2 {
  transform: rotate(30deg);
}

.box3 {
  transform: rotate(30deg);
  transform-origin: 0 0;
}

.box4 {
  transform: rotate(30deg);
  transform-origin: 100% 100%;
}

.box5 {
  transform: rotate(30deg);
  transform-origin: -1em -3em;
}

.box6 {
  transform: scale(1.7);
}

.box7 {
  transform: scale(1.7);
  transform-origin: 0 0;
}

.box8 {
  transform: scale(1.7);
  transform-origin: 100% -30%;
}

.box9 {
  transform: skewX(50deg);
  transform-origin: 100% -30%;
}

.box10 {
  transform: skewY(50deg);
  transform-origin: 100% -30%;
}
```

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-origin-property |

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

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

See also
--------

* Using CSS transforms
* https://css-tricks.com/almanac/properties/t/transform-origin/


position - CSS: Cascading Style Sheets

position
========

The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.

Try it
------

Syntax
------

```css
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

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

### Values

`static`

The element is positioned according to the normal flow of the document. The `top`, `right`, `bottom`, `left`, and `z-index` properties have *no effect*. This is the default value.

`relative`

The element is positioned according to the normal flow of the document, and then offset *relative to itself* based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were `static`.

This value creates a new stacking context when the value of `z-index` is not `auto`. Its effect on `table-*-group`, `table-row`, `table-column`, `table-cell`, and `table-caption` elements is undefined.

`absolute`

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of `top`, `right`, `bottom`, and `left`.

This value creates a new stacking context when the value of `z-index` is not `auto`. The margins of absolutely positioned boxes do not collapse with other margins.

`fixed`

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of `top`, `right`, `bottom`, and `left`.

This value always creates a new stacking context. In printed documents, the element is placed in the same position on *every page*.

`sticky`

The element is positioned according to the normal flow of the document, and then offset relative to its *nearest scrolling ancestor* and containing block (nearest block-level ancestor), including table-related elements, based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements.

This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when `overflow` is `hidden`, `scroll`, `auto`, or `overlay`), even if that ancestor isn't the nearest actually scrolling ancestor.

**Note:** At least one inset property (`top`, `inset-block-start`, `right`, `inset-inline-end`, etc.) needs to be set to a non-`auto` value for the axis on which the element needs to be made sticky. If both `inset` properties for an axis are set to `auto`, on that axis the `sticky` value will behave as `relative`.

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

### Types of positioning

* A **positioned element** is an element whose computed `position` value is either `relative`, `absolute`, `fixed`, or `sticky`. (In other words, it's anything except `static`.)
* A **relatively positioned element** is an element whose computed `position` value is `relative`. The `top` and `bottom` properties specify the vertical offset from its normal position; the `left` and `right` properties specify the horizontal offset.
* An **absolutely positioned element** is an element whose computed `position` value is `absolute` or `fixed`. The `top`, `right`, `bottom`, and `left` properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents.
* A **stickily positioned element** is an element whose computed `position` value is `sticky`. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting `top` to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

Most of the time, absolutely positioned elements that have `height` and `width` set to `auto` are sized so as to fit their contents. However, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both `top` and `bottom` and leaving `height` unspecified (that is, `auto`). They can likewise be made to fill the available horizontal space by specifying both `left` and `right` and leaving `width` as `auto`.

Except for the case just described (of absolutely positioned elements filling the available space):

* If both `top` and `bottom` are specified (technically, not `auto`), `top` wins.
* If both `left` and `right` are specified, `left` wins when `direction` is `ltr` (English, horizontal Japanese, etc.) and `right` wins when `direction` is `rtl` (Persian, Arabic, Hebrew, etc.).
Accessibility concerns
----------------------

Ensure that elements positioned with an `absolute` or `fixed` value do not obscure other content when the page is zoomed to increase text size.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0
### Performance & Accessibility

Scrolling elements containing `fixed` or `sticky` content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add `will-change: transform` to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.

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

|  |  |
| --- | --- |
| Initial value | `static` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
| Creates stacking context | yes |

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

position =
  static       |
  relative     |
  absolute     |
  sticky       |
  fixed        |
  <running()>

<running()> =
  running( <custom-ident> )

```

Examples
--------

### Relative positioning

Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.

#### HTML

```html
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
```

#### CSS

```css
\* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
```

### Absolute positioning

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its *nearest positioned ancestor* (i.e., the nearest ancestor that is not `static`). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the W3C definition), which is the containing block of the document's root element.

#### HTML

```html
<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

#### CSS

```css
\* {
  box-sizing: border-box;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

#### Result

### Fixed positioning

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the *viewport*, unless any ancestor has `transform`, `perspective`, or `filter` property set to something other than `none` (see CSS Transforms Spec), which then causes that ancestor to take the place of the elements containing block. This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport. Also, when the `will-change` property is set to `transform`, a new containing block is established.

#### HTML

```html
<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>
```

#### CSS

```css
\* {
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}
```

#### Result

### Sticky positioning

Sticky positioning can be thought of as a hybrid of relative and fixed positioning when its nearest scrolling ancestor is the viewport. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For example:

```css
#one {
  position: sticky;
  top: 10px;
}
```

The above CSS rule would position the element with id *one* relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.

A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.

You must specify a threshold with at least one of `top`, `right`, `bottom`, or `left` for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.

#### HTML

```html
<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>
```

#### CSS

```css
\* {
  box-sizing: border-box;
}

dl > div {
  background: #fff;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font:
    bold 18px/21px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font:
    bold 20px/45px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}
```

#### Result

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # position-property |

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

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

See also
--------

* Learn CSS: Positioning


backdrop-filter - CSS: Cascading Style Sheets

backdrop-filter
===============

The **`backdrop-filter`** CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything *behind* the element, to see the effect the element or its background needs to be transparent or partially transparent.

Try it
------

Syntax
------

```css
/\* Keyword value \*/
backdrop-filter: none;

/\* URL to SVG filter \*/
backdrop-filter: url(commonfilters.svg#filter);

/\* <filter-function> values \*/
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/\* Multiple filters \*/
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

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

### Values

`none`

No filter is applied to the backdrop.

`<filter-function-list>`

A space-separated list of `<filter-function>`s or an SVG filter that will be applied to the backdrop. CSS `<filter-function>`s include `blur()`, `brightness()`, `contrast()`, `drop-shadow()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, and `sepia()`.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| 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 | a filter function list |

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

backdrop-filter =
  none                 |
  <filter-value-list>

<filter-value-list> =
  [ <filter-function> | <url> ]+

<filter-function> =
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>

<url> =
  <url()>  |
  <src()>

<blur()> =
  blur( <length>? )

<brightness()> =
  brightness( [ <number> | <percentage> ]? )

<contrast()> =
  contrast( [ <number> | <percentage> ]? )

<drop-shadow()> =
  drop-shadow( [ <color>? && <length>{2,3} ] )

<grayscale()> =
  grayscale( [ <number> | <percentage> ]? )

<hue-rotate()> =
  hue-rotate( [ <angle> | <zero> ]? )

<invert()> =
  invert( [ <number> | <percentage> ]? )

<opacity()> =
  opacity( [ <number> | <percentage> ]? )

<sepia()> =
  sepia( [ <number> | <percentage> ]? )

<saturate()> =
  saturate( [ <number> | <percentage> ]? )

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### CSS

```css
.box {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
}

body {
  background-image: url("anemones.jpg");
}
```

```
html,
body {
  height: 100%;
  width: 100%;
}

.container {
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.box {
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}
```

### HTML

```html
<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>
```

### Result

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

| Specification |
| --- |
| Filter Effects Module Level 2 # BackdropFilterProperty |

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

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

See also
--------

* `filter`
* `<filter-function>`
* `background-blend-mode`, `mix-blend-mode`
* CSS filter effects
* CSS compositing and blending


background-position - CSS: Cascading Style Sheets

background-position
===================

The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/\* <percentage> values \*/
background-position: 25% 75%;

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

/\* Multiple images \*/
background-position:
  0 0,
  center;

/\* Edge offsets values \*/
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

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

The `background-position` property is specified as one or more `<position>` values, separated by commas.

### Values

`<position>`

A `<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. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be `center`. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s).

**1-value syntax:** The value may be:

* The keyword value `center`, which centers the image.
* One of the keyword values `top`, `left`, `bottom`, or `right`. This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.
* A `<length>` or `<percentage>`. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

**2-value syntax:** One value defines X and the other defines Y. Each value may be:

* One of the keyword values `top`, `left`, `bottom`, or `right`. If `left` or `right` is given, then this defines X and the other given value defines Y. If `top` or `bottom` is given, then this defines Y and the other value defines X.
* A `<length>` or `<percentage>`. If the other value is `left` or `right`, then this value defines Y, relative to the top edge. If the other value is `top` or `bottom`, then this value defines X, relative to the left edge. If both values are `<length>` or `<percentage>` values, then the first defines X and the second Y.
* Note that: If one value is `top` or `bottom`, then the other value may not be `top` or `bottom`. If one value is `left` or `right`, then the other value may not be `left` or `right`. This means, e.g., that `top top` and `left right` are not valid.
* Order: When pairing keywords, placement is not important as the browser can reorder it; the value `top left` or `left top` will yield the same result. With pairing `<length>` or `<percentage>` with a keyword, the placement is important, the value defining X should come first followed by Y, the value `right 20px` is not the same as `20px right` the former is valid but the latter is invalid. The value `left 20%` or `20% bottom` is valid as X and Y values are clearly defined and the placement is right.
* The default value is `left top` or `0% 0%`.

**3-value syntax:** Two values are keyword values, and the third is the offset for the preceding value:

* The first value is one of the keyword values `top`, `left`, `bottom`, `right`, or `center`. If `left` or `right` are given here, then this defines X. If `top` or `bottom` are given, then this defines Y and the other keyword value defines X.
* The `<length>` or `<percentage>` value, if it is the second value, is the offset for the first value. If it is the third value, it is the offset for the second value.
* The single length or percentage value is an offset for the keyword value that precedes it. The combination of one keyword with two `<length>` or `<percentage>` values is not valid.

**4-value syntax:** The first and third values are keyword values defining X and Y. The second and fourth values are offsets for the preceding X and Y keyword values:

* The first and third values are equal to one of the keyword values `top`, `left`, `bottom`, or `right`. If `left` or `right` is given for the first value, then this defines X and the other value defines Y. If `top` or `bottom` is given for the first value, then this defines Y and the other keyword value defines X.
* The second and fourth values are `<length>` or `<percentage>` values. The second value is the offset for the first keyword. The fourth value is the offset for the second keyword.

### Regarding Percentages

The percentage offset of the given background image's position is relative to the container. A value of 0% means that the left (or top) edge of the background image is aligned with the corresponding left (or top) edge of the container, or the 0% mark of the image will be on the 0% mark of the container. A value of 100% means that the *right* (or *bottom*) edge of the background image is aligned with the *right* (or *bottom*) edge of the container, or the 100% mark of the image will be on the 100% mark of the container. Thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container. Similarly, `background-position: 25% 75%` means the spot on the image that is 25% from the left and 75% from the top will be placed at the spot of the container that is 25% from the container's left and 75% from the container's top.

Essentially what happens is the background image dimension is *subtracted* from the corresponding container dimension, and then a percentage of the resulting value is used as the direct offset from the left (or top) edge.
```

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
```

Using the X axis for an example, let's say we have an image that is 300px wide and we are using it in a container that is 100px wide, with `background-size` set to auto:
```

100px - 300px = -200px (container & image difference)
```

So that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values:
```

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px
```

So with these resultant values for our example, the **left edge** of the **image** is offset from the **left edge** of the **container** by:

* + 50px (putting the left image edge in the center of the 100-pixel-wide container)
* 0px (left image edge coincident with the left container edge)
* -100px (left image edge 100px to the left of the container, in this example that means the middle 100px image area is centered in the container)
* -200px (left image edge 200px to the left of the container, in this example that means the right image edge is coincident with the right container edge)
* -250px (left image edge 250px to the left of the container, in this example that puts the right edge of the 300px-wide image in the center of the container)

It's worth mentioning that if your `background-size` is equal to the container size for a given axis, then a *percentage* position for that axis will have no effect because the "container-image difference" will be zero. You will need to offset using absolute values.

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

|  |  |
| --- | --- |
| Initial value | `0% 0%` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets |
| Computed value | as each of the properties of the shorthand:* `background-position-x`: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
* `background-position-y`: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
 |
| Animation type | a repeatable list |

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

background-position =
  <bg-position>#

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

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

```

Examples
--------

### Positioning background images

Each of these three examples uses the `background` property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.

#### HTML

```html
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
```

#### CSS

```css
/\* Shared among all <div>s \*/
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/\* These examples use the `background` shorthand property \*/
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/\* Multiple background images: Each image is matched with the
 corresponding position, from first specified to last. \*/
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}
```

#### Result

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

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

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

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

See also
--------

* `background-position-x`
* `background-position-y`
* Using multiple backgrounds
* `transform-origin`


clip - CSS: Cascading Style Sheets

clip
====

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Warning:** Where possible, authors are encouraged to use the newer `clip-path` property instead.

The **`clip`** CSS property defines a visible portion of an element. The `clip` property applies only to absolutely positioned elements — that is, elements with `position:absolute` or `position:fixed`.

Syntax
------

```css
/\* Keyword value \*/
clip: auto;

/\* <shape> values \*/
clip: rect(1px, 10em, 3rem, 2ch);

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

### Values

`<shape>`

A rectangular `<shape>` of the form `rect(<top>, <right>, <bottom>, <left>)`. The `<top>` and `<bottom>` values are offsets from the *inside top border edge* of the box, while `<right>` and `<left>` are offsets from the *inside left border edge* of the box — that is, the extent of the padding box.

The `<top>`, `<right>`, `<bottom>`, and `<left>` values may be either a `<length>` or `auto`. If any side's value is `auto`, the element is clipped to that side's *inside border edge*.

`auto`

The element does not clip (default). This is different from `rect(auto, auto, auto, auto)`, which clips to the element's inside border edges.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | absolutely positioned elements |
| Inherited | no |
| Computed value | `auto` if specified as `auto`, otherwise a rectangle with four values, each of which is `auto` if specified as `auto` or the computed length otherwise |
| Animation type | a rectangle |

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

clip =
  <rect()>  |
  auto

<rect()> =
  rect( <top> , <right> , <bottom> , <left> )

```

Examples
--------

### Clipping an image

```html
<p class="dotted-border">
  <img src="macarons.png" alt="Original graphic" />
  <img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
  <img
 id="bottom-right"
 src="macarons.png"
 alt="Graphic clipped to bottom right" />
</p>
```

```css
.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

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

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

See also
--------

* This property is deprecated. Use `clip-path` instead.
* Related CSS properties:
    + `text-overflow`
    + `white-space`
    + `overflow-x`
    + `overflow-y`
    + `overflow`
    + `display`
    + `position`


inherit - CSS: Cascading Style Sheets

inherit
=======

The **`inherit`** CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property `all`.

For inherited properties, this reinforces the default behavior, and is only needed to override another rule.

**Note:** Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.

Examples
--------

### Exclude selected elements from a rule

```css
/\* Make second-level headers green \*/
h2 {
  color: green;
}

/\* Leave those in the sidebar alone so they use their parent's color \*/
#sidebar h2 {
  color: inherit;
}
```

In this example, the `h2` elements inside the sidebar might be different colors. For example, consider one of them that would by the child of a `div` matched by the rule:

```css
div#current {
  color: blue;
}
```

Then, it would be blue.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # inherit |

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

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

See also
--------

* Inheritance
* Use the `initial` keyword to set a property to its initial value.
* Use the `revert` keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* Use the `revert-layer` keyword to reset a property to the value established in a previous cascade layer.
* Use the `unset` keyword to set a property to its inherited value if it inherits or to its initial value if not.
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


<display-internal> - CSS: Cascading Style Sheets

<display-internal>
==================

Some layout models such as `table` and `ruby` have a complex internal structure, with several different roles that their children and descendants can fill. This page defines those "internal" display values, which only have meaning within that particular layout mode.

Syntax
------

Valid `<display-internal>` values:

`table-row-group`

These elements behave like `<tbody>` HTML elements.

`table-header-group`

These elements behave like `<thead>` HTML elements.

`table-footer-group`

These elements behave like `<tfoot>` HTML elements.

`table-row`

These elements behave like `<tr>` HTML elements.

`table-cell`

These elements behave like `<td>` HTML elements.

`table-column-group`

These elements behave like `<colgroup>` HTML elements.

`table-column`

These elements behave like `<col>` HTML elements.

`table-caption`

These elements behave like `<caption>` HTML elements.

`ruby-base`
Experimental

These elements behave like `<rb>` HTML elements.

`ruby-text`
Experimental

These elements behave like `<rt>` HTML elements.

`ruby-base-container`
Experimental

These elements are generated as anonymous boxes.

`ruby-text-container`
Experimental

These elements behave like `<rtc>` HTML elements.

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

<display-internal> =
  table-row-group      |
  table-header-group   |
  table-footer-group   |
  table-row            |
  table-cell           |
  table-column-group   |
  table-column         |
  table-caption        |
  ruby-base            |
  ruby-text            |
  ruby-base-container  |
  ruby-text-container

```

Examples
--------

### CSS tables example

The following example demonstrates laying out a simple form using CSS table layout.

#### HTML

```html
<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age" />
  </div>
</main>
```

#### CSS

```css
main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}
```

#### Result

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

#### No specification found

No specification data found for `css.properties.display.table_values,css.properties.display.ruby_values`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

See also
--------

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-box>`
    + `<display-legacy>`