animation-timing-function - CSS: Cascading Style Sheets

animation-timing-function
=========================

The **`animation-timing-function`** CSS property sets how an animation progresses through the duration of each cycle.

Try it
------

It is often convenient to use the shorthand property `animation` to set all animation properties at once.

Syntax
------

```css
/\* Keyword values \*/
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/\* Function values \*/
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/\* Steps Function keywords \*/
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/\* Multiple animations \*/
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Global values \*/
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;
```

### Values

`<easing-function>`

The easing function that corresponds to a given animation, as determined by `animation-name`.

The non-step keyword values (ease, linear, ease-in-out, etc.) each represent cubic Bézier curve with fixed four point values, with the cubic-bezier() function value allowing for a non-predefined value. The step easing functions divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position.

`ease`

Equal to `cubic-bezier(0.25, 0.1, 0.25, 1.0)`, the default value, increases in velocity towards the middle of the animation, slowing back down at the end.

`linear`

Equal to `cubic-bezier(0.0, 0.0, 1.0, 1.0)`, animates at an even speed.

`ease-in`

Equal to `cubic-bezier(0.42, 0, 1.0, 1.0)`, starts off slowly, with the speed of the transition of the animating property increasing until complete.

`ease-out`

Equal to `cubic-bezier(0, 0, 0.58, 1.0)`, starts quickly, slowing down the animation continues.

`ease-in-out`

Equal to `cubic-bezier(0.42, 0, 0.58, 1.0)`, with the animating properties slowly transitioning, speeding up, and then slowing down again.

`cubic-bezier(p1, p2, p3, p4)`

An author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1.

`steps(n, <jumpterm>)`

Displays an animation iteration along *n* stops along the transition, displaying each stop for equal lengths of time. For example, if *n* is 5, there are 5 steps. Whether the animation holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the animation, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used:

`jump-start`

Denotes a left-continuous function, so that the first jump happens when the animation begins.

`jump-end`

Denotes a right-continuous function, so that the last jump happens when the animation ends. This is the default.

`jump-none`

There is no jump on either end, effectively removing a step during the interpolation iteration. Instead, it holds at both the 0% mark and the 100% mark, each for 1/n of the duration.

`jump-both`

Includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration.

`start`

Same as `jump-start`.

`end`

Same as `jump-end`.

`step-start`

Equal to `steps(1, jump-start)`

`step-end`

Equal to `steps(1, jump-end)`

**Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the `animation-name`s appear. For situations where the number of animations and `animation-*` property values do not match, see Setting multiple animation property values.

**Note:** `animation-timing-function` has the same effect when creating CSS scroll-driven animations as it does for regular time-based animations.

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

Easing functions may be specified on individual keyframes in a @keyframes rule. If no **`animation-timing-function`** is specified on a keyframe, the corresponding value of **`animation-timing-function`** from the element to which the animation is applied is used for that keyframe.

Within a keyframe, `animation-timing-function` is an at-rule-specific descriptor, not the property of the same name. The timing is not being animated. Rather, a keyframe's easing function is applied on a property-by-property basis from the keyframe on which it is specified until the next keyframe specifying that property, or until the end of the animation if there is no subsequent keyframe specifying that property. As a result, an **`animation-timing-function`** specified on the **`100%`** or **`to`** keyframe will never be used.

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

|  |  |
| --- | --- |
| Initial value | `ease` |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

animation-timing-function =
  <easing-function>#

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

Examples
--------

### Cubic-Bezier examples
```

<div class="parent">
  <div class="ease">ease</div>
  <div class="easein">ease-in</div>
  <div class="easeout">ease-out</div>
  <div class="easeinout">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>
```

```
.parent > div[class] {
  animation-name: changeme;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  margin-bottom: 4px;
}
@keyframes changeme {
  0% {
    min-width: 12em;
    width: 12em;
    background-color: black;
    border: 1px solid red;
    color: white;
  }
  100% {
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
  }
}
```

```css
.ease {
  animation-timing-function: ease;
}
.easein {
  animation-timing-function: ease-in;
}
.easeout {
  animation-timing-function: ease-out;
}
.easeinout {
  animation-timing-function: ease-in-out;
}
.linear {
  animation-timing-function: linear;
}
.cb {
  animation-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}
```

### Step examples
```

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="start">start</div>
  <div class="end">end</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
```

```
.parent > div[class] {
  animation-name: changeme;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  margin-bottom: 4px;
}
@keyframes changeme {
  0% {
    min-width: 12em;
    width: 12em;
    background-color: black;
    border: 1px solid red;
    color: white;
  }
  100% {
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
  }
}
```

```css
.jump-start {
  animation-timing-function: steps(5, jump-start);
}
.jump-end {
  animation-timing-function: steps(5, jump-end);
}
.jump-none {
  animation-timing-function: steps(5, jump-none);
}
.jump-both {
  animation-timing-function: steps(5, jump-both);
}
.start {
  animation-timing-function: steps(5, start);
}
.end {
  animation-timing-function: steps(5, end);
}
.step-start {
  animation-timing-function: step-start;
}
.step-end {
  animation-timing-function: step-end;
}
```

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-timing-function |

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

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

See also
--------

* Using CSS animations
* `<easing-function>`
* JavaScript `AnimationEvent` API
* cubic-bezier.com
* Other related animation properties: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`


transform-style - CSS: Cascading Style Sheets

transform-style
===============

The **`transform-style`** CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

Try it
------

If flattened, the element's children will not exist on their own in the 3D-space.

As this property is not inherited, it must be set for all non-leaf descendants of the element.

Syntax
------

```css
/\* Keyword values \*/
transform-style: flat;
transform-style: preserve-3d;

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

### Values

`flat`

Indicates that the children of the element are lying in the plane of the element itself.

`preserve-3d`

Indicates that the children of the element should be positioned in the 3D-space.

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

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

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

transform-style =
  flat         |
  preserve-3d

```

Examples
--------

### Transform style demonstration

In this example we have a 3D cube created using transforms. The parent container of the cube faces has `transform-style: preserve-3d` set on it by default, so it is transformed in the 3D space and you can see it as intended.

We also provide a checkbox allowing you to toggle between this, and `transform-style: flat`. In this alternative state, the cube faces are all flattened onto the plane of their parent, and you might not be able to see them at all, depending on the browser you are using.

#### HTML

```html
<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="checkbox">
  <label for="preserve"><code>preserve-3d</code></label>
  <input type="checkbox" id="preserve" checked />
</div>
```

#### CSS

```css
#example-element {
  margin: 50px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  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);
}
```

#### JavaScript

```js
const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");

checkbox.addEventListener("change", () => {
  cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});
```

#### Result

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

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

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

See also
--------

* Using CSS transforms


::cue - CSS: Cascading Style Sheets

::cue
=====

The **`::cue`** CSS pseudo-element matches WebVTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks.

Try it
------

The properties are applied to the entire set of cues as if they were a single unit. The only exception is that `background` and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.

Syntax
------

```css
::cue | ::cue(<selector>) {
  /\* ... \*/
}
```

Permitted properties
--------------------

Rules whose selectors include this element may only use the following CSS properties:

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `color`
* `font`
* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
* `opacity`
* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* `ruby-position`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-shadow`
* `visibility`
* `white-space`
Examples
--------

### Styling WebVTT cues as white-on-black

The following CSS sets the cue style so that the text is white and the background is a translucent black box.

```css
::cue {
  color: #fff;
  background-color: rgb(0 0 0 / 60%);
}
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |

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

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

See also
--------

* Web Video Tracks Format (WebVTT)
* `<track>`, `<video>`


padding-inline-end - CSS: Cascading Style Sheets

padding-inline-end
==================

The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Try it
------

Syntax
------

```css
/\* <length> values \*/
padding-inline-end: 10px; /\* An absolute length \*/
padding-inline-end: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-inline-end: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-inline-end: inherit;
padding-inline-end: initial;
padding-inline-end: revert;
padding-inline-end: revert-layer;
padding-inline-end: unset;
```

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

The size of the padding as a percentage, relative to the inline-size (*width* in a horizontal language) of the containing block. Must be nonnegative.

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

The `padding-inline-end` property is defined in the specification as taking the same values as the `padding-top` property. However, the physical property it maps to depends on the values set for `writing-mode`, `direction`, and `text-orientation`. Therefore, it could map to `padding-bottom`, `padding-right`, or `padding-left`.

It relates to `padding-block-start`, `padding-block-end`, and `padding-inline-start`, which define the other paddings of the element.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as `<length>` |
| Animation type | a length |

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

padding-inline-end =
  <'padding-top'>

```

Examples
--------

### Setting inline end padding for vertical text

#### 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;
  padding-inline-end: 20px;
  background-color: #c8c800;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`


font-size - CSS: Cascading Style Sheets

font-size
=========

The **`font-size`** CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative `<length>` units, such as `em`, `ex`, and so forth.

Try it
------

Syntax
------

```css
/\* <absolute-size> values \*/
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/\* <relative-size> values \*/
font-size: smaller;
font-size: larger;

/\* <length> values \*/
font-size: 12px;
font-size: 0.8em;

/\* <percentage> values \*/
font-size: 80%;

/\* math value \*/
font-size: math;

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

The `font-size` property is specified in one of the following ways:

* As one of the absolute-size, relative-size or `math` keywords
* As a `<length>` or a `<percentage>`, relative to the element's font size.
### Values

`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xxx-large`

Absolute-size keywords, based on the user's default font size (which is `medium`).

`larger`, `smaller`

Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.

`<length>`

A positive `<length>` value. For most font-relative units (such as `em` and `ex`), the font size is relative to the parent element's font size.

For font-relative units that are root-based (such as `rem`), the font size is relative to the size of the font used by the `<html>` (root) element.

`<percentage>`

A positive `<percentage>` value, relative to the parent element's font size.

**Note:** To maximize accessibility, it is generally best to use values that are relative to the user's default font size.

`math`

Scaling rules are applied when determining the computed value of the `font-size` property for math elements relative to the `font-size` of the containing parent.
 See the math-depth property for more information.

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

There are several ways to specify the font size, including keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs of the particular web page.

### Keywords

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the `<body>` element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

### Pixels

Setting the font size in pixel values (`px`) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to `16px` and its child element is set to `larger`, the child element displays larger than the parent element on the page.

**Note:** Defining font sizes in `px` is *not accessible*, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.

### Ems

Using an `em` value creates a dynamic or computed font size (historically the `em` unit was derived from the width of a capital "M" in a given typeface.). The numeric value acts as a multiplier of the `font-size` property of the element on which it is used. Consider this example:

```css
p {
  font-size: 2em;
}
```

In this case, the font size of `<p>` elements will be double the computed `font-size` inherited by `<p>` elements. By extension, a `font-size` of `1em` equals the computed `font-size` of the element on which it is used.

If a `font-size` has not been set on any of the `<p>`'s ancestors, then `1em` will equal the default browser `font-size`, which is usually `16px`. So, by default `1em` is equivalent to `16px`, and `2em` is equivalent to `32px`. If you were to set a `font-size` of 20px on the `<body>` element say, then `1em` on the `<p>` elements would instead be equivalent to `20px`, and `2em` would be equivalent to `40px`.

In order to calculate the `em` equivalent for any pixel value required, you can use this formula:
```

em = desired element pixel value / parent element font-size in pixels
```

For example, suppose the `font-size` of the `<body>` of the page is set to `16px`. If the font-size you want is `12px`, then you should specify `0.75em` (because 12/16 = 0.75). Similarly, if you want a font size of `10px`, then specify `0.625em` (10/16 = 0.625); for `22px`, specify `1.375em` (22/16).

The `em` is a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use.

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

```css
html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}
```

```html
<div>
  <span>Outer <span>inner</span> outer</span>
</div>
```

The result is:

Assuming that the browser's default `font-size` is 16px, the words "outer" would be rendered at 25.6px, but the word "inner" would be rendered at 40.96px. This is because the inner `<span>`'s `font-size` is 1.6em which is relative to its parent's `font-size`, which is in turn relative to its parent's `font-size`. This is often called **compounding**.

### Rems

`rem` values were invented in order to sidestep the compounding problem. `rem` values are relative to the root `html` element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to `rem`.

```css
html {
  font-size: 100%;
}
span {
  font-size: 1.6rem;
}
```

Then we apply this CSS to the same HTML, which looks like this:

```html
<span>Outer <span>inner</span> outer</span>
```

In this example, the words "outer inner outer" are all displayed at 25.6px (assuming that the browser's `font-size` has been left at the default value of 16px).

### Ex

Like the `em` unit, an element's `font-size` set using the `ex` unit is computed or dynamic. It behaves in exactly the same way, except that when setting the `font-size` property using `ex` units, the `font-size` equals the x-height of the first available font used on the page. The number value multiplies the element's inherited `font-size` and the `font-size` compounds relatively.

See the W3C Editor's Draft for a more detailed description of font-relative length units such as `ex`.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | refer to the parent element's font size |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

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

font-size =
  <absolute-size>            |
  <relative-size>            |
  <length-percentage [0,∞]>  |
  math

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

```

Examples
--------

### Setting font sizes

#### CSS

```css
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}
```

#### HTML

```html
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>
```

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-size-prop |

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

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

See also
--------

* `font-size-adjust`
* `font-style`
* `font-weight`
* `math-depth`
* `math-style`
* Fundamental text and font styling


<percentage> - CSS: Cascading Style Sheets

<percentage>
============

The **`<percentage>`** CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as `width`, `height`, `margin`, `padding`, and `font-size`.

**Note:** Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a `<length>` value) will be accessible on the inherited property, not the percentage value.

Syntax
------

The `<percentage>` data type consists of a `<number>` followed by the percentage sign (`%`). Optionally, it may be preceded by a single `+` or `-` sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.

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

When animated, values of the `<percentage>` data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the easing function associated with the animation.

Examples
--------

### Width and margin-left

```html
<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>
```

The above HTML will output:

### Font-size

```html
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>
```

The above HTML will output:

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

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

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

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

See also
--------

* `<length-percentage>`
* CSS Values and Units


grid-auto-columns - CSS: Cascading Style Sheets

grid-auto-columns
=================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`grid-auto-columns`** CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.

Try it
------

If a grid item is positioned into a column that is not explicitly sized by `grid-template-columns`, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns.

Syntax
------

```css
/\* Keyword values \*/
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/\* <length> values \*/
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/\* <percentage> values \*/
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/\* <flex> values \*/
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/\* minmax() values \*/
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/\* fit-content() values \*/
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/\* multiple track-size values \*/
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/\* Global values \*/
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: revert;
grid-auto-columns: revert-layer;
grid-auto-columns: unset;
```

### Values

`<length>`

Is a non-negative length.

`<percentage>`

Is a non-negative `<percentage>` value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like `auto`.

`<flex>`

Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, <flex>)`).

`max-content`

Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

`min-content`

Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

`minmax(min, max)`

Is a functional notation that defines a size range greater than or equal to *min* and less than or equal to *max*. If *max* is smaller than *min*, then *max* is ignored and the function is treated as *min*. As a maximum, a `<flex>` value sets the track's flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).

`fit-content( [ <length> | <percentage> ] )`

Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

`auto`

As a maximum represents the largest `max-content` size of the items in that track.

As a minimum represents the largest minimum size of items in that track (specified by the `min-width`/`min-height` of the items). This is often, though not always, the `min-content` size.

If used outside of `minmax()` notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.

**Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the `align-content` and `justify-content` properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | grid containers |
| Inherited | no |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | the percentage as specified or the absolute length |
| Animation type | by computed value type |

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

grid-auto-columns =
  <track-size>+

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

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

```

Examples
--------

### Setting grid column size

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

```css
#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}
```

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # auto-tracks |

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

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

See also
--------

* Related CSS properties: `grid-auto-rows`, `grid-auto-flow`, `grid`
* Grid Layout Guide: *Auto-placement in grid layout - sizing rows in the implicit grid*
* Video tutorial: *Introducing Grid auto-placement and order*


CSS grid layout - CSS: Cascading Style Sheets

CSS grid layout
===============

The **CSS grid layout** module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Basic example
-------------

The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgb(233 171 88 / 50%);
  padding: 1em;
  color: #d9480f;
}
```

### HTML

```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
```

Reference
---------

### Properties

* `display`
* `grid-template-columns`
* `grid-template-rows`
* `grid-template-areas`
* `grid-template`
* `grid-auto-columns`
* `grid-auto-rows`
* `grid-auto-flow`
* `grid`
* `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`
* `grid-row`
* `grid-column`
* `grid-area`
* `row-gap`
* `column-gap`
* `gap`
* `masonry-auto-flow`
Experimental
* `align-tracks`
Experimental
* `justify-tracks`
Experimental
### Functions

* `repeat()`
* `minmax()`
* `fit-content()`
### Data types

* `<flex>`
Guides
------

* Basic concepts of grid layout
* Relationship of grid layout with other layout methods
* Grid template areas
* Grid layout using line-based placement
* Grid layout using named grid lines
* Auto-placement in grid layout
* Box alignment in grid layout
* Grids, logical values, and writing modes
* Grid layout and accessibility
* Realizing common layouts using grids
* Subgrid
* Masonry layout
Experimental
Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |

See also
--------

* Glossary terms:
    + Grid
    + Grid lines
    + Grid tracks
    + Grid cell
    + Grid area
    + Gutters
    + Grid axis
    + Grid row
    + Grid column
* CSS flexible box layout module
* CSS display module
* Grid by Example - A collection of usage examples and video tutorials
* CSS Grid Reference - Codrops
* CSS Grid Inspector - Firefox DevTools
* CSS Grid Playground
* CSS Grid Garden - A game for learning CSS grid


:last-child - CSS: Cascading Style Sheets

:last-child
===========

The **`:last-child`** CSS pseudo-class represents the last element among a group of sibling elements.

Try it
------

Syntax
------

```css
:last-child {
  /\* ... \*/
}
```

Examples
--------

### Basic example

#### HTML

```html
<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>
```

#### CSS

```css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```

#### Result

### Styling a list

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```

#### CSS

```css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
```

#### Result

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

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

See also
--------

* `:-moz-last-node`
Non-standard
* `:last-of-type`
* `:first-child`
* `:nth-child`


::-webkit-meter-optimum-value - CSS: Cascading Style Sheets

::-webkit-meter-optimum-value
=============================

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

The **`::-webkit-meter-optimum-value`** CSS pseudo-element styles the `<meter>` element when its value is inside the low-high range, or when the value is equivalent to the optimum value.

Green is the default color.

Syntax
------

```css
::-webkit-meter-optimum-value {
  /\* ... \*/
}
```

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

Not part of any standard.

Examples
--------

This example will only work in browsers based on WebKit or Blink.

### HTML

```html
Normal:
<meter min="0" max="10" low="3" high="7" optimum="6" value="6">
  Score 6/10
</meter>
<br />
Styled:
<meter id="styled" min="0" max="10" low="3" high="7" optimum="6" value="6">
  Score 6/10
</meter>
```

### CSS

```css
body {
  font-family: monospace;
}

.safari meter {
  /\* Reset the default appearance for Safari only \*/
  /\* .safari class is added via JavaScript \*/
  -webkit-appearance: none;
}

#styled::-webkit-meter-optimum-value {
  background: linear-gradient(to bottom, #7f7, #090 45%, #090 55%, #7f7);
  height: 100%;
  box-sizing: border-box;
}
```

### JavaScript

```js
// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-\*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.

const is_safari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (is_safari) {
  document.body.classList.add("safari");
}
```

### Result

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

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

See also
--------

The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-suboptimum-value`


transform - CSS: Cascading Style Sheets

transform
=========

 The **`transform`** CSS property lets you rotate, scale, skew, or translate an element.
 It modifies the coordinate space of the CSS visual formatting model.

Try it
------

 If the property has a value different than `none`, a stacking context will be created.
 In that case, the element will act as a containing block for any `position: fixed;` or `position: absolute;` elements that it contains.

**Warning:** Only transformable elements can be `transform`ed.
 That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

Syntax
------

```css
/\* Keyword values \*/
transform: none;

/\* Function values \*/
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/\* Multiple function values \*/
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

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

The `transform` property may be specified as either the keyword value `none` or as one or more `<transform-function>` values.

### Values

`<transform-function>`

 One or more of the CSS transform functions to be applied.
 The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

`none`

Specifies that no transform should be applied.

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

 Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine.
 If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide.

Also, consider making use of the `prefers-reduced-motion` media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

Find out more:

* MDN Understanding WCAG, Guideline 2.3 explanations
* Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | refer to the size of bounding box |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

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

transform =
  none              |
  <transform-list>

<transform-list> =
  <transform-function>+

```

Examples
--------

### Translating and rotating an element

#### HTML

```html
<div>Transformed element</div>
```

#### CSS

```css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}
```

#### Result

### Transform order

The order of transform functions matters. In this example, two boxes are rotated and translated by the same values; only the transform function order is different.

#### HTML

```html
<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>
```

#### CSS
```

div {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 200px;
  top: 50px;
  font-size: 4rem;
  line-height: 200px;
  text-align: center;
}
.original {
  border: 1px dashed;
}
.original:before,
.original:after {
  content: "";
  position: absolute;
  top: 100px;
  width: 500px;
  left: -150px;
  height: 1px;
  border-top: 2px dotted;
}
.original:after {
  transform: rotate(135deg);
}
.one {
  background-color: #ccc;
}
.two {
  background-color: #d6bb72;
}
```

```css
.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}
```

#### Result

When an element is rotated before being translated, the translate direction is on the rotated axis. The axis as indicated with the dotted lines.

### More examples

Please see Using CSS transforms and `<transform-function>` for more examples.

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

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

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

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

See also
--------

* Using CSS transforms
* `<transform-function>` data type with all the transform functions explained.
* Individual CSS properties: `translate`, `rotate`, and `scale` (there is no `skew` property).
* Online tool to visualize CSS Transform functions: CSS Transform Playground


background-position-x - CSS: Cascading Style Sheets

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

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

Try it
------

The value of this property is overridden by any declaration of the `background` or `background-position` shorthand properties applied to the element after it.

Syntax
------

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

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

/\* <length> values \*/
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/\* Side-relative values \*/
background-position-x: right 3px;
background-position-x: left 25%;

/\* Multiple values \*/
background-position-x: 0px, center;

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

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

### Values

`left`

Aligns the left edge of the background image with the left edge of the background position layer.

`center`

Aligns the center of the background image with the center of the background position layer.

`right`

Aligns the right edge of the background image with the right edge of the background position layer.

`<length>`

The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).

`<percentage>`

The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the *right* edge of the background image is aligned with the *right* edge of the container, thus a value of 50% horizontally centers the background image.

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

|  |  |
| --- | --- |
| Initial value | `0%` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to width of background positioning area minus width of background image |
| Computed value | 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-x =
  [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

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

```

Examples
--------

### Basic example

The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.

#### HTML

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

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}
```

#### Result

### Side-relative values

The following example shows support for side-relative offset syntax, which allows the developer to offset the background from any edge.

#### HTML

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

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}
```

#### Result

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

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

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

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

See also
--------

* `background-position`
* `background-position-y`
* Using multiple backgrounds


background - CSS: Cascading Style Sheets

background
==========

The **`background`** shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the `background` shorthand property value declaration are set to their default values.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
Syntax
------

```css
/\* Using a <background-color> \*/
background: green;

/\* Using a <bg-image> and <repeat-style> \*/
background: url("test.jpg") repeat-y;

/\* Using a <box> and <background-color> \*/
background: border-box red;

/\* A single image, centered and scaled \*/
background: no-repeat center/80% url("../img/image.png");

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

The `background` property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

* Each layer may include zero or one occurrences of any of the following values:
    + `<attachment>`
    + `<bg-image>`
    + `<position>`
    + `<bg-size>`
    + `<repeat-style>`
* The `<bg-size>` value may only be included immediately after `<position>`, separated with the '/' character, like this: "`center/80%`".
* The `<box>` value may be included zero, one, or two times. If included once, it sets both `background-origin` and `background-clip`. If it is included twice, the first occurrence sets `background-origin`, and the second sets `background-clip`.
* The `<background-color>` value may only be included in the last layer specified.
### Values

`<attachment>`

See `background-attachment`. Default: `scroll`.

`<box>`

See `background-clip` and `background-origin`. Default: `border-box` and `padding-box` respectively.

`<background-color>`

See `background-color`. Default: `transparent`.

`<bg-image>`

See `background-image`. Default: `none`.

`<position>`

See `background-position`. Default: 0% 0%.

`<repeat-style>`

See `background-repeat`. Default: `repeat`.

`<bg-size>`

See `background-size`. Default: `auto`.

The following three lines of CSS are equivalent:

```css
background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;
```

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

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

* MDN Understanding WCAG, Guideline 1.1 explanations
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `background-image`: `none`
* `background-position`: `0% 0%`
* `background-size`: `auto auto`
* `background-repeat`: `repeat`
* `background-origin`: `padding-box`
* `background-clip`: `border-box`
* `background-attachment`: `scroll`
* `background-color`: `transparent`
 |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `background-position`: 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
* `background-size`: relative to the background positioning area
 |
| Computed value | as each of the properties of the shorthand:* `background-image`: as specified, but with `url()` values made absolute
* `background-position`: 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
* `background-size`: as specified, but with relative lengths converted into absolute lengths
* `background-repeat`: a list, each item consisting of two keywords, one per dimension
* `background-origin`: as specified
* `background-clip`: as specified
* `background-attachment`: as specified
* `background-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `background-color`: a color
* `background-image`: discrete
* `background-clip`: a repeatable list
* `background-position`: a repeatable list
* `background-size`: a repeatable list
* `background-repeat`: discrete
* `background-attachment`: discrete
 |

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

background =
  <bg-layer>#? , <final-bg-layer>

<bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>

<final-bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>                    ||
  <'background-color'>

<bg-image> =
  <image>  |
  none

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

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<attachment> =
  scroll  |
  fixed   |
  local

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

<image> =
  <url>       |
  <gradient>

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

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

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

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

```

Examples
--------

### Setting backgrounds with color keywords and images

#### HTML

```html
<p class="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>
```

#### CSS

```css
.warning {
  background: pink;
}

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}
```

#### Result

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

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

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

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

See also
--------

* `box-decoration-break`
* Using gradients
* Using multiple backgrounds


mask-border-repeat - CSS: Cascading Style Sheets

mask-border-repeat
==================

The **`mask-border-repeat`** CSS property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border.

Syntax
------

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

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

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

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

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

`stretch`

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

`repeat`

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

`round`

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

`space`

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

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

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

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

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

```

Examples
--------

### Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define how the border mask slice will repeat around the border — i.e. will it just repeat, or be scaled slightly so a whole number of slices fits, or be stretched so one slice fits?

```css
mask-border-repeat: round;
```

Chromium-based browsers support an outdated version of this property — `mask-box-image-repeat` — with a prefix:

```css
-webkit-mask-box-image-repeat: round;
```

**Note:** The `mask-border` page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

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

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

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

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

See also
--------

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


initial-letter-align - CSS: Cascading Style Sheets

initial-letter-align
====================

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

The **`initial-letter-align`** CSS property specifies the alignment of initial letters within a paragraph.

Syntax
------

```css
/\* Keyword values \*/
initial-letter-align: auto;
initial-letter-align: alphabetic;
initial-letter-align: hanging;
initial-letter-align: ideographic;

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

One of the keyword values listed below.

### Values

`auto`

The user agent selects the value which corresponds to the language of the text. Western languages would default to alphabetic, CJK languages to ideographic, and some Indic languages to hanging.

`alphabetic`

As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline.

`hanging`

The hanging baseline of the initial letter aligns with the hanging baseline of the first line of text.

`ideographic`

The initial letter is centered in the N-line area.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | `::first-letter` pseudo-elements and inline-level first child of a block container |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

initial-letter-align =
  [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!

```

Examples
--------

### Aligning initial letter

#### HTML

```html
<p class="auto ">Initial letter - auto</p>
<p class="alphabetic">Initial letter - alphabetic</p>
<p class="hanging">Initial letter - hanging</p>
<p class="ideographic">Initial letter - ideographic</p>
```

#### CSS

```css
.auto::first-letter {
  -webkit-initial-letter-align: auto;
  initial-letter-align: auto;
}

.alphabetic::first-letter {
  -webkit-initial-letter-align: alphabetic;
  initial-letter-align: alphabetic;
}

.hanging::first-letter {
  -webkit-initial-letter-align: hanging;
  initial-letter-align: hanging;
}

.ideographic::first-letter {
  -webkit-initial-letter-align: ideographic;
  initial-letter-align: ideographic;
}
```

#### Result

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

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # aligning-initial-letter |

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

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

See also
--------

* `initial-letter`
* Drop caps in CSS


Inheritance - CSS: Cascading Style Sheets

Inheritance
===========

In CSS, **inheritance** controls what happens when no value is specified for a property on an element.

CSS properties can be categorized in two types:

* **inherited properties**, which by default are set to the computed value of the parent element
* **non-inherited properties**, which by default are set to initial value of the property

Refer to any CSS property definition to see whether a specific property inherits by default ("Inherited: yes") or not ("Inherited: no").

Inherited properties
--------------------

When no value for an **inherited property** has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property's summary.

A typical example of an inherited property is the `color` property. Consider the following style rules and the markup:

```css
p {
  color: green;
}
```

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

The words "emphasized text" will appear green, since the `em` element has inherited the value of the `color` property from the `p` element. It does *not* get the initial value of the property (which is the color that is used for the root element when the page specifies no color).

Non-inherited properties
------------------------

When no value for a **non-inherited property** has been specified on an element, the element gets the initial value of that property (as specified in the property's summary).

A typical example of a non-inherited property is the `border` property. Consider the following style rules and the markup:

```css
p {
  border: medium solid;
}
```

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

The words "emphasized text" will not have another border (since the initial value of `border-style` is `none`).

Notes
-----

The `inherit` keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties.

You can control inheritance for all properties at once using the `all` shorthand property, which applies its value to all properties. For example:

```css
p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}
```

This reverts the style of the paragraphs' `font` property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a `font-weight` of `"bold"`.

### Overriding inheritance, an example

Using our previous example with `border`, if we explicitly set the inheritance with `inherit`, we get the following:

```css
p {
  border: medium solid;
}

em {
  border: inherit;
}
```

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

We can see here another border around the word "emphasized text".

See also
--------

* CSS values for controlling inheritance: `inherit`, `initial`, `revert`, `revert-layer`, and `unset`
* Introducing the CSS cascade
* Cascade, specificity, and inheritance
* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + 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


opacity - CSS: Cascading Style Sheets

opacity
=======

The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

Try it
------

Syntax
------

```css
opacity: 0.9;
opacity: 90%;

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

### Values

`<alpha-value>`

A `<number>` in the range `0.0` to `1.0`, inclusive, or a `<percentage>` in the range `0%` to `100%`, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.

| Value | Meaning |
| --- | --- |
| `0` | The element is fully transparent (that is, invisible). |
| Any `<number>` strictly between `0` and `1` | The element is translucent (that is, content behind the element can be seen). |
| `1` (default value) | The element is fully opaque (visually solid). |

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

`opacity` applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

To change the opacity of a background only, use the `background` property with a `color value` that allows for an alpha channel. For example:

```css
background: rgb(0 0 0 / 40%);
```

When `opacity` value is set to `0`, the element and all of its children appear invisible, but they are still part of the DOM. That means they still register pointer events and, if the elements are in a tabbing order, they do get focus. For good usability, make sure to make such elements visible when they receive user interactions or use the CSS `pointer-events` property to disable pointer events and take the element out of the tab order by disabling with the `disabled` attribute or setting `tab-index="-1"` for non-form-related interactive elements.

Using `opacity` with a value other than `1` places the element in a new stacking context.

Opacity alone should not be used to provide information to screen readers. Use the HTML `hidden` attribute, CSS `visibility`, or CSS `display` style properties. It's best to avoid using `aria-hidden` attribute, but if the element is hidden with opacity, then hide it from screen readers as well.

### Transitioning opacity

When transitioning the opacity of elements as you add them to the page when content was formerly hidden with `visibility: hidden`, `display: none`, or `content-visibility: hidden`, you need to include both a `@starting-style` and `transition-behaviour: allow-discrete`:

```css
.card {
  transition:
    opacity 5s,
    display 5s;
  background-color: orange;

  transition-behavior: allow-discrete;
  @starting-style {
    opacity: 0;
  }
}

.card.hidden {
  display: none;
  opacity: 0;
}
```

To enable first-style transitions, `@starting-style` rules are needed. In the above code, setting `opacity: 0` in `@starting-style` provides a starting point for the transition when the element receives its initial style update. For more details, see `@starting-style`.

Setting `transition-behavior: allow-discrete` is required to transition to `display: none`. See the `transition-behavior` property for more details.

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

If text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over 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 luminosity of the opacity-adjusted 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

Various operating systems provide a preference for reducing transparency. To set the `opacity` based on the user's operating systems transparency preferences, use the `prefers-reduced-transparency` media query.

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

|  |  |
| --- | --- |
| Initial value | `1` |
| Applies to | all elements |
| Inherited | no |
| Percentages | map to the range `[0,1]` |
| Computed value | The same as the specified value after clipping the `<number>` to the range [0.0, 1.0]. |
| Animation type | by computed value type |

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

opacity =
  <alpha-value>

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

```

Examples
--------

### Setting opacity

The following example demonstrates how the `opacity` property changes the opacity of the entire element and content, thus making the text very hard to read.

#### HTML

```html
<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>
```

#### CSS

```css
div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /\* Barely see the text over the background \*/
}
.medium {
  opacity: 0.5; /\* See the text more clearly over the background \*/
}
.heavy {
  opacity: 0.9; /\* See the text very clearly over the background \*/
}
```

#### Result

### Setting opacity on hover

In the following example opacity is changed on hover, so the striped background image on the parent element shows through the image.

#### HTML

```html
<div class="wrapper">
  <img
 src="//interactive-examples.mdn.mozilla.net/media/dino.svg"
 alt="MDN Dino"
 width="128"
 height="146"
 class="opacity" />
</div>
```

#### CSS

```css
img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgb(255 255 255 / 50%) 50%
  );
  background-size: 20px 20px;
}
```

#### Result

### Styling based on user preferences

To style elements based on user's operating systems transparency preferences, use the `prefers-reduced-transparency` media query. The following example demonstrates how to use the `prefers-color-scheme` media query to specify the desired `opacity` based on the user's preferences.

```css
.element {
  opacity: 0.5;
}

@media (prefers-reduced-transparency) {
  .element {
    opacity: 1;
  }
}
```

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

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

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

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

See also
--------

* `prefers-reduced-transparency` media query
* CSS color module


-webkit-overflow-scrolling - CSS: Cascading Style Sheets

-webkit-overflow-scrolling
==========================

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

The `-webkit-overflow-scrolling` CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

Syntax
------

```css
/\* Keyword values \*/
-webkit-overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;

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

### Values

`auto`

Use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.

`touch`

Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scrolling boxes |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

-webkit-overflow-scrolling =
  auto | touch
```

Examples
--------

### HTML

```html
<div class="scroll-touch">
  <p>This paragraph has momentum scrolling</p>
</div>
<div class="scroll-auto">
  <p>This paragraph does not.</p>
</div>
```

### CSS

```css
div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /\* Lets it scroll lazy \*/
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /\* Stops scrolling immediately \*/
}
```

### Results

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

Not part of any standard. Apple has a description in the Safari CSS Reference.

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

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

See also
--------

* CSS-Tricks article with demo
* Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers
* Safari 13 Release notes: Indicates the addition of support for one-finger accelerated scrolling to all frames and `overflow:scroll` elements, eliminating the need to set `-webkit-overflow-scrolling: touch`.


round() - CSS: Cascading Style Sheets

round()
=======

The **`round()`** CSS function returns a rounded number based on a selected rounding strategy.

Authors should use a custom CSS property (e.g., `--my-property`) for the rounding value, interval, or both; using the `round()` function is redundant if these have known values.

Syntax
------

```css
width: round(var(--width), 50px);
width: round(up, 101px, var(--interval));
width: round(down, var(--height), var(--interval));
margin: round(to-zero, -105px, 10px);
```

### Parameter

 The `round(<rounding-strategy>, valueToRound, roundingInterval)` function specifies an optional rounding strategy, a value (or mathematical expression) to be rounded and a rounding interval (or mathematical expression).
 The `valueToRound` is rounded according to the rounding strategy, to the nearest integer multiple of `roundingInterval`.

`<rounding-strategy>`

 The rounding strategy.
 This may be one of the following values:

`up`

Round `valueToRound` up to the nearest integer multiple of `roundingInterval` (if the value is negative, it will become "more positive"). This is equivalent to the JavaScript `Math.ceil()` method.

`down`

Round `valueToRound` down to the nearest integer multiple of `roundingInterval` (if the value is negative, it will become "more negative"). This is equivalent to the JavaScript `Math.floor()` method.

`nearest` (default)

 Round `valueToRound` to the nearest integer multiple of `roundingInterval`, which may be either above or below the value.
 If the `valueToRound` is half way between the rounding targets above and below (neither is "nearest"), it will be rounded up.
 Equivalent to JavaScript `Math.round()`.

`to-zero`

Round `valueToRound` to the nearest integer multiple of `roundingInterval` closer to/towards zero (a positive number will decrease, while a negative value will become "less negative"). This is equivalent to the JavaScript `Math.trunc()` method.

`valueToRound`

 The value to be rounded.
 This must be a `<number>`, `<dimension>`, or `<percentage>`, or a mathematical expression that resolves to one of those values.

`roundingInterval`

 The rounding interval.
 This is a `<number>`, `<dimension>`, or `<percentage>`, or a mathematical expression that resolves to one of those values.

### Return value

The value of `valueToRound`, rounded to the nearest lower or higher integer multiple of `roundingInterval`, depending on the `rounding strategy`.

* If `roundingInterval` is 0, the result is `NaN`.
* If `valueToRound` and `roundingInterval` are both `infinite`, the result is `NaN`.
* If `valueToRound` is infinite but `roundingInterval` is finite, the result is the same `infinity`.
* If `valueToRound` is finite but `roundingInterval` is infinite, the result depends on the rounding strategy and the sign of `A`:
    + `up` - If `valueToRound` is positive (not zero), return `+∞`. If `valueToRound` is `0⁺`, return `0⁺`. Otherwise, return `0⁻`.
    + `down` - If `valueToRound` is negative (not zero), return `−∞`. If `valueToRound` is `0⁻`, return `0⁻`. Otherwise, return `0⁺`.
    + `nearest`, `to-zero` - If `valueToRound` is positive or `0⁺`, return `0⁺`. Otherwise, return `0⁻`.
* The argument calculations can resolve to `<number>`, `<dimension>`, or `<percentage>`, but must have the same type, or else the function is invalid; the result will have the same type as the arguments.
* If `valueToRound` is exactly equal to an integer multiple of `roundingInterval`, `round()` resolves to `valueToRound` exactly (preserving whether `valueToRound` is `0⁻` or `0⁺`, if relevant). Otherwise, there are two integer multiples of `roundingInterval` that are potentially "closest" to `valueToRound`, lower `roundingInterval` which is closer to `−∞` and upper `roundingInterval` which is closer to `+∞`.
### Formal syntax
```

<round()> =
  round( <rounding-strategy>? , <calc-sum> , <calc-sum> )

<rounding-strategy> =
  nearest  |
  up       |
  down     |
  to-zero

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

Examples
--------

### Round positive values

This example demonstrates how the `round()` function's rounding strategies work for positive values.

 Of the five boxes below, the `round()` function is used to set the height of the last four.
 The value to be rounded is between 100 px and 125 px in each case, and the rounding value is 25px in all cases.
 The height of the boxes is therefore either rounded up to 125 px or down to 100 px.

#### HTML

 The HTML defines 5 `div` elements that will be rendered as boxes by the CSS.
 The elements contain text indicating the rounding strategy, initial value, and expected final height of the box (in parentheses).

```html
<div class="box box-1">height: 100px</div>
<div class="box box-2">up 101px (125px)</div>
<div class="box box-3">down 122px (100px)</div>
<div class="box box-4">to-zero 120px (100px)</div>
<div class="box box-5">nearest 117px (125px)</div>
```

#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```

 The CSS that is applied to all boxes is shown below.
 Note that we apply a custom CSS property named `--rounding-interval`, that we will use for the rounding interval.

```css
div.box {
  width: 100px;
  height: 100px;
  background: lightblue;
  padding: 5px;
  --rounding-interval: 25px;
}
```

 The first `div` from the left isn't targeted with specific CSS rules, so it will have a default height of 100px.
 The CSS for `div` two, three, and four is shown below, which round, up, down, and to-zero, respectively.

```css
div.box-2 {
  height: round(up, 101px, var(--rounding-interval));
}
div.box-3 {
  height: round(down, 122px, var(--rounding-interval));
}
div.box-4 {
  height: round(to-zero, 120px, var(--rounding-interval));
}
```

Notice how above we indicate the rounding interval using `var()` and the custom CSS property `--rounding-interval`.

 The last box is set without specifying a rounding strategy, and hence defaults to `nearest`.
 In this case, the nearest interval to 117 px is 125px, so it will round up.
 Just for contrast, here we specified hard coded values for both the rounding value and interval.
 While this is allowed, you wouldn't do this normally because there is no point rounding a number when you already know what the result must be.

```css
div.box-5 {
  height: round(117px, 25px);
}
```

#### Result

If the browser supports the CSS `round()` function, you should see five columns with heights that are rounded as indicated by their contained text.

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # funcdef-round |

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

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

See also
--------

* `mod()`
* `rem()`


counter-reset - CSS: Cascading Style Sheets

counter-reset
=============

The **`counter-reset`** CSS property creates named CSS counters and initializes them to a specific value. It supports creating counters that count up from one to the number of elements, as well as those that count down from the number of elements to one.

Try it
------

Syntax
------

```css
/\* Create a counter with initial default value 0 \*/
counter-reset: my-counter;

/\* Create a counter and initialize as "-3" \*/
counter-reset: my-counter -3;

/\* Create a reversed counter with initial default value \*/
counter-reset: reversed(my-counter);

/\* Create a reversed counter and initialize as "-1" \*/
counter-reset: reversed(my-counter) -1;

/\* Create reversed and regular counters at the same time \*/
counter-reset: reversed(pages) 10 items 1 reversed(sections) 4;

/\* Remove all counter-reset declarations in less specific rules \*/
counter-reset: none;

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

### Values

The `counter-reset` property accepts a list of one or more space-separated counter names or the keyword `none`. For counter names, regular counters use the format `<counter-name>`, and reversed counters use `reversed(<counter-name>)`, where `<counter-name>` is a `<custom-ident>` or `list-item` for the built-in `<ol>` counter. Optionally, each counter name can be followed by an `<integer>` to set its initial value.

`<custom-ident>`

Specifies the counter name to create and initialize using the `<custom-ident>` format.

`<integer>`

 The value to reset the counter to on each occurrence of the element.
 Defaults to `0` if not specified.

`none`

 Specifies that no counter initialization should occur.
 This value is useful for overriding `counter-reset` values in less specific rules.

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

The `counter-reset` property can create both regular and, in browsers that support it, reversed counters. You can create multiple regular and reversed counters, each separated by a space. Counters can be a standalone name or a space-separated name-value pair.

After creating a counter using `counter-reset`, you can adjust its value by using the `counter-set` property. This is counterintuitive because, despite its name, the `counter-reset` property is used for creating and initializing counters, while the `counter-set` property is used for resetting the value of an existing counter.

Setting `counter-increment: none` on a selector with greater specificity overrides the creation of the named counter set on selectors with lower specificity.

### Default initial values

The default initial values of both regular and reversed counters make it easy to implement the two most common numbering patterns: counting up from one to the number of elements and counting down from the number of elements to one, respectively. By including a counter value for a named counter, your counter can count up or down, starting at an integer value.

Regular counters default to `0` if no reset value is provided. By default, regular counters increment by one, which can be adjusted with the `counter-increment` property.

```css
h1 {
  /\* Create the counters "chapter" and "page" and set to initial default value.
 Create the counter "section" and set to "4". \*/
  counter-reset: chapter section 4 page;
}
```

### Reversed counters

When creating reversed counters without a value, the counter will start with the value equal to the number of elements in the set, counting down so the last element in the set is `1`. By default, reverse counters decrement by one; this can also be changed with the `counter-increment` property.

```css
h1 {
  /\* Create reversed counters "chapter" and "section".
 Set "chapter" as the number of elements and "section" as "10".
 Create the counter "pages" with the initial default value. \*/
  counter-reset: reversed(chapter) reversed(section) 10 pages;
}
```

### Built-in `list-item` counter

Ordered lists (`<ol>`) come with built-in `list-item` counters that control their numbering. These counters automatically increase or decrease by one with each list item. The `counter-reset` property can be used to reset the `list-item` counters. Like with other counters, you can override the default increment value for `list-item` counters by using the `counter-increment` property.

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

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

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

counter-reset =
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |
  none

<reversed-counter-name> =
  reversed( <counter-name> )

```

Examples
--------

### Overriding the `list-item` counter

In this example, the `counter-reset` property is used to set a starting value for an implicit `list-item` counter.

#### HTML

```html
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ol>
```

#### CSS

Using `counter-reset`, we set the implicit `list-item` counter to start at a value other than the default `1`:

```css
ol {
  counter-reset: list-item 3;
}
```

#### Result

Using `counter-reset`, we were able to set the implicit `list-item` counter to start counting at `3`, similar to the effect of writing `<ol start="3">` in HTML.

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-reset |

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

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

See also
--------

* Using CSS Counters guide
* `counter-increment` property
* `counter-set` property
* `@counter-style` at-rule
* `counter()` and `counters()` functions
* `content` property
* `::marker` pseudo-class
* CSS lists and counters module
* CSS counter styles module


inset-inline-end - CSS: Cascading Style Sheets

inset-inline-end
================

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

Try it
------

Syntax
------

```css
/\* <length> values \*/
inset-inline-end: 3px;
inset-inline-end: 2.4em;

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

/\* Keyword value \*/
inset-inline-end: auto;

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

The shorthand for `inset-inline-start` and `inset-inline-end` is `inset-inline`.

### Values

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

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

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

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

inset-inline-end =
  auto                 |
  <length-percentage>

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

```

Examples
--------

### Setting inline end offset

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

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

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

See also
--------

* The properties which defines other insets: `inset-block-start`, `inset-block-end`, and `inset-inline-start`
* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* `writing-mode`, `direction`, `text-orientation`


scroll-padding-block-end - CSS: Cascading Style Sheets

scroll-padding-block-end
========================

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

Try it
------

Syntax
------

```css
/\* Keyword values \*/
scroll-padding-block-end: auto;

/\* <length> values \*/
scroll-padding-block-end: 10px;
scroll-padding-block-end: 1em;
scroll-padding-block-end: 10%;

/\* Global values \*/
scroll-padding-block-end: inherit;
scroll-padding-block-end: initial;
scroll-padding-block-end: revert;
scroll-padding-block-end: revert-layer;
scroll-padding-block-end: unset;
```

### Values

`<length-percentage>`

An inwards offset from the block end edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-padding-block-end =
  auto                       |
  <length-percentage [0,∞]>

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

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

See also
--------

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


mask-image - CSS: Cascading Style Sheets

mask-image
==========

 The **`mask-image`** CSS property sets the image that is used as mask layer for an element.
 By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the `mask-mode` property.

Syntax
------

```css
/\* Keyword value \*/
mask-image: none;

/\* <mask-source> value \*/
mask-image: url(masks.svg#mask1);

/\* <image> values \*/
mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
mask-image: image(url(mask.png), skyblue);

/\* Multiple values \*/
mask-image: image(url(mask.png), skyblue), linear-gradient(rgb(0 0 0 / 100%), transparent);

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

### Values

`none`

This keyword is interpreted as an opaque white image layer.

`<mask-source>`

A `url()` reference to a `<mask>` or to a CSS image.

`<image>`

An image value used as mask image layer.

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, but with `url()` values made absolute |
| Animation type | discrete |

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

mask-image =
  <mask-reference>#

<mask-reference> =
  none           |
  <image>        |
  <mask-source>

<image> =
  <url>       |
  <gradient>

<mask-source> =
  <url>

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

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

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

```

Examples
--------

### Setting a mask image with a URL

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-image |

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

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

See also
--------

* Clipping and Masking in CSS
* Apply effects to images with CSS's mask-image property


:default - CSS: Cascading Style Sheets

:default
========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`:default`** CSS pseudo-class selects form elements that are the default in a group of related elements.

Try it
------

What this selector matches is defined in HTML Standard §4.16.3 Pseudo-classes — it may match the `<button>`, `<input type="checkbox">`, `<input type="radio">`, and `<option>` elements:

* A default option element is the first one with the `selected` attribute, or the first enabled option in DOM order. `multiple` `<select>`s can have more than one `selected` option, so all will match `:default`.
* `<input type="checkbox">` and `<input type="radio">` match if they have the `checked` attribute.
* `<button>` matches if it is a `<form>`'s default submission button: the first `<button>` in DOM order that belongs to the form. This also applies to `<input>` types that submit forms, like `image` or `submit`.
Syntax
------

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

Examples
--------

### HTML

```html
<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring" value="spring" />
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" value="summer" checked />
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall" value="fall" />
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter" value="winter" />
  <label for="winter">Winter</label>
</fieldset>
```

### CSS

```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-default |
| Selectors Level 4 # default-pseudo |

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

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

See also
--------

* Web forms — Working with user data
* Styling web forms
* Related HTML elements: `<button>`, `<input type="checkbox">`, `<input type="radio">`, and `<option>`