animation-timeline - CSS: Cascading Style Sheets

animation-timeline
==================

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

The **`animation-timeline`** CSS property specifies the timeline that is used to control the progress of a CSS animation.

The following types of timelines can be set via `animation-timeline`:

* The default document timeline, which is progressed through by the passing of time since the document was first loaded in the browser. This is the timeline traditionally associated with CSS animations and is selected with a value of `auto`, or by not specifying an `animation-timeline` value at all.
* A *scroll progress timeline*, which is progressed through by scrolling a scrollable element (*scroller*) between top and bottom (or left and right). The position in the scroll range is converted into a percentage of progress — 0% at the start and 100% at the end. The element that provides the scroll progress timeline can be specified in two ways:
    + A *named scroll progress timeline* is one where the scroller providing the scroll progress timeline is explicitly named using the `scroll-timeline-name` property (or the `scroll-timeline` shorthand property). The name is then linked to the element to animate by specifying it as the value of that element's `animation-timeline` property.
    + An *anonymous scroll progress timeline* is one where the element to animate is given a `scroll()` function as an `animation-timeline` value, which selects the scroller providing the scroll progress timeline and the scroll axis to be used based on the arguments you pass to it.
* A *view progress timeline*, which is progressed through based on the change in visibility of an element (known as the *subject*) inside a scroller. The visibility of the subject inside the scroller is tracked — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller, and 100% when it reaches the opposite edge. Unlike with scroll progress timelines, you can't specify the scroller — the subject's visibility is always tracked within its nearest ancestor scroller. The subject that provides the view progress timeline can be specified in two ways:
    + A *named view progress timeline* is one where the subject is explicitly named using the `view-timeline-name` property (or the `view-timeline` shorthand property). The name is then linked to the element to animate by specifying it as the value of that element's `animation-timeline` property. This is a key point — with named view progress timelines, the element to animate does not have to be the same as the subject.
    + An *anonymous view progress timeline* is one where the subject is given a `view()` function as an `animation-timeline` value, causing it to be animated based on its position inside its nearest parent scroller.

**Note:** `animation-timeline` is included in the `animation` shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-timeline` value to `auto`, but a specific value cannot be set via `animation`. When creating CSS scroll-driven animations, you need to declare `animation-timeline` after declaring any `animation` shorthand for it to take effect.

Syntax
------

```css
/\* Keyword \*/
animation-timeline: none;
animation-timeline: auto;

/\* Single animation named timeline \*/
animation-timeline: --timeline_name;

/\* Single animation anonymous scroll progress timeline \*/
animation-timeline: scroll();
animation-timeline: scroll(scroller axis);

/\* Single animation anonymous view progress timeline \*/
animation-timeline: view();
animation-timeline: view(axis inset);

/\* Multiple animations \*/
animation-timeline: --progressBarTimeline, --carouselTimeline;
animation-timeline: none, --slidingTimeline;

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

### Values

`none`

The animation is not associated with a timeline.

`auto`

The animation's timeline is the document's default DocumentTimeline.

`scroll()`
Experimental

An anonymous scroll progress timeline is provided by some ancestor scroller of the current element. The function parameters allow you to select the scroller, and the scrolling axis the timeline will be measured along.

See `scroll()` for more information.

`view()`
Experimental

An anonymous view progress timeline is provided by the subject that `animation-timeline: view();` is set on. The function parameters allow you to select the scrollbar axis along which timeline progress will be tracked and an inset that adjusts the position of the box in which the subject is deemed to be visible.

See `view()` for more information.

`<dashed-ident>`

A `<dashed-ident>` identifying a named timeline previously declared with the `scroll-timeline-name` or `view-timeline-name` property (or the `scroll-timeline` or `view-timeline` shorthand property).

**Note:** If two or more timelines share the same name, the last declared within the cascade will be used. Also, if no timeline is found that matches the given name, the animation is not associated with a timeline.

**Note:** The `<dashed-ident>` values must start with `--`. This helps avoid name clashes with standard CSS keywords.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements |
| Inherited | no |
| Computed value | a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto` |
| Animation type | Not animatable |

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

animation-timeline =
  <single-animation-timeline>#

<single-animation-timeline> =
  auto            |
  none            |
  <dashed-ident>  |
  <scroll()>      |
  <view()>

<scroll()> =
  scroll( [ <scroller> || <axis> ]? )

<view()> =
  view( [ <axis> || <'view-timeline-inset'> ]? )

<scroller> =
  root     |
  nearest  |
  self

<axis> =
  block   |
  inline  |
  x       |
  y

```

Examples
--------

### Setting a named scroll progress timeline

 A scroll progress timeline named `--squareTimeline` is defined using the `scroll-timeline-name` property on an element with an `id` of `container`.
 This is then set as the timeline for the animation on the `#square` element using `animation-timeline: --squareTimeline`.

#### HTML

The HTML for the example is shown below.

```html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>
```

#### CSS

The CSS for the container sets it as the source of a scroll progress timeline named `--squareTimeline` using the `scroll-timeline-name` property (we could explicitly set which scrollbar axis to use with `scroll-timeline-axis`, but there is only a block direction scrollbar here, and it will be used by default).

The height of the container is set to 300px and we also set the container to create a vertical scrollbar if it overflows (below we will use CSS on the "stretcher" element to ensure that it does overflow).

```css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --squareTimeline;
  position: relative;
}
```

The CSS below defines a square that rotates in alternate directions according to the timeline provided by the `animation-timeline` property, which is set to the `--squareTimeline` timeline named above.

```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
  animation-direction: alternate;
  animation-timeline: --squareTimeline;

  position: absolute;
  bottom: 0;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

 The "stretcher" CSS sets the block height to 600px, which forces the container element to overflow and create scroll bars.
 Without this element there would be no scrollbar, and hence no scroll progress timeline to associate with the animation timeline.

```css
#stretcher {
  height: 600px;
}
```

#### Result

Scroll to see the square element being animated.

### Setting an anonymous scroll progress timeline

 In this example, the `#square` element is animated using an anonymous scroll progress timeline, which is applied to the element to be animated using the `scroll()` function.
 The timeline in this particular example is provided by the nearest parent element that has (any) scrollbar, from the scrollbar in the block direction.

#### HTML

The HTML for the example is shown below.

```html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>
```

#### CSS

 The CSS below defines a square that rotates in alternate directions according to the timeline provided by the `animation-timeline` property.
 In this case, the timeline is provided by `scroll(block nearest)`, which means that it will select the scrollbar in the block direction of the nearest ancestor element that has scrollbars; in this case the vertical scrollbar of the "container" element.

**Note:** `block` and `nearest` are actually the default parameter values, so we could have used just `scroll()`.

```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

 The CSS for the container sets its height to 300px and we also set the container to create a vertical scrollbar if it overflows.
 The "stretcher" CSS sets the block height to 600px, which forces the container element to overflow.
 These two together ensure that the container has a vertical scrollbar, which allows it to be used as the source of the anonymous scroll progress timeline.

```css
#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}
```

#### Result

Scroll to see the square element being animated.

### Setting a named view progress timeline

 A view progress timeline named `--subjectReveal` is defined using the `view-timeline-name` property on a subject element with a `class` of `animation`.
 This is then set as the timeline for the same element using `animation-timeline: --subjectReveal;`. The result is that the subject element animates as it moves upwards through the document as it is scrolled.

#### HTML

The HTML for the example is shown below.

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

The `<div>` with the class of `subject` is also given a class of `animation` — this is where the `view-timeline-name` is set to define a named view progress timeline. It is also given an `animation-timeline` name with the same value to declare that this will be the element animated as the view progress timeline is progressed.

Lastly, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller.

```css
.animation {
  view-timeline-name: --subjectReveal;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
```

#### Result

Scroll to see the subject element being animated.

### Setting an anonymous view progress timeline

An anonymous view progress timeline is set on an element with class `subject` using `animation-timeline: view()`. The result is that the `subject` element animates as it moves upwards through the document as it is scrolled.

#### HTML

The HTML for the example is shown below.

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

The `<div>` with the class of `subject` is also given a class of `animation` — this is where `animation-timeline: view()` is set to declare that it will be animated as it progresses through the view progress timeline provided by its scrolling ancestor (in this case the document's root element).

Last, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller.

```css
.animation {
  animation-timeline: view();

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
```

#### Result

Scroll to see the subject element being animated.

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

| Specification |
| --- |
| CSS Animations Level 2 # animation-timeline |

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

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

See also
--------

* `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`
* `scroll-timeline-name`, `scroll-timeline-axis`, `scroll-timeline`
* `timeline-scope`
* `view-timeline-name`, `view-timeline-axis`, `view-timeline`, `view-timeline-inset`
* The JavaScript equivalent: The `timeline` property available in `Element.animate()` calls
* CSS scroll-driven animations
* Using CSS animations


Next-sibling combinator - CSS: Cascading Style Sheets

Next-sibling combinator
=======================

The **next-sibling combinator** (`+`) separates two selectors and matches the second element only if it *immediately* follows the first element, and both are children of the same parent `element`.

```css
/\* Paragraphs that come immediately after any image \*/
img + p {
  font-weight: bold;
}
```

Syntax
------

```css
/\* The white space around the + combinator is optional but recommended. \*/
former\_element + target\_element { style properties }
```

Examples
--------

### CSS

```css
li:first-of-type + li {
  color: red;
}
```

### HTML

```html
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # adjacent-sibling-combinators |

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

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

See also
--------

* Subsequent-sibling combinator


::-webkit-search-cancel-button - CSS: Cascading Style Sheets

::-webkit-search-cancel-button
==============================

**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-search-cancel-button`** CSS pseudo-element represents a button (the "cancel button") at the edge of an `<input>` of `type="search"` which clears away the current value of the `<input>` element. This button and pseudo-element are non-standard, supported only in WebKit and Blink, hence the vendor prefix. The clear button is only shown on non-empty search `<input>` elements.

Syntax
------

```css
selector::-webkit-search-cancel-button {
  /\* ... \*/
}
```

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

Not part of any standard.

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

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

See also
--------

* `::-webkit-search-results-button`


quotes - CSS: Cascading Style Sheets

quotes
======

The CSS **`quotes`** property sets how the browser should render quotation marks that are automatically added to the HTML `<q>` element or added using the `open-quotes` or `close-quotes` (or omitted using the `no-open-quote` and `no-close-quote`) values of the of the CSS `content` property.

Try it
------

Browsers insert quotation marks at the opening and closing of `<q>` elements and for the `open-quote` and `close-quote` values of the `content` property. Each opening or closing quote is replaced by one of the strings from the value of `quotes`, based on the depth of nesting, or, if `quotes` is explicity set to or otherwise resolves to `auto`, the quotation marks used are language dependent.

Syntax
------

```css
/\* Keyword value \*/
quotes: none;
quotes: auto;

/\* <string> values \*/
quotes: "«" "»"; /\* Set open-quote and close-quote to use French quotation marks \*/
quotes: "«" "»" "‹" "›"; /\* Set two levels of quotation marks \*/

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

### Values

`none`

The `open-quote` and `close-quote` values of the `content` property produce no quotation marks, as if `no-open-quote` and `no-close-quote` were set, respectively.

`auto`

Quotation marks that are typographically appropriate for the inherited language (i.e. via the `lang` attribute set on the parent or other ancestor).

`[`<string>` <string>]+`

Defines one or more pairs of quotation mark values for opening and closing quotes. In each pair, the first of each pair of quotes are used as the values for the `open-quote` and the second of each pair is the `close-quote`.

The first pair represents the quotation's outer level. The second pair, if present, represents the first nested level. The next pair is used for doubly nested levels, and so on. If the depth of quote nesting is greater than the number of pairs, the last pair in the `quotes` value is repeated.

Which pair of quotes is used depends on the depth, or nesting level, of quotes: the number of occurrences of `<q>` quotes or `open-quote` (or `no-open-quote`) in all generated text before the current occurrence, minus the number of occurrences of closing quotes, either as `</q>`, `close-quote`, or `no-close-quote`. If the depth is 0, the first pair is used, if the depth is 1, the second pair is used, etc.

**Note:** The CSS `content` property value `open-quote` increments and `no-close-quote` decrements the quoting level, but does not insert a quotation marks.

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

|  |  |
| --- | --- |
| Initial value | depends on user agent |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

quotes =
  auto                    |
  none                    |
  [ <string> <string> ]+

```

Examples
--------

### Default quotes and overrides

This examples compares the default quotes provided by the semantic HTML `<q>` element to those we define using the CSS `quotes` property.

The default value of `quotes` is `auto`. In this example, the first list item has `quotes: auto` set, so gets the default quotes for the language specified; the same as if no `quotes` property was set. The second list item defines which quotation marks to use for quotes and nested quotes; these quotation marks will be used for descendants of an element with `specialQuotes` class regardless of the language (like any `lang` attribute values set).

#### HTML

```html
<ul>
  <li>
    Default quotes:
    <p lang="ru">
      <q
 >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
 >, - писал Раджу.
    </p>
  </li>
  <li class="specialQuotes">
    Defined by <code>quotes</code> property :
    <p lang="ru">
      <q
 >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
 >, - писал Раджу.
    </p>
  </li>
  <ul></ul>
</ul>
```

#### CSS

```css
li {
  quotes: auto;
}

.specialQuotes {
  quotes: "“" "”" "‘" "’";
}
```

#### Result

By default, browser provide language specific quotation marks when the `<q>` element is used. If the `quotes` property is defined, the values provided override the browser defaults. Note the `quotes` property is inherited. The `quotes` property is set on the `<li>` with the `specialQuotes` class, but the quotes are applied the `<q>` elements.

Note that each open-quote and close-quote is replaced by one of the strings from the value of quotes, based on the depth of nesting.

### Auto quotes

The default value of `quotes` is `auto`. This example works without it being explicitly being set.

#### HTML

```html
<ul>
  <li lang="fr">
    <q>Ceci est une citation française.</q>
  </li>
  <li lang="ru">
    <q>Это русская цитата</q>
  </li>
  <li lang="de">
    <q>Dies ist ein deutsches Zitat</q>
  </li>
  <li lang="en">
    <q>This is an English quote.</q>
  </li>
</ul>
```

#### CSS

```css
q {
  quotes: auto;
}
li:not(:last-of-type) {
  border-bottom: 1px solid;
}
```

```
li {
  padding: 0.5em 0;
}
```

#### Result

Note that the `lang` attribute was placed on an ancestor of the `<q>`, not the `<q>` itself. If a quotation is in a different language than the surrounding text, it is customary to quote the text with the quote marks of the language of the surrounding text, not the language of the quotation itself.

### With generated content

In this example, instead of using the `<q>` element, we are adding quotation marks to the `::before` and `::after` pseudo-elements before and after the content of each element with a specific class name.

#### HTML

```html
<p>
  <span class="quote">I should be using quotes</span>, I thought,
  <span class="quote"
 >But why use semantic HTML elements when I can add classes to
    <span class="quote">ALL THE THINGS!</span>?
  </span>
</p>
```

#### CSS

```css
.quote {
  quotes: '"' '"' "'" "'";
}
.quote::before {
  content: open-quote;
}
.quote::after {
  content: close-quote;
}
```

#### Result

### Text as quotes and empty quotes

This example demonstrates using something other than quotation marks as the `<string>` values. The open-quote indicates the speaker and, as there is not opening quotation mark, the close-quote is the empty. (Mixing a `<string>` with an enumerated keyword to create a pair is not supported). We set `auto` for the nested quotes. These nested quotes will be book-ended by whatever the language dictates is normal for nested quotes.

#### HTML

```html
<ul>
  <li><q data-speaker="karen">Hello</q></li>
  <li><q data-speaker="chad">Hi</q></li>
  <li><q data-speaker="karen">this conversation is not interesting</q></li>
  <li>
    <q data-speaker="pat"
 >OMG! <q>Hi</q>? Seriously? at least <q>hello</q> is five letters long.</q
 >
  </li>
</ul>
```

#### CSS

```css
[data-speaker="karen" i] {
  quotes: "She said: " "";
}
[data-speaker="chad" i] {
  quotes: "He said: " "";
}
[data-speaker="pat" i] {
  quotes: "They said: " "";
}
[data-speaker] q {
  quotes: auto;
}
```

```
li {
  padding: 0.5em 0;
}
```

#### Result

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

| Specification |
| --- |
| CSS Generated Content Module Level 3 # quotes |

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

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

See also
--------

* CSS generated content module
* `contain`
* `content`


CSS table - CSS: Cascading Style Sheets

CSS table
=========

The **CSS table** module helps you define how to lay out table data.

Reference
---------

### Properties

* `border-collapse`
* `border-spacing`
* `caption-side`
* `empty-cells`
* `table-layout`
* `vertical-align`
Specifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |


border-right - CSS: Cascading Style Sheets

border-right
============

The **`border-right`** shorthand CSS property sets all the properties of an element's right border.

Try it
------

As with all shorthand properties, `border-right` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

```css
border-right-style: dotted;
border-right: thick green;
```

It is actually the same as this one:

```css
border-right-style: dotted;
border-right: none thick green;
```

The value of `border-right-style` given before `border-right` is ignored. Since the default value of `border-right-style` is `none`, not specifying the `border-style` part results in no border.

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

This property is a shorthand for the following CSS properties:

* `border-right-color`
* `border-right-style`
* `border-right-width`
Syntax
------

```css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;

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

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

### Values

`<br-width>`

See `border-right-width`.

`<br-style>`

See `border-right-style`.

`<color>`

See `border-right-color`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-right-width`: `medium`
* `border-right-style`: `none`
* `border-right-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
* `border-right-style`: as specified
* `border-right-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-right-color`: a color
* `border-right-style`: discrete
* `border-right-width`: a length
 |

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

border-right =
  <line-width>  ||
  <line-style>  ||
  <color>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

Examples
--------

### Applying a right border

#### HTML

```html
<div>This box has a border on the right side.</div>
```

#### CSS

```css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

#### Results

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

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

See also
--------

* `border`
* `border-block`
* `outline`


CSS masking - CSS: Cascading Style Sheets

CSS masking
===========

The **CSS masking** module that defines masking and clipping for partially or fully hiding portions of visual elements.

Reference
---------

### Properties

* `clip`
Deprecated
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
Specifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1  |


animation-fill-mode - CSS: Cascading Style Sheets

animation-fill-mode
===================

The **`animation-fill-mode`** CSS property sets how a CSS animation applies styles to its target before and after its execution.

Try it
------

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

Syntax
------

```css
/\* Single animation \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Multiple animations \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

/\* Global values \*/
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: revert-layer;
animation-fill-mode: unset;
```

### Values

`none`

The animation will not apply any styles to the target when it's not executing. The element will instead be displayed using any other CSS rules applied to it. This is the default value.

`forwards`

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe depends on the value of `animation-direction` and `animation-iteration-count`:

| `animation-direction` | `animation-iteration-count` | last keyframe encountered |
| --- | --- | --- |
| `normal` | even or odd | `100%` or `to` |
| `reverse` | even or odd | `0%` or `from` |
| `alternate` | even | `0%` or `from` |
| `alternate` | odd | `100%` or `to` |
| `alternate-reverse` | even | `100%` or `to` |
| `alternate-reverse` | odd | `0%` or `from` |

`backwards`

The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the `animation-delay` period. The first relevant keyframe depends on the value of `animation-direction`:

| `animation-direction` | first relevant keyframe |
| --- | --- |
| `normal` or `alternate` | `0%` or `from` |
| `reverse` or `alternate-reverse` | `100%` or `to` |

`both`

The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

**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-fill-mode` has the same effect when creating CSS scroll-driven animations as it does for regular time-based animations.

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

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

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

animation-fill-mode =
  <single-animation-fill-mode>#

<single-animation-fill-mode> =
  none       |
  forwards   |
  backwards  |
  both

```

Examples
--------

### Setting fill mode

You can see the effect of `animation-fill-mode` in the following example. It demonstrates how you can make the animation remain in its final state rather than reverting to the original state (which is the default).

#### HTML

```html
<p>Move your mouse over the gray box!</p>
<div class="demo">
  <div class="growsandstays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>
```

#### CSS

```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
```

#### Result

See CSS animations for more examples.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-fill-mode |

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

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

See also
--------

* Using CSS animations
* JavaScript `AnimationEvent` API
* Other related animation properties: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`, `animation-timing-function`


CSS data types - CSS: Cascading Style Sheets

CSS data types
==============

**CSS data types** define typical values (including keywords and units) accepted by CSS properties and functions. They are a special kind of component value type.

The most commonly-used types are defined in the CSS Values and Units specification. This specification also defines functional notations, which allow for more complex types or processing. Other types are defined in the specifications to which they apply.

Below you will find a reference to the types that you are most likely to come across, however it is not a comprehensive reference for all types defined in every CSS specification.

Syntax
------

```css
selector {
  property: <unit-data-type>;
}
```

In formal CSS syntax, data types are denoted by a keyword placed between the inequality signs "`<`" and "`>`".

Textual data types
------------------

These types include keywords and identifiers as well as strings, and URLs.

Pre-defined keywords

Keywords with a pre-defined meaning, for example, the value of `collapse` for the `border-collapse` property.

CSS-wide keywords

All properties, including custom properties, accept the CSS-wide keywords:

`initial`

The value specified as the property's initial value.

`inherit`

The computed value of the property on the element's parent.

`revert`

Rolls back the cascade to the value of the earlier origin.

`unset`

Acts as `inherit` or `initial` depending on whether the property is inherited or not.

`<custom-ident>`

A user-defined identifier, for example the name assigned using the `grid-area` property.

`<dashed-ident>`

A `<custom-ident>` with the additional restriction that it must start with two dashes, for example, with CSS Custom Properties.

`<string>`

A quoted string, such as used for a value of the `content` property.

`url()`

A pointer to a resource, for example as the value of `background-image`.

Numeric data types
------------------

These data types are used to indicate quantities, indexes, and positions. The majority of these are defined in the Values and Units specification, however additional types are described in other specifications where they are specific to that specification alone — for example the `fr` unit in CSS Grid Layout.

`<integer>`

One or more decimal units 0 through 9.

`<number>`

Real numbers which may also have a fractional component, for example 1 or 1.34.

`<dimension>`

A number with a unit attached to it, for example 23px or 15em.

`<percentage>`

A number with a percentage sign attached to it, for example 10%.

`<ratio>`

A ratio, written with the syntax `<number> / <number>`.

`<flex>`

A flexible length introduced for CSS Grid Layout, written as a `<number>` with the `fr` unit attached and used for grid track sizing.

Quantities
----------

These types are used to specify distance and other quantities.

`<length>`

Lengths are a `<dimension>` and refer to distances.

`<angle>`

Angles are used in properties such as `linear-gradient()` and are a `<dimension>` with one of `deg`, `grad`, `rad`, or `turn` units attached.

`<time>`

Duration units are a `<dimension>` with an `s` or `ms` unit.

`<frequency>`

Frequencies are a `<dimension>` with a `Hz` or `kHz` unit attached.

`<resolution>`

Is a `<dimension>` with a unit identifier of `dpi`, `dpcm`, `dppx`, or `x`.

Combinations of types
---------------------

Some CSS properties can take a dimension or a percentage value. In this case the percentage value will be resolved to a quantity that matches the allowable dimension. Properties which can accept a percentage in addition to a dimension will use one of the types listed below.

`<length-percentage>`

A type that can accept a length or a percentage as a value.

`<frequency-percentage>`

A type that can accept a frequency or a percentage as a value.

`<angle-percentage>`

A type that can accept an angle or a percentage as a value.

`<time-percentage>`

A type that can accept a time or a percentage as a value.

Color
-----

The CSS Color Specification defines the `<color>` data type, and other types which relate to color in CSS.

`<color>`

Specified as a keyword or a numerical color value.

`<alpha-value>`

Specifies the transparency of a color. May be a `<number>`, in which case 0 is fully transparent and 1 is fully opaque, or a `<percentage>`, in which case 0% is fully transparent and 100% fully opaque.

`<hue>`

Specifies the `<angle>`, with a unit identifier of `deg`, `grad`, `rad`, or `turn`, or unitless `<number>` interpreted as `deg`, of the color wheel specific to the `<absolute-color-functions>` of which it is a component.

Images
------

The CSS Images Specification defines the data types which deal with images, including gradients.

`<image>`

A URL reference to an image or a color gradient.

`<color-stop-list>`

A list of two or more color stops with optional transition information using a color hint.

`<linear-color-stop>`

A `<color>` and a `<length-percentage>` to indicate the color stop for this part of the gradient.

`<linear-color-hint>`

A `<length-percentage>` to indicate how the color interpolates.

`<ending-shape>`

Used for radial gradients; can have a keyword value of `circle` or `ellipse`.

`<size>`

Determines the size of the radial gradient's ending shape. This accepts a value of a keyword or a `<length>` but not a percentage.

2D positioning
--------------

The `<position>` data type is interpreted as defined for the `<background-position>` property.

`<position>`

Defines the position of an object area. Accepts a keyword value such as `top` or `left`, or a `<length-percentage>`.

Calculation data types
----------------------

These data types are used in CSS math function calculations.

`<calc-sum>`

A calculation which is a sequence of calculation values interspersed with addition (`+`) and subtraction (`-`) operators. This data type requires both values to have units.

`<calc-product>`

A calculation which is a sequence of calculation values interspersed with multiplication (`*`) and division (`/`) operators. When multiplying, one value must be unitless. When dividing, the second value must be unitless.

`<calc-value>`

Defines accepted values for calculations, values such as `<number>`, `<dimension>`, `<percentage>`, `<calc-constant>` or nested `<calc-sum>` calculations.

`<calc-constant>`

Defines a number of CSS keywords representing numeric constants such as `e` and `π`, that can be used in CSS math functions.

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

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

See also
--------

* CSS Units and Values
* Introduction to CSS: Values and Units
* CSS Functional Notation


text-align-last - CSS: Cascading Style Sheets

text-align-last
===============

The **`text-align-last`** CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

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

### Values

`auto`

The affected line is aligned per the value of `text-align`, unless `text-align` is `justify`, in which case the effect is the same as setting `text-align-last` to `start`.

`start`

The same as `left` if direction is left-to-right and `right` if direction is right-to-left.

`end`

The same as `right` if direction is left-to-right and `left` if direction is right-to-left.

`left`

The inline contents are aligned to the left edge of the line box.

`right`

The inline contents are aligned to the right edge of the line box.

`center`

The inline contents are centered within the line box.

`justify`

The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.

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

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

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

text-align-last =
  auto          |
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent

```

Examples
--------

### Justifying the last line
```

<p>
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}
```

#### Results

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-align-last-property |

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

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

See also
--------

* `text-align`


font-synthesis-position - CSS: Cascading Style Sheets

font-synthesis-position
=======================

The **`font-synthesis-position`** CSS property lets you specify whether or not a browser may synthesize the subscript and superscript "position" typefaces when they are missing in a font family, while using `font-variant-position` to set the positions.

The **`font-synthesis-position`** property has no effect when using the `<sup>` and `<sub>` elements.

It is often convenient to use the shorthand property `font-synthesis` to control all typeface synthesis values.

Syntax
------

```css
/\* Keyword values \*/
font-synthesis-position: auto;
font-synthesis-position: none;

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

### Values

`auto`

Indicates that a missing position typeface may be synthesized by the browser if needed.

`none`

Indicates that the synthesis of a missing position typeface by the browser is not allowed.

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

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

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

font-synthesis-position =
  auto  |
  none

```

Examples
--------

### Disabling synthesis of position typeface

This example shows turning off synthesis of the superscript and subscript typefaces by the browser in the `Montserrat` font.

#### HTML

```html
<p>
  These are the default position <span class="super">superscript</span>,
  position <span class="sub">subscript</span>, <strong>bold</strong> and
  <em>oblique</em> typefaces.
</p>

<p class="no-syn">
  The positions <span class="super">superscript</span> and
  <span class="sub">subscript</span> typeface is turned off here but not the
  <strong>bold</strong> and <em>oblique</em> typefaces (on browsers that support
  <code>font-synthesis-position</code>).
</p>
```

#### CSS

```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

\* {
  font-family: "Montserrat", sans-serif;
}
.super {
  font-variant-position: super;
}
.sub {
  font-variant-position: sub;
}
.no-syn {
  font-synthesis-position: none;
}
```

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis-position |

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

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

See also
--------

* `font-synthesis` shorthand, `font-synthesis-style`, `font-synthesis-weight`
* `font-style`, `font-variant`, `font-variant-position`, `font-weight`


<length-percentage> - CSS: Cascading Style Sheets

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

The **`<length-percentage>`** CSS data type represents a value that can be either a `<length>` or a `<percentage>`.

Syntax
------

Refer to the documentation for `<length>` and `<percentage>` for details of the individual syntaxes allowed by this type.

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

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

```

Examples
--------

### length-percentage examples

The following simple example demonstrates several properties that use `<length-percentage>` values.

#### HTML

```html
<p>You can use percentages and lengths in so many places.</p>
```

#### CSS

```css
p {
  /\* length-percentage examples \*/
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /\* length examples \*/
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /\* percentage example \*/
  text-size-adjust: 20%;
}
```

#### Result

### Use in calc()

Where a `<length-percentage>` is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a `calc()` expression. Therefore, all of the following values are acceptable for `width`:

```css
width: 200px;
width: 20%;
width: calc(100% - 200px);
```

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

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

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

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

See also
--------

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


scroll-margin - CSS: Cascading Style Sheets

scroll-margin
=============

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

Try it
------

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

This property is a shorthand for the following CSS properties:

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

```css
/\* <length> values \*/
scroll-margin: 10px;
scroll-margin: 1em 0.5em 1em 1em;

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

### Values

`<length>`

An outset from the corresponding edge of the scroll container.

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

You can see the effect of `scroll-margin` by scrolling to a point partway between two of the "pages" of the example's content. The value specified for `scroll-margin` determines how much of the page that's primarily outside the snapport should remain visible.

Thus, the `scroll-margin` values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `scroll-margin-bottom`: `0`
* `scroll-margin-left`: `0`
* `scroll-margin-right`: `0`
* `scroll-margin-top`: `0`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `scroll-margin-bottom`: as specified
* `scroll-margin-left`: as specified
* `scroll-margin-right`: as specified
* `scroll-margin-top`: as specified
 |
| Animation type | by computed value type |

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

scroll-margin =
  <length>{1,4}

```

Examples
--------

### Simple demonstration

This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.

#### HTML

The HTML that represents the blocks is very simple:

```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

#### CSS

Let's walk through the CSS. The outer container is styled like this:

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

The main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.

The child elements are styled as follows:

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

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```

The most relevant part here is `scroll-snap-align: start`, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.

Last of all we specify the scroll margin-values, a different one for the second and third child elements:

```css
.scroller > div:nth-child(2) {
  scroll-margin: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin: 2rem;
}
```

This means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the left edge of the second `<div>`, and `2rems` outside the left edge of the third `<div>`.

**Note:** Here we are setting `scroll-margin` on all sides at once, but only the start edge is really relevant. It would work just as well here to only set a scroll margin on that one edge, for example with `scroll-margin-inline-start: 1rem`, or `scroll-margin: 0 0 0 1rem`.

#### Result

Try it for yourself:

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-margin |

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


::-webkit-slider-runnable-track - CSS: Cascading Style Sheets

::-webkit-slider-runnable-track
===============================

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

The **`::-webkit-slider-runnable-track`** CSS pseudo-element represents the "track" (the groove in which the indicator slides) of an <input type="range">.

Syntax
------

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

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

Not part of any standard.

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

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

See also
--------

* `::-webkit-slider-thumb`
* Similar pseudo-elements used by other browsers:
    + `::-moz-range-track`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders


<easing-function> - CSS: Cascading Style Sheets

<easing-function>
=================

The **`<easing-function>`** CSS data type represents a mathematical function that describes the rate at which a value changes.

This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. This lets you vary the animation's speed over the course of its duration. You can specify an easing function for CSS transition and animation properties.

Syntax
------

```css
/\* linear function and keyword \*/
/\* linear(<point-list>) \*/
linear(1, -0.5, 0)
linear

/\* cubic-bezier function and keywords \*/
/\* cubic-bezier(<x1>, <y1>, <x2>, <y2>) \*/
cubic-bezier(0.25, 0.1, 0.25, 1)
ease
ease-in
ease-out
ease-in-out

/\* steps function and keywords \*/
/\* steps(<number-of-steps>, <direction>) \*/
steps(4, end)
steps(10, jump-both)
step-start
step-end
```

### Values

`linear`

Specifies a constant rate of interpolation, with no change in the rate of progress throughout the duration (that is, no acceleration or deceleration). This keyword value is equivalent to both `cubic-bezier(0, 0, 1, 1)` and `linear(0, 1)` functions.

![Graph of "Input progress" to "Output progress" showing a line extending from the origin to (1, 1).](/en-US/docs/Web/CSS/easing-function/linear.svg)

`<linear-easing-function>`

Specifies a `linear()` function with one or more comma-separated *linear stops*, each containing up to two optional *stop lengths*, to control the progress of an animation or transition.

The `linear()` function specifies a `<linear-stop-list>`, a comma-separated list of points along the animation or transition progress. Each point or `<linear-stop>` in the list is specified as a `<number>` between `0` and `1`. By default, each stop in the `<linear-stop-list>` is equidistant. To have more control on the progress of the animation or transition, each point can include up to two optional `<percentage>` `<linear-stop-length>` values.

* `<number>`: Represents a point in time along the duration of the animation or transition. The value should be between `0` and `1`, where `0` represents the start of the iteration and `1` represents the end.
* `<percentage>`: Indicates the position of a linear stop along the duration. It can take up to two values. If one value is specified, it defines the start of the associated linear stop. If two percentage values are specified, they define the length of the stop: the first percentage indicates the starting point and the second percentage indicates the ending point for that segment in the animation or transition. If no `<percentage>` value is specified, which is the default, the stops are spread evenly along the timeline.

`<cubic-bezier-easing-function>`

Specifies a Bézier curve to shape the progress of an animation or a transition. In CSS, Bézier curves are defined by four control points that mathematically describe the curve: a starting point, an ending point, and two control points. The cubic Bézier easing function can be defined in one of these two ways: by creating a custom curve with a four-parameter `cubic-bezier()` function call or by using one of the predefined keyword values, which map to the commonly used Bézier curve parameters. The predefined keyword values include:

`ease`: This keyword represents the easing function `cubic-bezier(0.25, 0.1, 0.25, 1)`. It indicates that the interpolation starts slowly, accelerates sharply, and then slows gradually towards the end. It is similar to the `ease-in-out` keyword, though it accelerates more sharply at the beginning.

`ease-in`: This keyword represents the easing function `cubic-bezier(0.42, 0, 1, 1)`. It indicates that the interpolation starts slowly, then progressively speeds up until the end, at which point it stops abruptly.

`ease-out`: This keyword represents the easing function `cubic-bezier(0, 0, 0.58, 1)`. It indicates that the interpolation starts abruptly and then progressively slows down towards the end.

`ease-in-out`: This keyword represents the easing function `cubic-bezier(0.42, 0, 0.58, 1)`. It indicates that the interpolation starts slowly, speeds up, and then slows down towards the end. At the beginning, it behaves like the `ease-in` keyword; at the end, it is like the `ease-out` keyword.

![Graphs of "Input progress" to "Output progress", of which "ease" shows a curved line quickly rising from the origin to (1, 1); "ease-in" shows a shallow curved line from the origin that straightens out as it approaches (1, 1); "ease-out" shows a straight diagonal line that slightly curves as it gets close to (1, 1); and "ease-in-out" shows a symmetrical, "S"-shaped line curving from the origin to (1, 1).](/en-US/docs/Web/CSS/easing-function/ease.svg)

`cubic-bezier()`: This function accepts four `<number>` values to shape a curve.

* `<number>`: Specifies the location of P1 and P2 points on the curve. `<x1>` and `<y1>` are the coordinates for point P1, and `<x2>` and `<y2>` are the coordinates for point P2. `<x1>` and `<x2>` values must be between `0` and `1`, otherwise the function will not work as expected.

`<step-easing-function>`

Specifies a `steps()` function that divides the animation into a set number of equal-length intervals or "steps", causing the animation to jump from one step to the next rather than transitioning smoothly. This parameter accepts one of the following two keyword values that map to predefined `steps()` functions or a custom `steps()` function:

`step-start`: This keyword represents the easing function `steps(1, jump-start)` or `steps(1, start)`. It indicates that the interpolation jumps immediately to its final state, where it stays until the end.

`step-end`: This keyword represents the easing function `steps(1, jump-end)` or `steps(1, end)`. It indicates that the interpolation stays in its initial state until the end, at which point it jumps directly to its final state.

![Two graphs of "Input progress" to "Output progress". In the "step-start" graph, an unfilled circle represents the origin point (0,0), with a horizontal line extending from (0, 1) to (1, 1). In the "step-end" graph, a horizontal line extends from the origin to (1, 0), with an unfilled circle at (1,0) and a solid circle at (1, 1).](/en-US/docs/Web/CSS/easing-function/step.svg)

`steps()`: This function accepts a positive `<integer>` and an optional `<step-position>`.

* `<integer>`: Represents the number of equidistant intervals or 'steps'. It must be a positive integer greater than `0` unless the second parameter is `jump-none`, in which case, it must be a positive integer greater than `1`.
* `<step-position>`: Specifies the timing of the jump to occur either at the start, at the end, at both start and end, or at neither. The possible keyword values include:
    + `jump-start` denotes that the first jump occurs right at the start, essentially at the `0` point. No time is spent at the `0%` mark.
    + `jump-end` denotes that the last jump occurs right at the end, essentially at the `1` point. No time is spent at the `100%` mark. This is the default value when no `<step-position>` is specified.
    + `jump-none` denotes that no jump occurs either at the beginning or at the end, effectively removing a step during the duration. Instead, the progress holds steady at both the `0%` mark and `100%` marks. The duration of these holds is determined by dividing the total duration by the number of steps (1/n).
    + `jump-both` denotes that jumps occur at both the beginning and the end, essentially occurring at both the `0` and `1`. Effectively, a step is added at both the ends. No time is spent at the `0%` and `100%` marks.
    + `start` is the equivalent of `jump-start`.
    + `end` is the equivalent of `jump-end`.

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

There are three types of easing functions:

* Linear
* Cubic Bézier
* Steps
### Linear easing function

The `linear()` function creates a piecewise linear easing, allowing the approximation of complex animations and transitions by interpolating linearly between the specified points. The interpolation occurs at a constant rate from beginning to end. A typical use of the `linear()` function is to provide many points to approximate any curve.

For example, the `linear(0, 0.25, 1)` function defines the linear stops at `0`, `0.25`, and `1`. The animation or transition starts at point `0`, moves linearly to `0.25`, and then continues linearly to point `1`. Since no `<linear-stop-length>` percentage is specified, the same duration (50%) is used to go from `0` to `0.25` and from `0.25` to `1`.

![Graphs of "Input progress" to "Output progress", of which "linear(0, 0.25, 1)" shows a broken line connecting the origin, (0.5, 0.25), and (1, 1); and "linear(0, 0.25 75%, 1)" shows a broken line connecting the origin, (0.75, 0.25), and (1, 1).](/en-US/docs/Web/CSS/easing-function/linear_function.svg)

By default, the stops are equidistant. So if there are 5 stops, they will be at 0%, 25%, 50%, 75%, and 100% of the duration. You can use optional `<linear-stop-length>` percentage values to provide finer control, defining the start and/or length of each segment, allowing for a more controlled progression of the transition.

Let's look at an example where the progress of the animation is specified: `linear(0, 0.25 75%, 1)`. In this case, the animation progresses to `75%` of its total change in the first 25% of the duration (that is, to go from the timeline point `0` to `0.25`). The last 25% of the animation's total change is used during the remaining 75% of the duration (that is, to progress from the timeline point `0.25` to `1`). Consider another example of the `linear()` function: `linear(0.5 25% 75%, 1)`. Here, the animation reaches `25%` of its total change at the halfway point (`0.5`), and then instantly jumps to `75%` of its total change. Over the remaining 50% of the duration (`0.5` to `1`), it progresses from `75%` of its total change to 100%.

**Note:** The `linear` keyword is equivalent to the easing function `linear(0, 1)`. While the `linear` keyword is always interpreted as-is, the function `linear(0, 1)` gets interpreted as `linear(0 0%, 1 100%)`.

### Cubic Bézier easing function

The `cubic-bezier()` functional notation defines a cubic Bézier curve. The easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions because they can be used to smooth down the start and end of the interpolation. They correlate an input progress to an output progress, both expressed as `<number>`s. For these values, `0.0` represents the initial state, and `1.0` represents the final state.

![Graph of "Input progress" to "Output progress" showing an "S"-shaped line curving from the origin to (1, 1) with the Bezier control points P1(0.1, 0.6) and P2(0.7, 0.2).](/en-US/docs/Web/CSS/easing-function/cubic-bezier.svg)

A cubic Bézier curve is defined by four points: P0, P1, P2, and P3. The points P0 and P3 represent the start and the end of the curve. In CSS, these points are fixed as the coordinates progress (the abscissa the input progress, the ordinate the output progress). P0 is `(0, 0)` and represents the initial progress and the initial state. P3 is `(1, 1)` and represents the final progress and the final state.

Not all cubic Bézier curves are suitable as easing functions because not all are mathematical functions; i.e., curves that for a given abscissa have zero or one value. With P0 and P3 fixed as defined by CSS, a cubic Bézier curve is a function, and is therefore valid, if and only if the abscissas of P1 and P2 are both in the `[0, 1]` range.

Cubic Bézier curves with the P1 or P2 ordinate outside the `[0, 1]` range can cause the value to go farther than the final state and then return. In animations, for some properties, such as `left` or `right`, this creates a kind of "bouncing" effect.

![Graphs of the easing function "cubic-bezier(0.3, 0.2, 0.2, 1.4)", one of which shows the output progress going above 1 starting from a certain input progress, the other shows the output progress reaching and then staying at 1.](/en-US/docs/Web/CSS/easing-function/cubic-bezier_out_of_range.svg)

However, certain properties will restrict the output if it goes outside an allowable range. For example, a color component greater than `255` or smaller than `0` in `rgb()` will be clipped to the closest allowed value (`255` and `0`, respectively). Some `cubic-bezier()` values exhibit this property.

When you specify an invalid cubic Bézier curve, CSS ignores the whole property.

Each of the keywords `ease`, `ease-in`, `ease-out`, and `ease-in-out` is equivalent to a specific `cubic-bezier()` value.

### Steps easing function

The `steps()` functional notation defines a step function that divides the domain of output values in equidistant steps. This subclass of step functions are sometimes also called *staircase functions*.

These are a few examples illustrating the `steps()` function:

```css
steps(2, jump-start) /\* Or steps(2, start) \*/
steps(4, jump-end) /\* Or steps(4, end) \*/
steps(5, jump-none)
steps(3, jump-both)
```

![Graphs of "Input progress" to "Output progress", of which "steps(2, jump-start)" shows horizontal lines extending 0.5 unit from (0, 0.5) and (0.5, 1), respectively, with empty circles at the origin and (0.5, 0.5); "steps(4, jump-end)" shows horizontal lines extending 0.25 unit from (0, 0), (0.25, 0.25), (0.5, 0.5), and (0.75, 0.75), respectively, with unfilled circles at (0.25, 0), (0.5, 0.25), and (0.75, 0.5), and a solid circle at (1, 1); "steps(5, jump-none)" shows horizontal lines extending 0.2 unit from (0, 0), (0.2, 0.25), (0.4, 0.5), (0.6, 0.75), and (0.8, 1), respectively, with unfilled circles at (0.2, 0), (0.4, 0.25), (0.6, 0.5), and (0.8, 0.75); "steps(3, jump-both)" shows horizontal lines extending 1/3 unit from (0, 0.25), (1/3, 0.5), and (2/3, 0.75),respectively , with a solid circle at (1, 1) and unfilled circles at the origin, (1/3, 0.25), (2/3, 0.5), and (1, 0.75).](/en-US/docs/Web/CSS/easing-function/jump.svg)

Each of the keywords `step-start` and `step-end` is equivalent to a specific `steps()` value.

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

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

### Comparing the easing functions

This example provides an easy comparison between the different easing functions using an animation. From the drop-down menu, you can select an easing function – there are a couple of keywords and some `cubic-bezier()` and `steps()` options. After selecting an option, you can start and stop the animation using the provided button.

#### HTML

```html
<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">Start animation</button>
  </li>
  <li>
    <label for="easing-select">Choose an easing function:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>
```

#### CSS

```css
body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgb(25 255 255 / 80%),
    rgb(25 255 255 / 40%)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "Start animation") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "Stop animation";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "Start animation";
  }
});

selectElem.addEventListener("change", () => {
  divElem.style.animationTimingFunction = selectElem.value;
});
```

#### Result

### Using the cubic-bezier() function

These cubic Bézier curves are valid for use in CSS:

```css
/\* The canonical Bézier curve with four <number> in the [0,1] range \*/
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/\* Using <integer> is valid because any <integer> is also a <number>. \*/
cubic-bezier(0, 0, 1, 1)

/\* Negative values for ordinates are valid, leading to bouncing effects. \*/
cubic-bezier(0.1, -0.6, 0.2, 0)

/\* Values greater than 1.0 for ordinates are also valid. \*/
cubic-bezier(0, 1.1, 0.8, 4)
```

These cubic Bézier curves definitions are invalid:

```css
/\* Though the animated output type may be a color,
 Bézier curves work with numerical ratios. \*/
cubic-bezier(0.1, red, 1.0, green)

/\* Abscissas must be in the [0, 1] range or
 the curve is not a function of time. \*/
cubic-bezier(2.45, 0.6, 4, 0.1)

/\* The two points must be defined, there is no default value. \*/
cubic-bezier(0.3, 2.1)

/\* Abscissas must be in the [0, 1] range or
 the curve is not a function of time. \*/
cubic-bezier(-1.9, 0.3, -0.2, 2.1)
```

### Using the steps() function

These easing functions are valid:

```css
/\* There are 5 treads, the last one happens
 right before the end of the animation. \*/
steps(5, end)

/\* A two-step staircase, the first one happening
 at the start of the animation. \*/
steps(2, start)

/\* The second parameter is optional. \*/
steps(2)
```

**Note:** If the animation contains multiple stops, then the steps specified in the `steps()` function will apply to each section. Therefore, an animation with three segments and `steps(2)` will contain 6 steps in total, 2 per segment.

These easing functions are invalid:

```css
/\* The first parameter must be an <integer> and
 cannot be a real value, even if it is equal to one. \*/
steps(2.0, jump-end)

/\* The amount of steps must be non-negative. \*/
steps(-3, start)

/\* There must be at least one step. \*/
steps(0, jump-none)
```

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

| Specification |
| --- |
| CSS Easing Functions Level 1 # easing-functions |

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

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

See also
--------

* CSS animations
* CSS transitions
* cubic-bezier
* `linear()` easing generator


mask-border-outset - CSS: Cascading Style Sheets

mask-border-outset
==================

The **`mask-border-outset`** CSS property specifies the distance by which an element's mask border is set out from its border box.

Syntax
------

```css
/\* <length> value \*/
mask-border-outset: 1rem;

/\* <number> value \*/
mask-border-outset: 1.5;

/\* top and bottom | left and right \*/
mask-border-outset: 1 1.2;

/\* top | left and right | bottom \*/
mask-border-outset: 30px 2 45px;

/\* top | right | bottom | left \*/
mask-border-outset: 7px 12px 14px 5px;

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

The `mask-border-outset` property may be specified as one, two, three, or four values. Each value is a `<length>` or `<number>`. Negative values are invalid.

* When **one** value is specified, it applies the same outset to **all four sides**.
* When **two** values are specified, the first outset applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first outset applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the outsets apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<length>`

The size of the mask border outset as a dimension.

`<number>`

The size of the mask border outset as a multiple of the corresponding `border-width`.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| 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 relative lengths converted into absolute lengths |
| Animation type | discrete |

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

mask-border-outset =
  [ <length> | <number> ]{1,4}

```

Examples
--------

### Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to move the mask away from the inner edge of the element's border box — you can use it to make the mask start from part way across the border, rather than the inside of it.

```css
mask-border-outset: 1rem;
```

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

```css
-webkit-mask-box-image-outset: 1rem;
```

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

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-repeat`
* `mask-border-source`
* `mask-border-width`


::first-letter - CSS: Cascading Style Sheets

::first-letter
==============

The **`::first-letter`** CSS pseudo-element applies styles to the first letter of the first line of a block container, but only when not preceded by other content (such as images or inline tables).

Try it
------

The first letter of an element is not always trivial to identify:

* Punctuation that precedes or immediately follows the first letter is included in the match. Punctuation includes any Unicode character defined in the *open* (Ps), *close* (Pe), *initial quote* (Pi), *final quote* (Pf), and *other punctuation* (Po) classes.
* Some languages have digraphs that are always capitalized together, like the `IJ` in Dutch. In these cases, both letters of the digraph should be matched by the `::first-letter` pseudo-element.
* A combination of the `::before` pseudo-element and the `content` property may inject some text at the beginning of the element. In that case, `::first-letter` will match the first letter of this generated content.

**Note:** CSS introduced the `::first-letter` notation (with two colons) to distinguish pseudo-classes from pseudo-elements. For backward compatibility, browsers also accept `:first-letter`, introduced earlier.

Browser support for digraphs such as `IJ` in Dutch is poor. Check the compatibility table below to see the current state of support.

Allowable properties
--------------------

Only a small subset of CSS properties can be used with the `::first-letter` pseudo-element:

* All font properties: `font`, `font-style`, `font-feature-settings`, `font-kerning`, `font-language-override`, `font-stretch`, `font-synthesis`, `font-variant`, `font-variant-alternates`, `font-variant-caps`, `font-variant-east-asian`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`, `font-weight`, `font-size`, `font-size-adjust`, `line-height` and `font-family`
* All background properties: `background`, `background-color`, `background-image`, `background-clip`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* All margin properties: `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* All padding properties: `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* All border properties: the shorthands `border`, `border-style`, `border-color`, `border-width`, `border-radius`, `border-image`, and the longhands properties
* The `color` property
* The `text-decoration`, `text-shadow`, `text-transform`, `letter-spacing`, `word-spacing` (when appropriate), `line-height`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, `box-shadow`, `float`, `vertical-align` (only if `float` is `none`) CSS properties
Syntax
------

```css
::first-letter {
  /\* ... \*/
}
```

Examples
--------

### Simple drop cap

In this example we will use the `::first-letter` pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the `<h2>`.

#### HTML

```html
<h2>My heading</h2>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
```

#### CSS

```css
p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}
```

#### Result

### Effect on special punctuation and non-Latin characters

This example illustrates the effect of `::first-letter` on special punctuation and non-Latin characters.

#### HTML

```html
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>
```

#### CSS

```css
p::first-letter {
  color: red;
  font-size: 150%;
}
```

#### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |

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

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

See also
--------

* `::first-line`


<named-color> - CSS: Cascading Style Sheets

<named-color>
=============

The **`<named-color>`** CSS data type is the name of a color, such as `red`, `blue`, `black`, or `lightseagreen`. Syntactically, a `<named-color>` is an `<ident>`.

A `<named-color>` value can be used anywhere a `<color>` can be used.

Syntax
------

```css
color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;
```

### Value

Named colors consists of standard colors, the `transparent` and `currentcolor` keywords.

#### Standard colors

Basic colors have standard, easy-to-remember names:

| Keyword | RGB hex value | Sample |
| --- | --- | --- |
| `black` | `#000000` |  |
| `silver` | `#c0c0c0` |  |
| `gray` | `#808080` |  |
| `white` | `#ffffff` |  |
| `maroon` | `#800000` |  |
| `red` | `#ff0000` |  |
| `purple` | `#800080` |  |
| `fuchsia` | `#ff00ff` |  |
| `green` | `#008000` |  |
| `lime` | `#00ff00` |  |
| `olive` | `#808000` |  |
| `yellow` | `#ffff00` |  |
| `navy` | `#000080` |  |
| `blue` | `#0000ff` |  |
| `teal` | `#008080` |  |
| `aqua` | `#00ffff` |  |

In addition to these 16 colors, about 150 other colors have a keyword associated to them:

| Keyword | RGB hex value | Sample |
| --- | --- | --- |
| `aliceblue` | `#f0f8ff` |  |
| `antiquewhite` | `#faebd7` |  |
| `aqua` | `#00ffff` |  |
| `aquamarine` | `#7fffd4` |  |
| `azure` | `#f0ffff` |  |
| `beige` | `#f5f5dc` |  |
| `bisque` | `#ffe4c4` |  |
| `black` | `#000000` |  |
| `blanchedalmond` | `#ffebcd` |  |
| `blue` | `#0000ff` |  |
| `blueviolet` | `#8a2be2` |  |
| `brown` | `#a52a2a` |  |
| `burlywood` | `#deb887` |  |
| `cadetblue` | `#5f9ea0` |  |
| `chartreuse` | `#7fff00` |  |
| `chocolate` | `#d2691e` |  |
| `coral` | `#ff7f50` |  |
| `cornflowerblue` | `#6495ed` |  |
| `cornsilk` | `#fff8dc` |  |
| `crimson` | `#dc143c` |  |
| `cyan` | `#00ffff` (synonym of `aqua`) |  |
| `darkblue` | `#00008b` |  |
| `darkcyan` | `#008b8b` |  |
| `darkgoldenrod` | `#b8860b` |  |
| `darkgray` | `#a9a9a9` |  |
| `darkgreen` | `#006400` |  |
| `darkgrey` | `#a9a9a9` |  |
| `darkkhaki` | `#bdb76b` |  |
| `darkmagenta` | `#8b008b` |  |
| `darkolivegreen` | `#556b2f` |  |
| `darkorange` | `#ff8c00` |  |
| `darkorchid` | `#9932cc` |  |
| `darkred` | `#8b0000` |  |
| `darksalmon` | `#e9967a` |  |
| `darkseagreen` | `#8fbc8f` |  |
| `darkslateblue` | `#483d8b` |  |
| `darkslategray` | `#2f4f4f` |  |
| `darkslategrey` | `#2f4f4f` |  |
| `darkturquoise` | `#00ced1` |  |
| `darkviolet` | `#9400d3` |  |
| `deeppink` | `#ff1493` |  |
| `deepskyblue` | `#00bfff` |  |
| `dimgray` | `#696969` |  |
| `dimgrey` | `#696969` |  |
| `dodgerblue` | `#1e90ff` |  |
| `firebrick` | `#b22222` |  |
| `floralwhite` | `#fffaf0` |  |
| `forestgreen` | `#228b22` |  |
| `fuchsia` | `#ff00ff` |  |
| `gainsboro` | `#dcdcdc` |  |
| `ghostwhite` | `#f8f8ff` |  |
| `gold` | `#ffd700` |  |
| `goldenrod` | `#daa520` |  |
| `gray` | `#808080` |  |
| `green` | `#008000` |  |
| `greenyellow` | `#adff2f` |  |
| `grey` | `#808080` (synonym of `gray`) |  |
| `honeydew` | `#f0fff0` |  |
| `hotpink` | `#ff69b4` |  |
| `indianred` | `#cd5c5c` |  |
| `indigo` | `#4b0082` |  |
| `ivory` | `#fffff0` |  |
| `khaki` | `#f0e68c` |  |
| `lavender` | `#e6e6fa` |  |
| `lavenderblush` | `#fff0f5` |  |
| `lawngreen` | `#7cfc00` |  |
| `lemonchiffon` | `#fffacd` |  |
| `lightblue` | `#add8e6` |  |
| `lightcoral` | `#f08080` |  |
| `lightcyan` | `#e0ffff` |  |
| `lightgoldenrodyellow` | `#fafad2` |  |
| `lightgray` | `#d3d3d3` |  |
| `lightgreen` | `#90ee90` |  |
| `lightgrey` | `#d3d3d3` |  |
| `lightpink` | `#ffb6c1` |  |
| `lightsalmon` | `#ffa07a` |  |
| `lightseagreen` | `#20b2aa` |  |
| `lightskyblue` | `#87cefa` |  |
| `lightslategray` | `#778899` |  |
| `lightslategrey` | `#778899` |  |
| `lightsteelblue` | `#b0c4de` |  |
| `lightyellow` | `#ffffe0` |  |
| `lime` | `#00ff00` |  |
| `limegreen` | `#32cd32` |  |
| `linen` | `#faf0e6` |  |
| `magenta` | `#ff00ff` (synonym of `fuchsia`) |  |
| `maroon` | `#800000` |  |
| `mediumaquamarine` | `#66cdaa` |  |
| `mediumblue` | `#0000cd` |  |
| `mediumorchid` | `#ba55d3` |  |
| `mediumpurple` | `#9370db` |  |
| `mediumseagreen` | `#3cb371` |  |
| `mediumslateblue` | `#7b68ee` |  |
| `mediumspringgreen` | `#00fa9a` |  |
| `mediumturquoise` | `#48d1cc` |  |
| `mediumvioletred` | `#c71585` |  |
| `midnightblue` | `#191970` |  |
| `mintcream` | `#f5fffa` |  |
| `mistyrose` | `#ffe4e1` |  |
| `moccasin` | `#ffe4b5` |  |
| `navajowhite` | `#ffdead` |  |
| `navy` | `#000080` |  |
| `oldlace` | `#fdf5e6` |  |
| `olive` | `#808000` |  |
| `olivedrab` | `#6b8e23` |  |
| `orange` | `#ffa500` |  |
| `orangered` | `#ff4500` |  |
| `orchid` | `#da70d6` |  |
| `palegoldenrod` | `#eee8aa` |  |
| `palegreen` | `#98fb98` |  |
| `paleturquoise` | `#afeeee` |  |
| `palevioletred` | `#db7093` |  |
| `papayawhip` | `#ffefd5` |  |
| `peachpuff` | `#ffdab9` |  |
| `peru` | `#cd853f` |  |
| `pink` | `#ffc0cb` |  |
| `plum` | `#dda0dd` |  |
| `powderblue` | `#b0e0e6` |  |
| `purple` | `#800080` |  |
| `rebeccapurple` | `#663399` |  |
| `red` | `#ff0000` |  |
| `rosybrown` | `#bc8f8f` |  |
| `royalblue` | `#4169e1` |  |
| `saddlebrown` | `#8b4513` |  |
| `salmon` | `#fa8072` |  |
| `sandybrown` | `#f4a460` |  |
| `seagreen` | `#2e8b57` |  |
| `seashell` | `#fff5ee` |  |
| `sienna` | `#a0522d` |  |
| `silver` | `#c0c0c0` |  |
| `skyblue` | `#87ceeb` |  |
| `slateblue` | `#6a5acd` |  |
| `slategray` | `#708090` |  |
| `slategrey` | `#708090` |  |
| `snow` | `#fffafa` |  |
| `springgreen` | `#00ff7f` |  |
| `steelblue` | `#4682b4` |  |
| `tan` | `#d2b48c` |  |
| `teal` | `#008080` |  |
| `thistle` | `#d8bfd8` |  |
| `tomato` | `#ff6347` |  |
| `transparent` | See transparent. |  |
| `turquoise` | `#40e0d0` |  |
| `violet` | `#ee82ee` |  |
| `wheat` | `#f5deb3` |  |
| `white` | `#ffffff` |  |
| `whitesmoke` | `#f5f5f5` |  |
| `yellow` | `#ffff00` |  |
| `yellowgreen` | `#9acd32` |  |
|

Initially, in CSS Level 1, only 16 basic colors were defined, with `orange` added in CSS Level 2. Web designers found this list too short, and browser vendors added numerous names for colors based on the X11 color names. In SVG 1.0, then in CSS Colors Level 3, these names got standardized, formally defined, and made uniform (some had different spellings that are now aliases). They are called *extended color keywords*, *X11 colors*, or *SVG colors*.

In CSS Colors Level 4, an additional color, `rebeccapurple` was added to honor web pioneer Eric Meyer.

### transparent

The `transparent` keyword represents a fully transparent color. This makes the background behind the colored item completely visible. Technically, `transparent` is a shortcut for `rgb(0 0 0 / 0%)`.

To prevent unexpected behavior, such as in a `<gradient>`, the current CSS spec states that `transparent` should be calculated in the alpha-premultiplied color space. However, be aware that older browsers may treat it as black with an alpha value of `0`.

The `transparent` keyword wasn't a true color in CSS Level 2 (Revision 1). It was a special keyword that could be used instead of a regular `<color>` value on two CSS properties: `background` and `border`. It was essentially added to allow developers to override an inherited solid color. With the advent of alpha channels in CSS Colors Level 3, `transparent` was redefined as a true color. It can now be used wherever a `<color>` value can be used.

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

All names specify a color in the sRGB color space. Although the names more or less describe their respective colors, they are essentially artificial, without a strict rationale behind the terms used.

The color keywords all represent plain, solid colors without transparency.

Several keywords are aliases for each other:

* `aqua` / `cyan`
* `fuchsia` / `magenta`
* `darkgray` / `darkgrey`
* `darkslategray` / `darkslategrey`
* `dimgray` / `dimgrey`
* `lightgray` / `lightgrey`
* `lightslategray` / `lightslategrey`
* `gray` / `grey`
* `slategray` / `slategrey`

Though many keywords have been adapted from X11, their RGB values may differ from the corresponding color on X11 systems since manufacturers sometimes tailor X11 colors to their specific hardware.

Examples
--------

### Using named colors

#### HTML

```html
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
```

#### CSS

```css
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
```

#### Result

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

| Specification |
| --- |
| CSS Color Module Level 4 # named-colors |

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

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

See also
--------

* `<color>`: the data type of whose definition `<named-color>` is a constituent part.


scroll-behavior - CSS: Cascading Style Sheets

scroll-behavior
===============

The **`scroll-behavior`** CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

Try it
------

Note that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead. This property specified on the `body` element will *not* propagate to the viewport.

User agents are allowed to ignore this property.

Syntax
------

```css
/\* Keyword values \*/
scroll-behavior: auto;
scroll-behavior: smooth;

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

The `scroll-behavior` property is specified as one of the keyword values listed below.

### Values

`auto`

The scrolling box scrolls instantly.

`smooth`

The scrolling box scrolls in a smooth fashion using a user-agent-defined easing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scrolling boxes |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

scroll-behavior =
  auto    |
  smooth

```

Examples
--------

### Setting smooth scroll behavior

#### HTML

```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>
```

#### CSS

```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```

#### Result

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

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


:is() - CSS: Cascading Style Sheets

:is()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
The **`:is()`** CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

**Note:** Originally named `:matches()` (and `:any()`), this selector was renamed to `:is()` in CSSWG issue #3258.

Try it
------

Pseudo-elements are not valid in the selector list for `:is()`.

### Difference between :is() and :where()

The difference between the two is that `:is()` counts towards the specificity of the overall selector (it takes the specificity of its most specific argument), whereas `:where()` has a specificity value of 0. This is demonstrated by the example on the `:where()` reference page.

### Forgiving Selector Parsing

The specification defines `:is()` and `:where()` as accepting a forgiving selector list.

In CSS when using a selector list, if any of the selectors are invalid then the whole list is deemed invalid. When using `:is()` or `:where()` instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.

```css
:is(:valid, :unsupported) {
  /\* … \*/
}
```

Will still parse correctly and match `:valid` even in browsers which don't support `:unsupported`, whereas:

```css
:valid,
:unsupported {
  /\* … \*/
}
```

Will be ignored in browsers which don't support `:unsupported` even if they support `:valid`.

Examples
--------

### Simplifying list selectors

The `:is()` pseudo-class can greatly simplify your CSS selectors. For example, take the following CSS:

```css
/\* 3-deep (or more) unordered lists use a square \*/
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}
```

You can replace it with:

```css
/\* 3-deep (or more) unordered lists use a square \*/
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}
```

### Simplifying section selectors

The `:is()` pseudo-class is particularly useful when dealing with HTML sections and headings. Since `<section>`, `<article>`, `<aside>`, and `<nav>` are commonly nested together, without `:is()`, styling them to match one another can be tricky.

For example, without `:is()`, styling all the h1 elements at different depths could be very complicated:

```css
/\* Level 0 \*/
h1 {
  font-size: 30px;
}

/\* Level 1 \*/
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/\* Level 2 \*/
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/\* Level 3 \*/
/\* don't even think about it! \*/
```

Using `:is()`, though, it's much easier:

```css
/\* Level 0 \*/
h1 {
  font-size: 30px;
}
/\* Level 1 \*/
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/\* Level 2 \*/
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/\* Level 3 \*/
:is(section, article, aside, nav)
 :is(section, article, aside, nav)
 :is(section, article, aside, nav)
 h1 {
  font-size: 15px;
}
```

### :is() does not select pseudo-elements

The `:is()` pseudo-class does not match pseudo-elements. So rather than this:

```css
some-element:is(::before, ::after) {
  display: block;
}
```

or this:

```css
:is(some-element::before, some-element::after) {
  display: block;
}
```

instead do:

```css
some-element::before,
some-element::after {
  display: block;
}
```

Syntax
------

```css
:is(<forgiving-selector-list>) {
  /\* ... \*/
}
```

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

| Specification |
| --- |
| Selectors Level 4 # matches-pseudo |

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

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

See also
--------

* `:where()` - Like `:is()`, but with 0 specificity.
* Selector list
* Web components