view-timeline-name - CSS: Cascading Style Sheets

view-timeline-name
==================

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

The **`view-timeline-name`** CSS property is used to define the name of a *named view progress timeline*, which is progressed through based on the change in visibility of an element (known as the *subject*) inside a scrollable element (*scroller*). `view-timeline` is set on the subject.

 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.
 The name is then referenced in an `animation-timeline` declaration to indicate the element that will be animated as the timeline progresses. This can be the subject element, but it doesn't have to be — you can animate a different element as the subject moves through the scrolling area.

**Note:** If the element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.

The `view-timeline-axis` and `view-timeline-name` properties can also be set using the `view-timeline` shorthand property.

Syntax
------

```css
view-timeline-name: none;
view-timeline-name: --custom_name_for_timeline;
```

### Values

Allowed values for `view-timeline-name` are:

`none`

The timeline has no name.

`<dashed-ident>`

An arbitrary custom identifier defining a name for a view progress timeline, which can then be referenced in an `animation-timeline` property.

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

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | `none` or an ordered list of identifiers |
| Animation type | Not animatable |

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

view-timeline-name =
  [ none | <dashed-ident> ]#

```

Examples
--------

### Creating 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 `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.

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

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

| Specification |
| --- |
| Scroll-driven Animations # view-timeline-name |

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

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

See also
--------

* `animation-timeline`
* `timeline-scope`
* `view-timeline`, `view-timeline-axis`
* CSS scroll-driven animations


box-shadow - CSS: Cascading Style Sheets

box-shadow
==========

The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

Try it
------

The `box-shadow` property enables you to cast a drop shadow from the frame of almost any element. If a `border-radius` is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

Box-shadow generator is an interactive tool allowing you to generate a `box-shadow`.

Syntax
------

```css
/\* Keyword values \*/
box-shadow: none;

/\* A color and two length values \*/
/\* <color> | <length> | <length> \*/
box-shadow: red 60px -16px;

/\* Three length values and a color \*/
/\* <length> | <length> | <length> | <color> \*/
box-shadow: 10px 5px 5px black;

/\* Four length values and a color \*/
/\* <length> | <length> | <length> | <length> | <color> \*/
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

/\* inset, length values, and a color \*/
/\* <inset> | <length> | <length> | <color> \*/
box-shadow: inset 5em 1em gold;

/\* Any number of shadows, separated by commas \*/
box-shadow:
  3px 3px red inset,
  -1em 0 0.4em olive;

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

Specify a single box-shadow using:

* Two, three, or four `<length>` values.
    + If only two values are given, they are interpreted as `<offset-x>` and `<offset-y>` values.
    + If a third value is given, it is interpreted as a `<blur-radius>`.
    + If a fourth value is given, it is interpreted as a `<spread-radius>`.
* Optionally, the `inset` keyword.
* Optionally, a `<color>` value.

To specify multiple shadows, provide a comma-separated list of shadows.

### Values

`<color>` Optional

 Specifies color for the shadow. See `<color>` values for possible keywords and notations.
 If not specified, the value of the `color` property defined in the parent element is used.

`<length>`

Specifies the offset length of the shadow. This parameter accepts two, three, or four values. Third and fourth values are optional. They are interpreted as follows:

* If two values are specified, they are interpreted as `<offset-x>` (horizontal offset) and `<offset-y>` (vertical offset) values. Negative `<offset-x>` value places the shadow to the left of the element. Negative `<offset-y>` value places the shadow above the element.
If not specified, the value of `0` is used for the missing length. If both `<offset-x>` and `<offset-y>` are set to `0`, the shadow is placed behind the element (and may generate a blur effect if `<blur-radius>` and/or `<spread-radius>` is set).
* If three values are specified, the third value is interpreted as `<blur-radius>`. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be set to`0` (meaning that the shadow's edge will be sharp). The specification does not include an exact algorithm for how the blur radius should be calculated; however, it does elaborate as follows:

>
> …for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow's edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
>
>
>
* If four values are specified, the fourth value is interpreted as `<spread-radius>`. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be set to `0` (that is, the shadow will be the same size as the element).

`inset` Optional

Changes the shadow from an outer box-shadow to an inner box-shadow (as if the content is pressed into the box). Inset shadows are drawn inside the box's border (even if the border is transparent), and they appear above the background but below the content. By default, the shadow behaves like a drop shadow, giving the appearance that the box is elevated above its content. This is the default behavior when `inset` is not specified.

### Interpolation

When animating shadows, such as when multiple shadow values on a box transition to new values on hover, the values are interpolated. Interpolation determines intermediate values of properties, such as the blur radius, spread radius, and color, as shadows transition. For each shadow in a list of shadows, the color, x, y, blur, and spread transition; the color as `<color>`, and the other values as `<length>`s.

In interpolating multiple shadows between two comma-separated lists of multiple box shadows, the shadows are paired, in order, with interpolation occurring between paired shadows. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is `transparent`, and X, Y, and blur are `0`, with the inset, or lack of inset, being set to match. If in any pair of shadows, one has `inset` set and the other does not, the entire shadow list is uninterpolated; the shadows will change to the new values without an animating effect.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | any length made absolute; any specified color computed; otherwise as specified |
| Animation type | a shadow list |

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

box-shadow =
  <spread-shadow>#

<spread-shadow> =
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?

```

Examples
--------

### Setting three shadows

In this example, we include three shadows: an inset shadow, a regular drop shadow, and a 2px shadow that creates a border effect (we could have used an `outline` instead for that third shadow).

#### HTML

```html
<blockquote>
  <q>
    You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.
  </q>
  <p>— Maya Angelou</p>
</blockquote>
```

#### CSS

```css
blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgb(0 200 0 / 30%),
    0 0 0 2px white,
    0.3em 0.3em 1em rgb(200 0 0 / 60%);
}
```

#### Result

### Setting zero for offset and blur

When the `x-offset`, `y-offset`, and `blur` are all zero, the box shadow will be a solid-colored outline of equal-size on all sides. The shadows are drawn back to front, so the first shadow sits on top of subsequent shadows. When the `border-radius` is set to 0, as is the default, the corners of the shadow will be, well, corners. Had we put in a `border-radius` of any other value, the corners would have been rounded.

We added a margin the size of the widest box-shadow to ensure the shadow doesn't overlap adjacent elements or go beyond the border of the containing box. A box-shadow does not impact box model dimensions.

#### HTML

```html
<div><p>Hello World</p></div>
```

#### CSS

```css
p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}
```

#### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # box-shadow |

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

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

See also
--------

* The `<color>` data type (for specifying the shadow color)
* `text-shadow`
* `drop-shadow()`
* Applying color to HTML elements using CSS


text-decoration-thickness - CSS: Cascading Style Sheets

text-decoration-thickness
=========================

The **`text-decoration-thickness`** CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

Try it
------

Syntax
------

```css
/\* Single keyword \*/
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/\* length \*/
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/\* percentage \*/
text-decoration-thickness: 10%;

/\* Global values \*/
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;
```

### Values

`auto`

The browser chooses an appropriate width for the text decoration line.

`from-font`

If the font file includes information about a preferred thickness, use that value. If the font file doesn't include this information, behave as if `auto` was set, with the browser choosing an appropriate thickness.

`<length>`

Specifies the thickness of the text decoration line as a `<length>`, overriding the font file suggestion or the browser default.

`<percentage>`

Specifies the thickness of the text decoration line as a `<percentage>` of **1em** in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to the font size of the element itself |
| Computed value | as specified |
| Animation type | by computed value type |

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

text-decoration-thickness =
  auto                 |
  from-font            |
  <length-percentage>

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

```

Examples
--------

### Varying thickness

#### HTML

```html
<p class="thin">Here's some text with a 1px red underline.</p>
<p class="thick">This one has a 5px red underline.</p>
<p class="shorthand">This uses the equivalent shorthand.</p>
```

#### CSS

```css
.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}
```

#### Results

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-width-property |

**Note:** The property used to be called `text-decoration-width`, but was updated in 2019 to `text-decoration-thickness`.

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

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

See also
--------

* `text-decoration`
* `text-underline-offset`


-webkit-mask-composite - CSS: Cascading Style Sheets

-webkit-mask-composite
======================

**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-mask-composite`** property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the `-webkit-mask-image` property.

**Note:** There is a standardized `mask-composite` property covering parts of this non-standard property using different keywords.

Syntax
------

```css
/\* Keyword values \*/
-webkit-mask-composite: clear;
-webkit-mask-composite: copy;
-webkit-mask-composite: source-over;
-webkit-mask-composite: source-in;
-webkit-mask-composite: source-out;
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in;
-webkit-mask-composite: destination-out;
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor;

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

### Values

`clear`

Overlapping pixels in the source mask image and the destination mask image are cleared.

`copy`

The source mask image replaces the destination mask image.

`source-over`

The source mask image is rendered over the destination mask image.

`source-in`

Overlapping pixels in the source mask image and the destination mask image are replaced by the pixels of the source mask image; all other pixels are cleared.

`source-out`

Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered.

`source-atop`

The pixels of the destination mask image are rendered. The pixels of the source mask image are rendered only if they overlap a nontransparent portion of the destination mask image. This causes the source mask image to have no effect.

`destination-over`

The destination mask image is rendered over the source mask image.

`destination-in`

Overlapping pixels in the source mask image and the destination mask image remain the pixels of the destination mask image; all other pixels are cleared.

`destination-out`

Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered.

`destination-atop`

The pixels of the source mask image are rendered. The pixels of the destination mask image are rendered only if they overlap a nontransparent portion of the destination mask image. This causes the destination mask image to have no effect.

`xor`

Overlapping pixels in the source mask image and the destination mask image become fully transparent if they are both fully opaque.

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

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

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

-webkit-mask-composite =
  <composite-style>#
```

Examples
--------

### Compositing with XOR

```css
.example {
  -webkit-mask-image: url(mask1.png), url("mask2.png");
  -webkit-mask-composite: xor, source-over;
}
```

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

Not part of any standard. This property is specified as `mask-composite` using different values.

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

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

See also
--------

* `mask-composite`


<dimension> - CSS: Cascading Style Sheets

<dimension>
===========

The **`<dimension>`** CSS data type represents a `<number>` with a unit attached to it, for example `10px`.

CSS uses dimensions to specify distances (`<length>`), durations (`<time>`), frequencies (`<frequency>`), resolutions (`<resolution>`), and other quantities.

Syntax
------

The syntax of `<dimension>` is a `<number>` immediately followed by a unit which is an identifier. Unit identifiers are case insensitive.

Examples
--------

### Valid dimensions
```

12px      12 pixels
1rem      1 rem
1.2pt     1.2 points
2200ms    2200 milliseconds
5s        5 seconds
200hz     200 Hertz
200Hz     200 Hertz (values are case insensitive)
```

### Invalid dimensions
```

12 px       The unit must come immediately after the number.
12"px"      Units are identifiers and therefore unquoted.
3sec        The seconds unit is abbreviated "s" not "sec".
```

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

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

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

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

See also
--------

* CSS data types
* Learn to style HTML using CSS
* CSS distances (`<length>`), durations (`<time>`), frequencies (`<frequency>`), and resolutions (`<resolution>`)


:link - CSS: Cascading Style Sheets

:link
=====

The **`:link`** CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited `<a>` or `<area>` element that has an `href` attribute.

Try it
------

Styles defined by the `:link` and `:visited` pseudo-classes can be overridden by any subsequent user-action pseudo-classes (`:hover` or `:active`) that have at least equal specificity. To style links appropriately, put the `:link` rule before all other link-related rules, as defined by the *LVHA-order*: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive.

**Note:** Use `:any-link` to select an element independent of whether it has been visited or not.

Syntax
------

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

Examples
--------

By default, most browsers apply a special `color` value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the `background-color` values are likely to remain, as most browsers do not set that property on visited links by default.

### HTML

```html
<a href="#ordinary-target">This is an ordinary link.</a><br />
<a href="">You've already visited this link.</a><br />
<a>Placeholder link (won't get styled)</a>
```

### CSS

```css
a:link {
  background-color: gold;
  color: green;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

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

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

See also
--------

* Link-related pseudo-classes: `:visited`, `:hover`, `:active`


perspective-origin - CSS: Cascading Style Sheets

perspective-origin
==================

The **`perspective-origin`** CSS property determines the position at which the viewer is looking. It is used as the *vanishing point* by the `perspective` property.

Try it
------

The **`perspective-origin`** and `perspective` properties are attached to the parent of a child transformed in 3-dimensional space, unlike the `perspective()` transform function which is placed on the element being transformed.

Syntax
------

```css
/\* One-value syntax \*/
perspective-origin: x-position;

/\* Two-value syntax \*/
perspective-origin: x-position y-position;

/\* When both x-position and y-position are keywords,
 the following is also valid \*/
perspective-origin: y-position x-position;

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

### Values

*x-position*

Indicates the position of the abscissa of the *vanishing point*. It can have one of the following values:

* `<length-percentage>` indicating the position as an absolute length value or relative to the width of the element. The value may be negative.
* `left`, a keyword being a shortcut for the `0` length value.
* `center`, a keyword being a shortcut for the `50%` percentage value.
* `right`, a keyword being a shortcut for the `100%` percentage value.

*y-position*

Indicates the position of the ordinate of the *vanishing point*. It can have one of the following values:

* `<length-percentage>` indicating the position as an absolute length value or relative to the height of the element. The value may be negative.
* `top`, a keyword being a shortcut for the `0` length value.
* `center`, a keyword being a shortcut for the `50%` percentage value.
* `bottom`, a keyword being a shortcut for the `100%` percentage value.

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

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

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

perspective-origin =
  <position>

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

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

```

Examples
--------

### Changing the perspective origin

An example showing how to change `perspective-origin` is given in Using CSS transforms > Changing the perspective origin.

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-origin-property |

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

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

See also
--------

* Using CSS Transforms
* `transform-style`
* `<transform-function>`
* `perspective`
* `transform: perspective()` function


CSS scroll-driven animations - CSS: Cascading Style Sheets

CSS scroll-driven animations
============================

The **CSS scroll-driven animations** module provides functionality that builds on top of the CSS animations module and Web Animations API. It allows you to animate property values based on a progression along a scroll-based timeline instead of the default time-based document timeline. This means that you can animate an element by scrolling a scrollable element, rather than just by the passing of time.

There are two types of scroll-based timelines:

* *scroll progress timeline*: You progress this timeline by scrolling a scrollable element (*scroller*) from top to bottom (or left to right) and back again. The position in the scroll range is converted into a percentage of progress — 0% at the start and 100% at the end.
* *view progress timeline*: You progress this timeline 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 as a percentage of progress — 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.

When one of these two timelines is applied to an animated element, the animation progresses along that timeline instead of following the default time-based timeline.

It is possible to adjust the effective placement of the animation along the scroll progress and view progress timelines, i.e., you can define the position at which the animation starts and ends. This can be done in a couple of different ways:

* Start and end animation range values can be applied to the animation to adjust the position of the animation's starting and ending position along the timeline.
* View progress timelines can have a start and/or end inset (or outset) applied to them to adjust the position of the scrollport (see Scroll container for more details) in which the subject element is deemed to be visible. Put another way, this allows you to specify start and/or end inset (or outset) values that offset the position of the timeline itself.
Scroll-driven animations in action
----------------------------------

You can find several tools and demos showing scroll-driven animations in action at Scroll-driven Animations tools and demos.

Reference
---------

### Properties

Set the timeline that will control the progress of an animation, and set its attachment range along that timeline:

* `animation-timeline`
* `animation-range`
* `animation-range-start`
* `animation-range-end`

Define *named scroll progress timelines*:

* `scroll-timeline`
* `scroll-timeline-axis`
* `scroll-timeline-name`

Define *named view progress timelines*:

* `view-timeline`
* `view-timeline-axis`
* `view-timeline-inset`
* `view-timeline-name`

Modify timeline scope:

* `timeline-scope`
### At-rules

CSS scroll-driven animations adds the ability to include `<timeline-range-name>`s in `@keyframes` blocks, to place keyframes at specific positions inside named timeline ranges.

### Functions

Possible values of the `animation-timeline` property for defining *anonymous scroll progress timelines* and *anonymous view progress timelines* (i.e. implicitly defined by the browser rather than being explicitly named and defined using the `scroll-timeline-*` and `view-timeline-*` properties):

* `scroll()`
* `view()`
### JavaScript features

* `Element.animate()`
* `AnimationTimeline`
* `ScrollTimeline`
* `ViewTimeline`
Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations  |
| CSS Animations Level 2  |
| Web Animations Level 2  |

See also
--------

* Animate elements on scroll with Scroll-driven animations on developer.chrome.com
* CSS animations
* Web Animations API


Visual formatting model - CSS: Cascading Style Sheets

Visual formatting model
=======================

In CSS, the **visual formatting model** describes how user agents take the document tree, and process and display it for visual media. This includes continuous media such as a computer screen and paged media such as a book or document printed by browser print functions. Most of the information applies equally to continuous and paged media.

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

* Box dimensions and type.
* Positioning scheme (normal flow, float, and absolute positioning).
* Relationships between elements in the document tree.
* External information (e.g., viewport size, intrinsic dimensions of images, etc.).

Much of the information about the visual formatting model is defined in CSS2, however, various level 3 specifications have added to this information. When reading specifications you will often find references to the model as defined in CSS2, so an understanding of the model and the terms used to describe it in CSS2 is valuable when reading other layout specifications.

In this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on MDN for further details.

The role of the viewport
------------------------

In continuous media, the viewport is the viewing area of the browser window. User agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device.

If the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. We most often see this as scrolling in the **block dimension** — vertically in a horizontal, top-to-bottom language. However, you might design something that requires scrolling in the **inline dimension** too.

Box generation
--------------

**Box generation** is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect their visual formatting. The type of the box generated depends on the value of the CSS `display` property.

Initially defined in CSS2, the `display` property is extended in the CSS Display Module Level 3. In addition, some of the terminologies around the display have been updated and clarified in the years since CSS2.

CSS takes your source document and renders it onto a canvas. To do this, it generates an intermediary structure, the **box tree**, which represents the formatting structure of the rendered document. Each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.

Then, for each element, CSS generates zero or more boxes as specified by that element's `display` property value.

**Note:** Boxes are often referred to by their display type — e.g. a box generated by an element with `display: block` is called a "block box" or just a "block". Note however that block boxes, block-level boxes and box containers are all subtly different; see the Block boxes section below for more details.

### The principal box

When an element generates one or more boxes, one of them is the **principal box**, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme.

Some elements may generate additional boxes in addition to the principal box, for example `display: list-item` generates more than one box (e.g. a **principal block box** and a **child marker box**). And some values (such as `none` or `contents`) cause the element and/or its descendants to not generate any boxes at all.

### Anonymous boxes

An **anonymous box** is created when there is not an HTML element to use for the box. This situation happens when, for example, you declare `display: flex` on a parent element, and directly inside there is a run of text not contained in another element. In order to fix the box tree, an anonymous box is created around that run of text. It will then behave as a flex item, however, it cannot be targeted and styled like a regular box because there is no element to target.

The same thing happens when you have text runs interspersed with block elements. In the next example I have a string inside a `<div>`; in the middle of my string is a `<p>` element containing part of the text.

The string is split into three boxes in the box tree. The part of the string before the paragraph element is wrapped in an anonymous box, then we have the `<p>`, which generates a box, and then another anonymous box.

Something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by targeting the anonymous box. In my examples, I am using a direct child selector to target the children of the container. This does not change the anonymous boxes, as they are not "elements" as such.

**Inline anonymous boxes** are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with `<em></em>`. This splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the `<em>` element, then a final anonymous inline box. As with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the `<em>` can; they just inherit the styles of their container.

Other formatting contexts also create anonymous boxes. Grid layout behaves in the same way as the flexbox example above, turning strings of text into a grid item with an anonymous box. Multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targeted. Table layout will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with `display: table-row`.

### Line boxes

**Line boxes** are the boxes that wrap each line of text. You can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color.

In the following example, the line boxes following the floated `<div>` are shortened to wrap around the float. The background of the box runs behind the float, as the floated item has been taken out of flow.

Positioning schemes and in-flow and out-of-flow elements
--------------------------------------------------------

In CSS, a box may be laid out according to three positioning schemes — **normal flow**, **floats**, or **absolute positioning**.

### Normal flow

In CSS, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes relative and sticky positioning of block-level and inline-level boxes.

Read more about flow layout in CSS.

### Floats

In the float model, a box is first laid out according to the normal flow, then taken out of the flow and positioned, typically to the left or right. Content may flow along the side of a float.

Find out more about floats.

### Absolute positioning

In the absolute positioning model (which also includes fixed positioning), a box is removed from the normal flow entirely and assigned a position with respect to a containing block (which is the viewport in the case of fixed positioning).

An element is called **out of flow** if it is floated, absolutely positioned, or is the root element. An element is called **in-flow** if it is not out of the flow.

Read about CSS positioned layout.

Formatting contexts and the display property
--------------------------------------------

Boxes can be described as having an **outer display type**, which is `block` or `inline`. This outer display type refers to how the box behaves alongside other elements on the page.

Boxes also have an inner display type, dictating how their children behave. For normal block and inline layout, or normal flow, this display type is `flow`. This means that the child elements will also be either `block` or `inline`.

However, the inner display type might be something like `grid` or `flex`, in which case the direct children will display as a grid, or flex items. In such a case the element is described as creating a grid or flex formatting context. In many ways, this is similar to a block formatting context, however, the children behave as flex or grid items rather than items in normal flow.

The interactions between block-level and inline-level boxes are described in the MDN documentation for `display`.

In addition, the references for specific values of display explain how these formatting contexts work in terms of box layout.

* CSS grid layout
* CSS flexible box layout
* CSS table module
* CSS lists and counters module
### Independent formatting contexts

Elements either participate in the formatting context of their containing block or establish an independent formatting context. A grid container, for example, establishes a new **Grid Formatting Context** for its children.

**Independent formatting contexts** contain floats, and margins do not collapse across formatting context boundaries. Therefore, creating a new block formatting context can ensure that floats and margins remain inside a box. To do this, add `display: flow-root` to the box on which you wish to create a new block formatting context.

The following example shows the effect of `display: flow-root`. The box with the black background appears to wrap round the floated item and text. If you remove `display: flow-root` from the editable CSS the floated item will poke out of the bottom of the box as it is no longer contained.

### Block boxes

In specifications, block boxes, block-level boxes, and block containers are all referred to as **block boxes** in certain places. These things are somewhat different and the term block box should only be used if there is no ambiguity.

#### Block containers

A **block container** either contains only inline-level boxes participating in an inline formatting context, or only block-level boxes participating in a block formatting context. For this reason, we see the behavior explained above, where anonymous boxes are introduced to ensure all of the items can participate in a block or inline formatting context. An element is a block container only if it contains block-level or inline-level boxes.

#### Inline-level and block-level boxes

These are the boxes contained inside the block container that are participating in inline or block layout, respectively.

#### Block boxes

A block box is a block-level box that is also a block container. As described in CSS `display`, it is possible for a box to be a block-level box, but not also a block container (it might be a flex or grid container for example).

See also
--------

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


max-inline-size - CSS: Cascading Style Sheets

max-inline-size
===============

The **`max-inline-size`** CSS property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the `max-width` or the `max-height` property, depending on the value of `writing-mode`.

If the writing mode is vertically oriented, the value of `max-inline-size` relates to the maximal height of the element; otherwise, it relates to the maximal width of the element. A related property is `max-block-size`, which defines the other dimension of the element.

Try it
------

Syntax
------

```css
/\* <length> values \*/
max-inline-size: 300px;
max-inline-size: 25em;

/\* <percentage> values \*/
max-inline-size: 75%;

/\* Keyword values \*/
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content;
max-inline-size: fit-content(20em);

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

### Values

The `max-inline-size` property takes the same values as the `max-width` and `max-height` properties.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | same as `width` and `height` |
| Inherited | no |
| Percentages | inline-size of containing block |
| Computed value | same as `max-width` and `max-height` |
| Animation type | a length, percentage or calc(); |

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

max-inline-size =
  <'max-width'>

```

Examples
--------

### Setting maximum inline size in pixels

#### HTML

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

#### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-inline-size: 200px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `max-width` and `max-height`
* `writing-mode`


::before - CSS: Cascading Style Sheets

::before
========

In CSS, **`::before`** creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the `content` property. It is inline by default.

Try it
------

**Note:** The pseudo-elements generated by `::before` and `::after` are boxes generated as if they were immediate children of the element on which they are applied, or the "originating element," and thus can not apply to *replaced elements*, such as `<img>`, whose content is outside the scope of the CSS formatting model.

Syntax
------

```css
::before {
  content: /\* value \*/;
  /\* properties \*/
}
```

If the `content` property is not specified, has an invalid value, or has `normal` or `none` as a value, then the `::before` pseudo-element is not rendered. It behaves as if `display: none` is set.

**Note:** Selectors Level 3 introduced the double-colon notation `::before` to distinguish pseudo-classes from pseudo-elements. Browsers also accept single-colon notation`:before`, introduced in CSS2.

Examples
--------

### Adding quotation marks

One simple example of using `::before` pseudo-elements is to provide quotation marks. Here we use both `::before` and ``::after`` to insert quotation characters.

#### HTML

```html
<q>Some quotes</q>, he said, <q>are better than none.</q>
```

#### CSS

```css
q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}
```

#### Result

### Decorative example

We can style text or images in the `content` property almost any way we want.

#### HTML

```html
<span class="ribbon">Notice where the orange box is.</span>
```

#### CSS

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

#### Result

### To-do list

In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

#### HTML

```html
<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>
```

#### CSS

```css
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
```

#### JavaScript

```js
const list = document.querySelector("ul");
list.addEventListener(
  "click",
  (ev) => {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);
```

Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the `::before` that has been styled in CSS. Go ahead and get some stuff done.

#### Result

### Special characters

As this is CSS; not HTML, you can **not** use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

#### HTML

```html
<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current="step">Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>
```

#### CSS

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

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::after {
  content: " \21E6"; /\* Hexadecimal for Unicode Leftwards white arrow\*/
  display: inline;
}
```

#### Result

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

Using a `::before` pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

See also
--------

* `::after`
* `content`


:-moz-suppressed - CSS: Cascading Style Sheets

:-moz-suppressed
================

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

The **`:-moz-suppressed`** CSS pseudo-class is a Mozilla extension that matches elements representing images that were suppressed because loading images from the specified site has been blocked.

**Note:** This selector is mainly intended to be used by theme developers.

Syntax
------

```css
:-moz-suppressed {
  /\* ... \*/
}
```

Examples
--------

### Styling elements that have been blocked

```css
:-moz-suppressed {
  background: yellow;
  padding: 8px;
}
```

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

Not part of any standard.

See also
--------

* `:-moz-broken`, `:-moz-loading`, `:-moz-user-disabled`


-webkit-text-fill-color - CSS: Cascading Style Sheets

-webkit-text-fill-color
=======================

The **`-webkit-text-fill-color`** CSS property specifies the fill color of characters of text. If this property is not set, the value of the `color` property is used.

Syntax
------

```css
/\* <color> values \*/
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100 200 0);

/\* Global values \*/
-webkit-text-fill-color: inherit;
-webkit-text-fill-color: initial;
-webkit-text-fill-color: revert;
-webkit-text-fill-color: revert-layer;
-webkit-text-fill-color: unset;
```

### Values

`<color>`

The foreground fill color of the element's text content.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | computed color |
| Animation type | a color |

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

-webkit-text-fill-color =
  <color>

```

Examples
--------

### Changing the fill color

#### CSS

```css
p {
  margin: 0;
  font-size: 3em;
  -webkit-text-fill-color: green;
}
```

#### HTML

```html
<p>This text is green.</p>
```

#### Results

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-fill-color |

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

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

See also
--------

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`


accent-color - CSS: Cascading Style Sheets

accent-color
============

The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.

Try it
------

Browsers that support `accent-color` currently apply it to the following HTML elements:

* `<input type="checkbox">`
* `<input type="radio">`
* `<input type="range">`
* `<progress>`

 Each user agent has an accent color, with variations to ensure legibility and
 contrast. That accent color is not used by every user-interface control nor in
 every state of the control. The `accent-color` is only applied to user-interface
 controls that use an accent color in the states where it is applicable.

Syntax
------

```css
/\* Keyword values \*/
accent-color: auto;

/\* <color> values \*/
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

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

### Values

`auto`

Represents a UA-chosen color, which should match the accent color of the platform, if any.

`<color>`

Specifies the color to be used as the accent color.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | `auto` is computed as specified and `<color>` values are computed as defined for the `color` property. |
| Animation type | by computed value type |

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

accent-color =
  auto     |
  <color>

```

Examples
--------

### Setting a custom accent color

#### HTML

```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```

#### CSS

```css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}
```

#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # widget-accent |

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

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

See also
--------

* `background-color`, `border-color`, `caret-color`, `color`, `column-rule-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`: Other color-related properties
* `<color>`: Related data type
* `<input>`: Related HTML element
* Applying color to HTML elements using CSS


Subsequent-sibling combinator - CSS: Cascading Style Sheets

Subsequent-sibling combinator
=============================

The **subsequent-sibling combinator** (`~`, a tilde) separates two selectors and matches *all instances* of the second element that follow the first element (not necessarily immediately) and share the same parent element.

In the following example, the subsequent-sibling combinator (`~`) helps to select and style paragraphs that are both siblings of an image and appear after any image.

```css
img ~ p {
  color: red;
}
```

Syntax
------

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

Examples
--------

### Using the combinator with simple selectors

This example shows the use of the `~` combinator when both the selectors are simple selectors (`p` and `span`).

```html
<article>
  <span>This is not red because it appears before any paragraph.</span>
  <p>Here is a paragraph.</p>
  <code>Here is some code.</code>
  <span>
    This span is red because it appears after the paragraph, even though there
    are other nodes in between.
  </span>
  <p>Whatever it may be, keep smiling.</p>
  <h1>Dream big</h1>
  <span>
    Doesn't matter how many or what kind of nodes are in between, all spans from
    the same parent after a paragraph are red.
  </span>
</article>
<span>
  This span is not red because it doesn't share a parent with a paragraph.
</span>
```

```css
p ~ span {
  color: red;
}
```

### Using the combinator with complex selectors

This example contains two complex selectors, both using the subsequent-sibling combinator: `.foo p ~ span` and `.foo p ~ .foo span`.

* The first complex selector, `.foo p ~ span`, matches all spans that come after a paragraph *if* the span and paragraph share the same parent **and** that parent or an ancestor of that parent has the class `.foo`.
* The second complex selector, `.foo p ~ .foo span`, matches all spans that are a descendant of the element with class `.foo` *if* that element is a sibling of the previously mentioned paragraph.

The example below shows that the target element in the complex selector must share the same parent as the initial element in the complex selector.

```html
<h1>Dream big</h1>
<span>And yet again this is a red span!</span>
<div class="foo">
  <p>Here is another paragraph.</p>
  <span>A blue span</span>
  <div class="foo">
    <span>A green span</span>
  </div>
</div>
```

```css
.foo p ~ span {
  color: blue;
}

.foo p ~ .foo span {
  color: green;
}
```

In the above HTML, the two siblings of `.foo p` are `span` and `.foo`. The green `span` is a descendant of the `.foo` class, which is a sibling of `p`.

* When the target selector is `span`, the `span` element that is a sibling of `p` is selected. The `p` element is a descendant of `.foo`, so are its `span` siblings.
* In `.foo p ~ .foo span`, the target selector is `span` that is a descendant of `.foo`. In this case, the `span` element that's a descendent of `.foo` is selected if that `.foo` is a sibling of `p`; essentially, both are nested in an ancestor of `.foo`.
Specifications
--------------

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

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

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

See also
--------

* Next-sibling combinator


page-break-before - CSS: Cascading Style Sheets

page-break-before
=================

**Warning:** This property has been replaced by the `break-before` property.

The **`page-break-before`** CSS property adjusts page breaks *before* the current element.

This property applies to block elements that generate a box. It won't apply on an empty `<div>` that won't generate a box.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/\* Global values \*/
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;
```

### Values

`auto`

Initial value. Automatic page breaks (neither forced nor forbidden).

`always`

Always force page breaks before the element.

`avoid`

Avoid page breaks before the element.

`left`

Force page breaks before the element so that the next page is formatted as a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

`right`

Force page breaks before the element so that the next page is formatted as a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

`recto`
Experimental

If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.

`verso`
Experimental

If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.

Page break aliases
------------------

The `page-break-before` property is now a legacy property, replaced by `break-before`.

For compatibility reasons, `page-break-before` should be treated by browsers as an alias of `break-before`. This ensures that sites using `page-break-before` continue to work as designed. A subset of values should be aliased as follows:

| page-break-before | break-before |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

page-break-before =
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  inherit

```

Examples
--------

### Avoid a page break before an element

```css
/\* Avoid page break before div elements of class note \*/
div.note {
  page-break-before: avoid;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-before |

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

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

See also
--------

* `break-before`, `break-after`, `break-inside`
* `page-break-after`, `page-break-inside`
* `orphans`, `widows`


atan2() - CSS: Cascading Style Sheets

atan2()
=======

The **`atan2()`** CSS function is a trigonometric function that returns the inverse tangent of two values between `-infinity` and `infinity`. The function accepts two arguments and returns the number of radians representing an `<angle>` between `-180deg` and `180deg`.

Syntax
------

```css
/\* Two <number> values \*/
transform: rotate(atan2(3, 2));

/\* Two <dimension> values \*/
transform: rotate(atan2(1rem, -0.5rem));

/\* Two <percentage> values \*/
transform: rotate(atan2(20%, -30%));

/\* Other values \*/
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));
```

### Parameters

The `atan2(y, x)` function accepts two comma-separated values as its parameters. Each value can be a `<number>`, a `<dimension>`, or a `<percentage>`. Both values must be of the same type, although if they are `<dimension>` they can be of different units (example: `atan2(100px, 5vw)` is valid).

`y`

The y-coordinate of the point. A calculation which resolves to a `<number>`, a `<dimension>`, or a `<percentage>`.

`x`

The x-coordinate of the point. A calculation which resolves to a `<number>`, a `<dimension>`, or a `<percentage>`.

### Return value

Given two values `x` and `y`, the function `atan2(y, x)` calculates and returns the `<angle>` between the positive x-axis and the ray from the origin to the point `(x, y)`.

### Formal syntax
```

<atan2()> =
  atan2( <calc-sum> , <calc-sum> )

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

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

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

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

```

Examples
--------

### Rotate elements

The `atan2()` function can be used to `rotate` elements as it return an `<angle>`.

#### HTML

```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```

#### CSS
```

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

```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan2(3, 2));
}
div.box-2 {
  transform: rotate(atan2(3%, -2%));
}
div.box-3 {
  transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
  transform: rotate(atan2(1, 0.5));
}
div.box-5 {
  transform: rotate(atan2(1rem, -0.5rem));
}
```

#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

See also
--------

* `sin()`
* `cos()`
* `tan()`
* `asin()`
* `acos()`
* `atan()`


font-variation-settings - CSS: Cascading Style Sheets

font-variation-settings
=======================

The **`font-variation-settings`** CSS property provides low-level control over variable font characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values.

Try it
------

Syntax
------

```css
/\* Use the default settings \*/
font-variation-settings: normal;

/\* Set values for variable font axis names \*/
font-variation-settings: "XHGT" 0.7;

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

### Values

This property's value can take one of two forms:

`normal`

Text is laid out using default settings.

`<string> <number>`

When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs consisting of a `<string>` of 4 ASCII characters followed by a `<number>` indicating the axis value to set. If the `<string>` has more or fewer characters or contains characters outside the U+20 - U+7E code point range, the whole property is invalid. The `<number>` can be fractional or negative, depending on the value range available in your font, as defined by the font designer.

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

This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. `font-weight`, `font-style`).

Font characteristics set using `font-variation-settings` will always override those set using the corresponding basic font properties, e.g. `font-weight`, no matter where they appear in the cascade. In some browsers, this is currently only true when the `@font-face` declaration includes a `font-weight` range.

### Registered and custom axes

Variable font axes come in two types: **registered** and **custom**.

Registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.

Here are the registered axes along with their corresponding CSS properties:

| Axis Tag | CSS Property |
| --- | --- |
| "wght" | `font-weight` |
| "wdth" | `font-stretch` |
| "slnt" (slant) | `font-style`: `oblique + angle` |
| "ital" | `font-style`: `italic` |
| "opsz" | `font-optical-sizing` |

Custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.

**Note:** Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced to follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.

To use variable fonts on your operating system, you need to make sure that it is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS before 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.

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

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

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

font-variation-settings =
  normal                        |
  [ <opentype-tag> <number> ]#

<opentype-tag> =
  <string>

```

Examples
--------

You can find a number of other variable font examples in our Variable fonts guide.

### Controlling variable font weight (wght)

You can edit the CSS in the example below to play with different font weight values. See what happens when you specify a value outside the weight range.

### Controlling variable font slant (slnt)

You can edit the CSS in the example below to play with different font slant/oblique values.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variation-settings-def |

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

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

See also
--------

* Variable fonts guide
* OpenType font variations overview on microsoft.com
* OpenType design-variation axis tag registry on microsoft.com
* OpenType variable fonts on axis-praxis.org
* Variable fonts on v-fonts.com


::file-selector-button - CSS: Cascading Style Sheets

::file-selector-button
======================

The **`::file-selector-button`** CSS pseudo-element represents the button of an `<input>` of `type="file"`.

Try it
------

Syntax
------

```css
selector::file-selector-button
```

Examples
--------

### Basic example

#### HTML

```html
<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>
```

#### CSS
```

form {
  display: flex;
  gap: 1em;
  align-items: center;
}
```

```css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}
```

#### Result

Note that `::file-selector-button` is a whole element, and as such matches the rules from the UA stylesheet. In particular, fonts and colors won't necessarily inherit from the `input` element.

### Fallback example

#### HTML

```html
<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>
```

#### CSS
```

form {
  display: flex;
  gap: 1em;
  align-items: center;
}
```

```css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::-ms-browse:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}
```

#### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |

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

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

See also
--------

* WebKit CSS extensions
* File and Directory Entries API
* File and Directory Entries API support in Firefox
* `<input type="file">`


outline-style - CSS: Cascading Style Sheets

outline-style
=============

The **`outline-style`** CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the `border`.

Try it
------

It is often more convenient to use the shorthand property `outline` when defining the appearance of an outline.

Syntax
------

```css
/\* Keyword values \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

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

The `outline-style` property is specified as any one of the values listed below.

### Values

`auto`

Permits the user agent to render a custom outline style.

`none`

No outline is used. The `outline-width` is `0`.

`dotted`

The outline is a series of dots.

`dashed`

The outline is a series of short line segments.

`solid`

The outline is a single line.

`double`

The outline is two single lines. The `outline-width` is the sum of the two lines and the space between them.

`groove`

The outline looks as though it were carved into the page.

`ridge`

The opposite of `groove`: the outline looks as though it were extruded from the page.

`inset`

The outline makes the box look as though it were embedded in the page.

`outset`

The opposite of `inset`: the outline makes the box look as though it were coming out of the page.

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

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

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

outline-style =
  auto                  |
  <outline-line-style>

```

Examples
--------

### Setting outline style to auto

The `auto` value indicates a custom outline style, described in the specification as "typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow".

#### HTML

```html
<div>
  <p class="auto">Outline Demo</p>
</div>
```

#### CSS

```css
.auto {
  outline-style: auto; /\* same result as "outline: auto" \*/
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Result

### Setting outline style to dashed and dotted

#### HTML

```html
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.dotted {
  outline-style: dotted; /\* same result as "outline: dotted" \*/
}
.dashed {
  outline-style: dashed;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Result

### Setting outline style to solid and double

#### HTML

```html
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Result

### Setting outline style to groove and ridge

#### HTML

```html
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Result

### Setting outline style to inset and outset

#### HTML

```html
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-style |

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

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

See also
--------

* `outline`
* `outline-color`
* `outline-width`


user-modify - CSS: Cascading Style Sheets

user-modify
===========

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

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

The **`user-modify`** property has no effect in Firefox. It was originally planned to determine whether or not the content of an element can be edited by a user.

**Warning:** This property has been replaced by the `contenteditable` attribute.

Syntax
------

```css
/\* Keyword values \*/
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;

/\* Global values \*/
user-modify: inherit;
user-modify: initial;
user-modify: revert;
user-modify: unset;
```

The `-moz-user-modify` property is specified as one of the keyword values from the list below.

### Values

`read-only`

Default value. Contents are read-only.

`read-write`

The user is able to read and write contents.

`read-write-plaintext-only`
Non-standard

Deprecated

Same as `read-write`, but rich text formatting will be lost.

`write-only`

The user is able to edit the content, but not to read it.

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

Value not found in DB!Formal syntax
-------------

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

### HTML

```html
<div class="readwrite">The user is able to change this text.</div>
```

### CSS

```css
.readwrite {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
}
```

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

* `-moz-user-focus`
* `-moz-user-input`
* `-moz-user-select`


border-top-color - CSS: Cascading Style Sheets

border-top-color
================

The **`border-top-color`** CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties `border-color` or `border-top`.

Try it
------

Syntax
------

```css
/\* <color> values \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255 0 0);
border-top-color: hsl(100deg 50% 25% / 75%);
border-top-color: currentcolor;
border-top-color: transparent;

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

The `border-top-color` property is specified as a single value.

### Values

`<color>`

The color of the top border.

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

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

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

border-top-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

Examples
--------

### A simple div with a border

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### Result

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

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

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

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

See also
--------

* The border-related CSS shorthand properties: `border`, `border-top`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-bottom-color`, and `border-left-color`.
* The other border-related CSS properties applying to the same border: `border-top-style` and `border-top-width`.
* The default `currentcolor` color value.


object-position - CSS: Cascading Style Sheets

object-position
===============

The **`object-position`** CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.

You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the `object-fit` property.

Try it
------

Syntax
------

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

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

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

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

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

### Values

`<position>`

From one to four values that define the 2D position of the element. Relative or absolute offsets can be used.

**Note:** The position can be set so that the replaced element is drawn outside its box.

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

|  |  |
| --- | --- |
| Initial value | `50% 50%` |
| Applies to | replaced elements |
| Inherited | yes |
| Percentages | refer to width and height of element itself |
| Computed value | as specified |
| Animation type | a repeatable list |

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

object-position =
  <position>

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

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

```

Examples
--------

### Positioning image content

#### HTML

Here we see HTML that includes two `<img>` elements, each displaying the MDN logo.

```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```

#### CSS

The CSS includes default styling for the `<img>` element itself, as well as separate styles for each of the two images.

```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

#### Result

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

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

See also
--------

* Other image-related CSS properties: `object-fit`, `image-orientation`, `image-rendering`, `image-resolution`.


border-inline - CSS: Cascading Style Sheets

border-inline
=============

The **`border-inline`** CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.

Try it
------

The physical borders to which `border-inline` maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top` and `border-bottom` or `border-right`, and `border-left` properties, depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

The borders in the other dimension can be set with `border-block`, which sets `border-block-start`, and `border-block-end`.

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

This property is a shorthand for the following CSS properties:

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

```css
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

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

### Values

The `border-inline` is specified with one or more of the following, in any order:

`<'border-width'>`

The width of the border. See `border-width`.

`<'border-style'>`

The line style of the border. See `border-style`.

`<color>`

The color of the border.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-inline-width`: `medium`
* `border-inline-style`: `none`
* `border-inline-color`: `currentcolor`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-inline-width`: absolute length; `0` if the border style is `none` or `hidden`
* `border-inline-style`: as specified
* `border-inline-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-inline-color`: by computed value type
* `border-inline-style`: discrete
* `border-inline-width`: by computed value type
 |

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

border-inline =
  <'border-block-start'>

```

Examples
--------

### Border with vertical text

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  border-inline: 5px dashed blue;
}
```

#### Results

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline |

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top`, `border-right`, `border-bottom`, or `border-left`.
* `writing-mode`, `direction`, `text-orientation`


::slotted() - CSS: Cascading Style Sheets

::slotted()
===========

The **`::slotted()`** CSS pseudo-element represents any element that has been placed into a slot inside an HTML template (see Using templates and slots for more information).

This only works when used inside CSS placed within a shadow DOM. Note that this selector won't select a text node placed into a slot; it only targets actual elements.

Try it
------

```css
/\* Selects any element placed inside a slot \*/
::slotted(\*) {
  font-weight: bold;
}

/\* Selects any <span> placed inside a slot \*/
::slotted(span) {
  font-weight: bold;
}
```

Syntax
------

```css
::slotted(<compound-selector>) {
  /\* ... \*/
}
```

Examples
--------

### Highlighting slotted elements

In this example, we use a template with three slots:

```html
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>
```

We define the `<person-details>` custom element. In this case, we add styles with JavaScript, though we could have added them in a `<style>` block within the `<template>` with the same effect:

```js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(\*) { color: gray; font-family: sans-serif; } " +
        "::slotted(span) {text-decoration: underline;} ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);
```

When filling the `style` element with content, you'll see that we select all slotted elements (`::slotted(*)`) and give them a different font and color. This differentiates them from the slots that haven't been filled. We styled all the slotted `<span>`s (`::slotted(span)`) to differentiate the `<span>`s from the `<p>`s.

Our markup includes three custom elements, including a custom element with an invalid slot name in a source order that differs from the `<template>`:

```html
<person-details>
  <p slot="person-name">Wonder Woman</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>

<person-details>
  <p slot="person-name">Malala Yousafzai</p>
  <span slot="person-age">17</span>
  <span slot="person-occupation">Activist</span>
</person-details>

<person-details>
  <span slot="person-age">44</span>
  <span slot="not-a-slot-name">Time traveller</span>
  <p slot="person-name">Dr. Who</p>
</person-details>
```

#### Result

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # slotted-pseudo |

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

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

See also
--------

* `:host`
* `:host()`
* `:host-context()`
* CSS scoping module
* HTML `slot` attribute
* HTML `<slot>` element
* HTML `<template>` element
* Web components


box-decoration-break - CSS: Cascading Style Sheets

box-decoration-break
====================

The **`box-decoration-break`** CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

Try it
------

The specified value will impact the appearance of the following properties:

* `background`
* `border`
* `border-image`
* `box-shadow`
* `clip-path`
* `margin`
* `padding`
Syntax
------

```css
/\* Keyword values \*/
box-decoration-break: slice;
box-decoration-break: clone;

/\* Global values \*/
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;
```

The `box-decoration-break` property is specified as one of the keyword values listed below.

### Values

`slice`

The element is initially rendered as if its box were not fragmented, after which the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.

`clone`

Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The `border-radius`, `border-image`, and `box-shadow` are applied to each fragment independently. The background is also drawn independently for each fragment, which means that a background image with `background-repeat``: no-repeat` may nevertheless repeat multiple times.

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

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

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

box-decoration-break =
  slice  |
  clone

```

Examples
--------

### Inline box fragments

An inline element that contains line breaks styled with:

```html
<style>
 .example {
 background: linear-gradient(to bottom right, yellow, green);
 box-shadow:
 8px 8px 10px 0px deeppink,
 -5px -5px 5px 0px blue,
 5px 5px 15px 0px yellow;
 padding: 0em 1em;
 border-radius: 16px;
 border-style: solid;
 margin-left: 10px;
 font: 24px sans-serif;
 line-height: 2;
 }
</style>
…
<span class="example">The<br />quick<br />orange fox</span>
```

This results in:

![A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.](/en-US/docs/Web/CSS/box-decoration-break/box-decoration-break-inline-slice.png)

Adding `box-decoration-break: clone` to the above styles:

```css
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
```

This one results in:

![A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example](/en-US/docs/Web/CSS/box-decoration-break/box-decoration-break-inline-clone.png)

You can try the two inline examples above in your browser.

Here's an example of an inline element using a large `border-radius` value. The second `"iM"` has a line-break between the `"i"` and the `"M"`. For comparison, the first `"iM"` is without line breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.

![A screenshot of the rendering of the second inline element example.](/en-US/docs/Web/CSS/box-decoration-break/box-decoration-break-slice-inline-2.png)

Try the above example in your browser.

### Block box fragments

A block element with similar styles as above and no fragmentation results in:

![A screenshot of the rendering of the block element used in the examples without any fragmentation.](/en-US/docs/Web/CSS/box-decoration-break/box-decoration-break-block.png)

Fragmenting the above block into three columns results in:

![A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.](/en-US/docs/Web/CSS/box-decoration-break/box-decoration-break-block-slice.png)

Note that stacking these pieces vertically will result in the non-fragmented rendering.

Now, the same example but styled with `box-decoration-break: clone` results in:

![A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.](/en-US/docs/Web/CSS/box-decoration-break/box-decoration-break-block-clone.png)

Note here that each fragment has an identical replicated border, box-shadow, and background.

You can try the block examples above in your browser.

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # break-decoration |

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

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

See also
--------

* `break-after`, `break-before`, `break-inside`


aspect-ratio - CSS: Cascading Style Sheets

aspect-ratio
============

The **`aspect-ratio`** CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.

At least one of the box's sizes needs to be automatic in order for `aspect-ratio` to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box's preferred sizes.

Try it
------

Syntax
------

```css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

/\* fallback to 'auto' for replaced elements \*/
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

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

This property is specified as one or both of the keyword auto or a `<ratio>`. If both are given, then If the element is a replaced element, such as `<img>`, then the given ratio is used until the content is loaded. After the content is loaded, the `auto` value is applied, so the intrinsic aspect ratio of the loaded content is used.

If the element is not a replaced element, then the given `ratio` is used.

### Values

`auto`

Replaced elements with an intrinsic aspect ratio use *that* aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.

`<ratio>`

The box's preferred aspect ratio is the specified ratio of `width` / `height`. If `height` and the preceding slash character are omitted, `height` defaults to `1`. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by `box-sizing`.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements except inline boxes and internal ruby or table boxes |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

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

aspect-ratio =
  auto     ||
  <ratio>

<ratio> =
  <number [0,∞]> [ / <number [0,∞]> ]?

```

Examples
--------

### Exploring aspect-ratio effects with fixed width

In this example, the width of the `<div>` elements has been set to `100px` and height to `auto`. Since the width value is fixed here, the `aspect-ratio` property affects only the height of the `<div>` elements to maintain the specified width-to-height ratio.
```

<div>1/1</div>
<div>0.5</div>
<div>1</div>
<div>1/0.5</div>
<div>16/9</div>
```

```
div {
  display: inline-flex;
  background-color: lime;
  justify-content: center;
}
```

```css
div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}
```

### Fallback to natural aspect ratio

In this example we are using two`<img>` elements. The first element does not have its `src` attribute set to an image file.

```html
<img src="" /> <img src="plumeria.jpg" />
```

The following code sets `3/2` as the preferred aspect ratio and `auto` as a fallback.

```css
img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}
```

Note how the first image without replaced content keeps the `3/2` aspect ratio, while the second image after the content is loaded uses the image's natural aspect ratio.

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # aspect-ratio |

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

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

See also
--------

* Image aspect-ratio: preventing jank
* Designing an aspect ratio unit for CSS
* Setting Height And Width On Images Is Important Again