content-visibility - CSS: Cascading Style Sheets

content-visibility
==================

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

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

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

The **`content-visibility`** CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

**Note:** The `contentvisibilityautostatechange` event fires on any element with `content-visibility: auto` set on it when its rendering work starts or stops being skipped. This provides a convenient way for an app's code to start or stop rendering processes (e.g. drawing on a `<canvas>`) when they are not needed, thereby conserving processing power.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

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

### Values

`visible`

No effect. The element's contents are laid out and rendered as normal.

`hidden`

The element skips its contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents `display: none`.

`auto`

The element turns on layout containment, style containment, and paint containment. If the element is not relevant to the user, it also skips its contents. Unlike hidden, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.

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

### Animating and transitioning content-visibility

Supporting browsers animate/transition `content-visibility` with a variation on the discrete animation type.

Discrete animation generally means that the property will flip between two values 50% of the way through the animation. In the case of `content-visibility`, however, the browser will flip between the two values to show the animated content for the entire animation duration. So, for example:

* When animating `content-visibility` from `hidden` to `visible`, the value will flip to `visible` at `0%` of the animation duration so it is visible throughout.
* When animating `content-visibility` from `visible` to `hidden`, the value will flip to `hidden` at `100%` of the animation duration so it is visible throughout.

This behavior is useful for creating entry/exit animations where you want to, for example, remove some content from the DOM with `content-visibility: hidden`, but you want a smooth transition (such as a fade-out) rather than it disappearing immediately.

When animating `content-visibility` with CSS transitions, `transition-behavior: allow-discrete` needs to be set on `content-visibility`. This effectively enables `content-visibility` transitions.

**Note:** When transitioning an element's `content-visibility` value, you don't need to provide a set of starting values for transitioned properties using a `@starting-style` block, like you do when transitioning `display`. This is because `content-visibility` doesn't hide an element from the DOM like `display` does: it just skips rendering the element's content.

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

|  |  |
| --- | --- |
| Initial value | `visible` |
| Applies to | elements for which size containment can apply |
| Inherited | no |
| Computed value | as specified |
| Animation type | Discrete behavior except when animating to or from `hidden` is visible for the entire duration |

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

content-visibility =
  visible  |
  auto     |
  hidden

```

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

Off-screen content within a `content-visibility: auto` property remains in the document object model and the accessibility tree. This allows improving page performance with `content-visibility: auto` without negatively impacting accessibility.

 Since styles for off-screen content are not rendered, elements intentionally hidden with `display: none` or `visibility: hidden` *will still appear in the accessibility tree*.
 If you don't want an element to appear in the accessibility tree, use `aria-hidden="true"`.

Examples
--------

### Using auto to reduce rendering cost of long pages

 The following example shows the use of `content-visibility: auto` to skip painting and rendering of off-screen sections.
 When a `section` is out of the viewport then the painting of the content is skipped until the section comes close to the viewport, this helps with both load and interactions on the page.

#### HTML

```html
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<!-- … -->
```

#### CSS

The `contain-intrinsic-size` property adds a default size of 500px to the height and width of each `section` element. After a section is rendered, it will retain its rendered intrinsic size, even when it is scrolled out of the viewport.

```css
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
```

### Using hidden to manage visibility

 The following example shows how to manage content visibility with JavaScript.
 Using `content-visibility: hidden;` instead of `display: none;` preserves the rendering state of content when hidden and rendering is faster.

#### HTML

```html
<div class="hidden">
  <button class="toggle">Show</button>
  <p>
    This content is initially hidden and can be shown by clicking the button.
  </p>
</div>
<div class="visible">
  <button class="toggle">Hide</button>
  <p>
    This content is initially visible and can be hidden by clicking the button.
  </p>
</div>
```

#### CSS

The `content-visibility` property is set on paragraphs that are direct children of elements with the `visible` and `hidden` classes. In our example, we can show and hide content in paragraphs depending on the CSS class of parent div elements.

The `contain-intrinsic-size` property is included to represent the content size. This helps to reduce layout shift when content is hidden.

```css
p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}
```

#### JavaScript

```js
const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "Show" : "Hide";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});
```

#### Result

### Animating content-visibility

In this example, we have a `<div>` element, the content of which can be toggled between shown and hidden by clicking or pressing any key.

#### HTML

```html
<p>
  Click anywhere on the screen or press any key to toggle the
  <code><div></code> content between hidden and showing.
</p>

<div>
  This is a <code><div></code> element that animates between
  <code>content-visibility: hidden;</code>and
  <code>content-visibility: visible;</code>. We've also animated the text color
  to create a smooth animation effect.
</div>
```

#### CSS

In the CSS we initially set `content-visibility: hidden;` on the `<div>` to hide its content. We then set up `@keyframe` animations and attach them to classes to show and hide the `<div>`, animating `content-visibility` and `color` so that you get a smooth animation effect as the content is shown/hidden.

```css
div {
  font-size: 1.6rem;
  padding: 20px;
  border: 3px solid red;
  border-radius: 20px;
  width: 480px;

  content-visibility: hidden;
}

/\* Animation classes \*/

.show {
  animation: show 0.7s ease-in forwards;
}

.hide {
  animation: hide 0.7s ease-out forwards;
}

/\* Animation keyframes \*/

@keyframes show {
  0% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0%);
  }

  100% {
    content-visibility: visible;
    color: rgb(0 0 0 / 100%);
  }
}

@keyframes hide {
  0% {
    content-visibility: visible;
    color: rgb(0 0 0 / 100%);
  }

  100% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0%);
  }
}
```

#### JavaScript

Finally, we use JavaScript to apply the `.show` and `.hide` classes to the `<div>` as appropriate to apply the animations as it is toggled between shown and hidden states.

```js
const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
  if (divElem.classList[0] === "show") {
    divElem.classList.remove("show");
    divElem.classList.add("hide");
  } else {
    divElem.classList.remove("hide");
    divElem.classList.add("show");
  }
}
```

#### Result

The rendered result looks like this:

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

| Specification |
| --- |
| CSS Containment Module Level 2 # content-visibility |

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

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

See also
--------

* CSS Containment
* `contain-intrinsic-size`
* `contentvisibilityautostatechange`
* content-visibility: the new CSS property that boosts your rendering performance (web.dev)


overflow-anchor - CSS: Cascading Style Sheets

overflow-anchor
===============

The **`overflow-anchor`** CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.

Scroll anchoring behavior is enabled by default in any browser that supports it. Therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
overflow-anchor: auto;
overflow-anchor: none;

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

### Values

`auto`

The element becomes a potential anchor when adjusting scroll position.

`none`

The element won't be selected as a potential anchor.

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

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

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

overflow-anchor =
  auto  |
  none

```

Examples
--------

### Prevent scroll anchoring

To prevent scroll anchoring in a document, use the `overflow-anchor` property.

```css
\* {
  overflow-anchor: none;
}
```

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

| Specification |
| --- |
| CSS Scroll Anchoring Module Level 1 # exclusion-api |

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

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

See also
--------

* Guide to scroll anchoring


CSS overscroll behavior - CSS: Cascading Style Sheets

CSS overscroll behavior
=======================

The **CSS overscroll behavior** module provides properties to control the behavior of a scroll container when its scroll position reaches the scroll boundary. Controlling this aspect is particularly useful in scenarios where embedded scrollable areas should not trigger scrolling of the parent container.

When commenting on a blog, you might notice that if your comment exceeds the length of the provided `<textarea>`, scrolling beyond the end of the text area causes the entire blog to scroll. This is because reaching the end of a scrollable area, known as the scroll boundary, can lead to scrolling other content or the entire page. This continuous scrolling experience is called scroll chaining.

In situations where the contents of an element are larger than its container and `overflow` allows or defaults to scrolling (like in `<textarea>`), continued scrolling past the element's scrollable area will initiate scrolling in the parent element or the underlying page.

Conversely, scrolling through a website's terms and conditions and reaching the end of the content to enable a checkbox, may not force the page to scroll or bounce (as on a phone). This example shows that you can control overscroll behavior and prevent scroll chaining.

This module defines the overscroll behavior, enabling you to specify the actions when a user scrolls beyond the boundaries of a scrollable element.

Reference
---------

### CSS properties

* `overscroll-behavior` shorthand
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
* `overscroll-behavior-x`
* `overscroll-behavior-y`
### Glossary terms

* Scroll boundary
* Scroll chaining
Guides
------

CSS building blocks: Overflowing content

Learn what overflow is and how to manage it.

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

* `scrollbar` ARIA role
* Containing block concept
* CSS overflow module:
    + `overflow` shorthand property
        - `overflow-x`
        - `overflow-y`
        - `overflow-block`
        - `overflow-inline`
    + `overflow-clip-margin` property
    + `scroll-behavior` property
    + `text-overflow` property
* Scroll container and scrollport glossary terms
* CSS scroll snap module:
    + `scroll-padding` shorthand property
    + `scroll-snap-type` property
    + `scroll-margin` shorthand property
    + `scroll-snap-stop` property
    + `scroll-snap-align` property
* CSSOM view module:
    + `Element.getBoundingClientRect()` method
    + `Element.scroll()` method
    + `Element.scrollBy()` method
    + `Element.scrollIntoView()` method
    + `Element.scrollTo()` method
    + `scroll` Document event
Specifications
--------------

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1  |

See also
--------

* CSS box model module
* CSS logical properties and values module
* CSS scroll snap module
* Take control of your scroll - customizing pull-to-refresh and overflow effects on developer.chrome.com (2017)


all - CSS: Cascading Style Sheets

all
===

The **`all`** shorthand CSS property resets all of an element's properties except `unicode-bidi`, `direction`, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.

Try it
------

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

This property is a shorthand for all CSS properties except for `unicode-bidi`, `direction`, and custom properties.

Syntax
------

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

The `all` property is specified as one of the CSS global keyword values. Note that none of these values affect the `unicode-bidi` and `direction` properties.

### Values

`initial`

Specifies that all the element's properties should be changed to their initial values.

`inherit`

Specifies that all the element's properties should be changed to their inherited values.

`unset`

Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.

`revert`

Specifies behavior that depends on the stylesheet origin to which the declaration belongs:

* If the rule belongs to the author origin, the `revert` value rolls back the cascade to the user level, so that the specified values are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins.
* If the rule belongs to the user origin, the `revert` value rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element.
* If the rule belongs to the user-agent origin, the `revert` value acts like `unset`.

`revert-layer`

Specifies that all the element's properties should roll back the cascade to a previous cascade layer, if one exists. If no other cascade layer exists, the element's properties will roll back to the matching rule, if one exists, in the current layer or to a previous style origin.

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

|  |  |
| --- | --- |
| Initial value | There is no practical initial value for it. |
| Applies to | all elements |
| Inherited | no |
| Computed value | as the specified value applies to each property this is a shorthand for. |
| Animation type | as each of the properties of the shorthand (all properties but `unicode-bidi` and `direction`) |

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

all =
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

```

Examples
--------

In this example, the CSS file contains styling for the `<blockquote>` element in addition to some styling for the parent `<body>` element. Various outputs in the Results subsection demonstrate how the styling of the `<blockquote>` element is affected when different values are applied to the `all` property inside the `blockquote` rule.

### HTML

```html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

### CSS

```css
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}
```

### Results

#### A. No `all` property
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
```

This is the scenario in which no `all` property is set inside the `blockquote` rule. The `<blockquote>` element uses the browser's default styling which gives it a margin, together with a specific background and text color as specified in the stylesheet. It also behaves as a *block* element: the text that follows it is beneath it.

#### B. `all: initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}
```

With the `all` property set to `initial` in the `blockquote` rule, the `<blockquote>` element doesn't use the browser default styling anymore: it is an *inline* element now (initial value), its `background-color` is `transparent` (initial value), its `font-size` is `medium`, and its `color` is `black` (initial value).

#### C. `all: inherit`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}
```

In this case, the `<blockquote>` element doesn't use the browser default styling. Instead, it inherits style values from its parent `<body>` element: it is a *block* element now (inherited value), its `background-color` is `#F0F0F0` (inherited value), its `font-size` is `small` (inherited value), and its `color` is `blue` (inherited value).

#### D. `all: unset`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}
```

When the `unset` value is applied to the `all` property in the `blockquote` rule, the `<blockquote>` element doesn't use the browser default styling. Because `background-color` is a non-inherited property and `font-size` and `color` are inherited properties, the `<blockquote>` element is an *inline* element now (initial value), its `background-color` is `transparent` (initial value), but its `font-size` is still `small` (inherited value), and its `color` is `blue` (inherited value).

#### E. `all: revert`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}
```

When the `all` property is set to `revert` in the `blockquote` rule, the `blockquote` rule is considered to be non-existent and the styling property values are inherited from the ones applied to the parent element `<body>`. So the `<blockquote>` element gets styled as a *block* element, with `background-color` `#F0F0F0`, `font-size` `small`, and `color` `blue` - all values inherited from the `body` rule.

#### F. `all: revert-layer`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}
```

There are no cascade layers defined in the CSS file, so the `<blockquote>` element inherits its style from the matching `body` rule. The `<blockquote>` element here is styled as a *block* element, with `background-color` `#F0F0F0`, `font-size` `small`, and `color` `blue` - all values inherited from the `body` rule. This scenario is an example of the case when `all` set to `revert-layer` behaves the same as when `all` is set to `revert`.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # all-shorthand |

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

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

See also
--------

CSS global keyword values: `initial`, `inherit`, `unset`, `revert`, `revert-layer`


font-stretch - CSS: Cascading Style Sheets

font-stretch
============

The **`font-stretch`** CSS property selects a normal, condensed, or expanded face from a font.

Try it
------

Syntax
------

```css
/\* <font-stretch-css3> keyword values \*/
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/\* Percentage values \*/
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

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

This property may be specified as a single `<font-stretch-css3>` keyword value or a single `<percentage>` value.

### Values

`normal`

Specifies a normal font face.

`semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`

Specifies a more condensed font face than normal, with `ultra-condensed` as the most condensed.

`semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`

Specifies a more expanded font face than normal, with `ultra-expanded` as the most expanded.

`<percentage>`

A `<percentage>` value between 50% and 200% (inclusive). Negative values are not allowed for this property.

### Keyword to numeric mapping

The table below shows the mapping between the `<font-stretch-css3>` keyword values and numeric percentages:

| Keyword | Percentage |
| --- | --- |
| `ultra-condensed` | 50% |
| `extra-condensed` | 62.5% |
| `condensed` | 75% |
| `semi-condensed` | 87.5% |
| `normal` | 100% |
| `semi-expanded` | 112.5% |
| `expanded` | 125% |
| `extra-expanded` | 150% |
| `ultra-expanded` | 200% |

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

Some font families offer additional faces in which the characters are narrower than the normal face (*condensed* faces) or wider than the normal face (*expanded* faces).

You can use `font-stretch` to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.

### Font face selection

The face selected for a given value of `font-stretch` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face.

The table below demonstrates the effect of supplying various different percentage values of `font-stretch` on two different fonts:
```

@font-face {
  font-family: "Inconsolata";
  src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2")
    format("woff2");
  font-stretch: 50% 200%;
}

@font-face {
  font-family: "Anek Malayalam";
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs\_mZAJUZWWkhke0nYa-f6\_\_Azq3-gP1W7db9\_.woff2")
    format("woff2");
  font-stretch: 75% 125%;
}

td {
  border: solid;
  border-width: 1px;
}

#inconsolata td {
  font:
    90px Inconsolata,
    sans-serif;
}
#anek-malayalam td {
  font: 90px "Anek Malayalam";
}
#inconsolata td:nth-child(2),
#anek-malayalam td:nth-child(2) {
  font-stretch: 50%;
}
#inconsolata td:nth-child(3),
#anek-malayalam td:nth-child(3) {
  font-stretch: 62.5%;
}
#inconsolata td:nth-child(4),
#anek-malayalam td:nth-child(4) {
  font-stretch: 75%;
}
#inconsolata td:nth-child(5),
#anek-malayalam td:nth-child(5) {
  font-stretch: 87.5%;
}
#inconsolata td:nth-child(6),
#anek-malayalam td:nth-child(6) {
  font-stretch: 100%;
}
#inconsolata td:nth-child(7),
#anek-malayalam td:nth-child(7) {
  font-stretch: 112.5%;
}
#inconsolata td:nth-child(8),
#anek-malayalam td:nth-child(8) {
  font-stretch: 125%;
}
#inconsolata td:nth-child(9),
#anek-malayalam td:nth-child(9) {
  font-stretch: 150%;
}
#inconsolata td:nth-child(10),
#anek-malayalam td:nth-child(10) {
  font-stretch: 200%;
}
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th scope="row"></th>
      <th scope="col">50%</th>
      <th scope="col">62.5%</th>
      <th scope="col">75%</th>
      <th scope="col">87.5%</th>
      <th scope="col">100%</th>
      <th scope="col">112.5%</th>
      <th scope="col">125%</th>
      <th scope="col">150%</th>
      <th scope="col">200%</th>
    </tr>
  </thead>
  <tbody>
    <tr id="inconsolata">
      <th scope="row">Inconsolata</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
    <tr id="anek-malayalam">
      <th scope="row">Anek Malayalam</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
  </tbody>
</table>
```

* Anek Malayalam is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font.
* Inconsolata is a variable font that offers a continuous range of widths from 50% to 200%.
Formal definition
-----------------

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

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

font-stretch =
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

```

Examples
--------

### Setting font stretch percentages

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

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

**Note:** The `font-stretch` property was initially defined in CSS 2, but dropped in CSS 2.1 due to the lack of browser implementation. It was brought back in CSS 3.

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

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

See also
--------

* `font-style`
* `font-weight`
* Fundamental text and font styling
* CSS fonts module


::view-transition-new - CSS: Cascading Style Sheets

::view-transition-new
=====================

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

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

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

The **`::view-transition-new`** CSS pseudo-element represents the "new" view state of a view transition — a live representation of the new view, after the transition.

During a view transition, `::view-transition-new` is included in the associated pseudo-element tree as explained in The view transition process. It is only ever a child of a `::view-transition-image-pair`, and never has any children.

It is a replaced element, and therefore can be manipulated with properties such as `object-fit` and `object-position`. It has natural dimensions equal to the content's size.

The following default styling is included in the UA stylesheet:

```css
@keyframes -ua-view-transition-fade-in {
  from {
    opacity: 0;
  }
}

html::view-transition-new(\*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-name: -ua-view-transition-fade-in;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```

**Note:** Additional view transition style sheet styles are also setup to animate `::view-transition-new`. These are dynamically generated during the view transition; see the specification setup transition pseudo-elements and update pseudo-element styles sections for more details.

Syntax
------

```css
::view-transition-new(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` can be one of the following values:

`*`

Causes the pseudo-element to match all view transition groups.

`root`

Causes the pseudo-element to match the default `root` view transition group created by the user agent to contain the view transition for the overall page, meaning any element not assigned to its own specific view transition group via the `view-transition-name` property.

`<custom-ident>`

Causes the pseudo-element to match a specific view transition group created by assigning the given `<custom-ident>` to an element via the `view-transition-name` property.

Examples
--------

```css
figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}
```

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

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-new |

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

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

See also
--------

* View Transitions API
* Smooth and simple transitions with the View Transitions API


shape-outside - CSS: Cascading Style Sheets

shape-outside
=============

The **`shape-outside`** CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; `shape-outside` provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/\* Function values \*/
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");

/\* <url> value \*/
shape-outside: url(image.png);

/\* <gradient> value \*/
shape-outside: linear-gradient(45deg, #fff 150px, red 150px);

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

The `shape-outside` property is specified using the values from the list below, which define the *float area* for *float elements*. The float area determines the shape around which inline content (float elements) wrap.

### Values

`none`

The float area is unaffected. Inline content wraps around the element's margin box, like usual.

`<shape-box>`

The float area is computed according to the shape of a float element's edges (as defined by the CSS box model). This can be `margin-box`, `border-box`, `padding-box`, or `content-box`. The shape includes any curvature created by the `border-radius` property (behavior which is similar to `background-clip`).

`margin-box`

Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding `border-radius` and `margin` values. If the `border-radius / margin` ratio is `1` or more, then the margin box corner radius is `border-radius + margin`. If the ratio is less than `1`, then the margin box corner radius is `border-radius + (margin * (1 + (ratio - 1) ^ 3))`.

`border-box`

Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.

`padding-box`

Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

`content-box`

Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of `0` or `border-radius - border-width - padding`.

`<basic-shape>`

The float area is computed based on the shape created by of one of `inset()`, `circle()`, `ellipse()`, `polygon()` or, as added in the level 2 specification, `path()`. If a `<shape-box>` is also supplied, it defines the reference box for the `<basic-shape>` function. Otherwise, the reference box defaults to `margin-box`.

`<image>`

The float area is extracted and computed based on the alpha channel of the specified `<image>` as defined by `shape-image-threshold`.

**Note:** If the image is invalid, the effect is as if the keyword `none` had been specified. Additionally, the image must be served with CORS headers allowing its use.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | floats |
| Inherited | no |
| Computed value | as defined for `<basic-shape>` (with `shape-box` following, if supplied), the `<image>` with its URI made absolute, otherwise as specified. |
| Animation type | yes, as specified for `<basic-shape>`, otherwise no |

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

shape-outside =
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>

<shape-box> =
  <visual-box>  |
  margin-box

<image> =
  <url>       |
  <gradient>

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

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

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

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

```

Examples
--------

### Funneling text

#### HTML

```html
<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>
```

#### CSS

```css
.main {
  width: 530px;
}

.left,
.right {
  background-color: lightgray;
  height: 12ex;
  width: 40%;
}

.left {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}
```

#### Result

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-outside-property |

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

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

See also
--------

* CSS shapes
* Overview of shapes
* `<basic-shape>`
* `shape-margin`
* `shape-image-threshold`


column-fill - CSS: Cascading Style Sheets

column-fill
===========

The **`column-fill`** CSS property controls how an element's contents are balanced when broken into columns.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

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

The `column-fill` property is specified as one of the keyword values listed below. The initial value is `balance` so the content will be balanced across the columns.

### Values

`auto`

Columns are filled sequentially. Content takes up only the room it needs, possibly resulting in some columns remaining empty.

`balance`

Content is equally divided between columns. In fragmented contexts, such as paged media, only the last fragment is balanced. Therefore in paged media, only the last page would be balanced.

`balance-all`
Experimental

Content is equally divided between columns. In fragmented contexts, such as paged media, all fragments are balanced.

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

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

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

column-fill =
  auto         |
  balance      |
  balance-all

```

Examples
--------

### Balancing column content

#### HTML

```html
<p class="fill-auto">
  This paragraph fills columns one at a time. Since all of the text can fit in
  the first column, the others are empty.
</p>

<p class="fill-balance">
  This paragraph attempts to balance the amount of content in each column.
</p>
```

#### CSS

```css
p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}
```

#### Result

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # cf |

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

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

**Warning:** There are some interoperability issues and bugs with `column-fill` across browsers, due to unresolved issues in the specification.

In particular, when using `column-fill: auto` to fill columns sequentially, Chrome will only consult this property if the multicol container has a size in the block dimension (e.g., height in a horizontal writing mode). Firefox will always consult this property, therefore filling the first column with all of the content in cases where there is no size.

See also
--------

* Multiple-column Layout
* `column-count`
* `column-width`


font-smooth - CSS: Cascading Style Sheets

font-smooth
===========

**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 **`font-smooth`** CSS property controls the application of anti-aliasing when fonts are rendered.

Syntax
------

```css
/\* Keyword values \*/
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/\* <length> value \*/
font-smooth: 2em;

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

**Note:** WebKit implements a similar property, but with different values: **`-webkit-font-smoothing`**. It only works on macOS.

* `auto` - Let the browser decide (Uses subpixel anti-aliasing when available; this is the default)
* `none` - Turn font smoothing off; display text with jagged sharp edges.
* `antialiased` - Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to anti-aliasing for light text on dark backgrounds makes it look lighter.
* `subpixel-antialiased` - On most non-retina displays, this will give the sharpest text.

**Note:** Firefox implements a similar property, but with different values: **`-moz-osx-font-smoothing`**. It only works on macOS.

* `auto` - Allow the browser to select an optimization for font smoothing, typically `grayscale`.
* `grayscale` - Render text with grayscale anti-aliasing, as opposed to the subpixel. Switching from subpixel rendering to anti-aliasing for light text on dark backgrounds makes it look lighter.

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

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

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

font-smooth =
  auto | never | always | <absolute-size> | <length>
```

Examples
--------

### Basic usage example

The following example shows the Safari/Chromium and Firefox equivalents that turn on font-smoothing on macOS. In both cases the smoothed font should look slightly lighter in weight.

For those of you not on a macOS system, here is a screenshot (the live version appears later on):

![Two texts examples one with the font-smooth property and another one without](/en-US/docs/Web/CSS/font-smooth/smoothing.png)

#### HTML

```html
<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>
```

#### CSS

```css
html {
  background-color: black;
  color: white;
  font-size: 3rem;
}

p {
  text-align: center;
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

#### Result

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

Not part of any standard.

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

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

See also
--------

* Please Stop "Fixing" Font Smoothing – UsabilityPost
* Laissez-faire font smoothing and anti-aliasing


scroll-margin-left - CSS: Cascading Style Sheets

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

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

Try it
------

Syntax
------

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

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

### Values

`<length>`

An outset from the left edge of the scroll container.

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

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

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

scroll-margin-left =
  <length>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

See also
--------

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


::-webkit-meter-even-less-good-value - CSS: Cascading Style Sheets

::-webkit-meter-even-less-good-value
====================================

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

The **`::-webkit-meter-even-less-good-value`** styles the `<meter>` element when the value and the optimum attributes fall outside the low-high range, but in opposite zones. To illustrate, it applies when *value* < *low* < *high* < *optimum* or *value* > *high* > *low* > *optimum*.

Red is the default color.

Syntax
------

```css
::-webkit-meter-even-less-good-value {
  /\* ... \*/
}
```

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

Not part of any standard.

Examples
--------

### HTML

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

### CSS

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

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

#styled::-webkit-meter-even-less-good-value {
  background: linear-gradient(to bottom, #f77, #900 45%, #900 55%, #f77);
  height: 100%;
  box-sizing: border-box;
}
```

### JavaScript

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

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

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

### Result

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

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

See also
--------

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

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`


color - CSS: Cascading Style Sheets

color
=====

The **`color`** CSS property sets the foreground color value of an element's text and text decorations, and sets the `currentcolor` value. `currentcolor` may be used as an indirect value on *other* properties and is the default for other color properties, such as `border-color`.

Try it
------

For an overview of using color in HTML, see Applying color to HTML elements using CSS.

Syntax
------

```css
/\* Keyword values \*/
color: currentcolor;

/\* <named-color> values \*/
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/\* <hex-color> values \*/
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/\* <rgb()> values and legacy <rgba()> values\*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);

/\* <hsl()> values and legacy <hsla()> values \*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/\* <hwb()> values \*/
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);

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

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

Note that the value must be a uniform `color`. It can't be a `<gradient>`, which is actually a type of `<image>`.

### Values

`<color>`

Sets the color of the textual and decorative parts of the element.

`currentcolor`

Sets the color to the element's `color` property value. However, if set as the value of `color`, `currentcolor` is treated as `inherit`.

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

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

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

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

|  |  |
| --- | --- |
| Initial value | `canvastext` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | computed color |
| Animation type | by computed value type |

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

color =
  <color>

```

Examples
--------

### Making text red

The following are all ways to make a paragraph's text red:

```css
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255 0 0);
}
p {
  color: rgb(100% 0% 0%);
}
p {
  color: hsl(0 100% 50%);
}

/\* 50% translucent \*/
p {
  color: #ff000080;
}
p {
  color: rgb(255 0 0 / 50%);
}
p {
  color: hsl(0 100% 50% / 50%);
}
```

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

| Specification |
| --- |
| CSS Color Module Level 4 # the-color-property |

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

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

See also
--------

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


scroll-padding - CSS: Cascading Style Sheets

scroll-padding
==============

The **`scroll-padding`** shorthand property sets scroll padding on all sides of an element at once, much like the `padding` property does for padding on an element.

Try it
------

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

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

This property is a shorthand for the following CSS properties:

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

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

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

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

### Values

`<length-percentage>`

An inwards offset from the corresponding edge of the scrollport, as a valid `<length>` or a `<percentage>`.

`auto`

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

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `scroll-padding-bottom`: `auto`
* `scroll-padding-left`: `auto`
* `scroll-padding-right`: `auto`
* `scroll-padding-top`: `auto`
 |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as each of the properties of the shorthand:* `scroll-padding-bottom`: as specified
* `scroll-padding-left`: as specified
* `scroll-padding-right`: as specified
* `scroll-padding-top`: as specified
 |
| Animation type | by computed value type |

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

scroll-padding =
  [ auto | <length-percentage [0,∞]> ]{1,4}

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

```

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

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

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

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

See also
--------

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


counter-set - CSS: Cascading Style Sheets

counter-set
===========

The **`counter-set`** CSS property sets CSS counters to the given values.

The `counter-set` property will create a new counter for each named counter in the list of space-separated counter and value pairs that doesn't already exist. If a named counter in the list is missing a value, the value of the counter will be set to `0`.

Try it
------

**Note:** The counter's value can be incremented or decremented using the `counter-increment` CSS property.

Syntax
------

```css
/\* Set "my-counter" to 0 \*/
counter-set: my-counter;

/\* Set "my-counter" to -1 \*/
counter-set: my-counter -1;

/\* Set "counter1" to 1, and "counter2" to 4 \*/
counter-set: counter1 1 counter2 4;

/\* Cancel any counter that could have been set in less specific rules \*/
counter-set: none;

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

The `counter-set` property is specified as either one of the following:

* A `<custom-ident>` naming the counter, followed optionally by an `<integer>`. You may specify as many counters to reset as you want, with each name or name-number pair separated by a space.
* The keyword value `none`.
### Values

`<custom-ident>`

The name of the counter to set.

`<integer>`

The value to set the counter to on each occurrence of the element. Defaults to `0` if not specified. If there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a starting value of `0` (though it may then immediately set or increment that value to something different).

`none`

No counter set is to be performed. This can be used to override a `counter-set` defined in a less specific rule.

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

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

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

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

```

Examples
--------

### Setting named counters

```css
h1 {
  counter-set: chapter section 1 page;
  /\* Sets the chapter and page counters to 0,
 and the section counter to 1 \*/
}
```

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

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

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

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

See also
--------

* Using CSS Counters
* `counter-increment`
* `counter-reset`
* `@counter-style`
* `counter()` and `counters()` functions
* `content` property
* CSS lists and counters module
* CSS counter styles module


view-timeline - CSS: Cascading Style Sheets

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

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

The **`view-timeline`** CSS shorthand property is used to define 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.

`view-timeline` can contain two constituent values — a name for the named view progress timeline and an optional scroll axis value.
 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 scroller does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.

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

This property is a shorthand for the following CSS properties:

* `view-timeline-name`
* `view-timeline-axis`
Syntax
------

```css
/\* two values: one each for view-timeline-name and view-timeline-axis \*/
view-timeline: --custom_name_for_timeline block;
view-timeline: --custom_name_for_timeline inline;
view-timeline: --custom_name_for_timeline y;
view-timeline: --custom_name_for_timeline x;
view-timeline: none block;
view-timeline: none inline;
view-timeline: none y;
view-timeline: none x;

/\* one value: view-timeline-name \*/
view-timeline: none;
view-timeline: --custom_name_for_timeline;
```

The `view-timeline` shorthand property can be applied to a container element as a combination of the `<view-timeline-name>` and `<view-timeline-axis>` values. At least one of the values must be specified. If both the values are specified, the order followed must be the `<view-timeline-name>` value followed by the `<view-timeline-axis>` value.

**Note:** `<view-timeline-name>`s must be `<dashed-ident>` values, which means they must start with `--`. This helps avoid name clashes with standard CSS keywords.

### Values

`<view-timeline-name>`

See `view-timeline-name`.

`<view-timeline-axis>`

See `view-timeline-axis`. The default value is `block`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `view-timeline-name`: `none`
* `view-timeline-axis`: `block`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `view-timeline-name`: `none` or an ordered list of identifiers
* `view-timeline-axis`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `view-timeline-name`: Not animatable
* `view-timeline-axis`: Not animatable
 |

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

view-timeline =
  [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#

```

Examples
--------

### Creating a named view progress timeline

 A view progress timeline named `--subjectReveal` is defined using the `view-timeline` 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` 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: --subjectReveal block;
  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-shorthand |

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-axis`, `view-timeline-name`
* CSS scroll-driven animations


margin-inline-end - CSS: Cascading Style Sheets

margin-inline-end
=================

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

Try it
------

Syntax
------

```css
/\* <length> values \*/
margin-inline-end: 10px; /\* An absolute length \*/
margin-inline-end: 1em; /\* relative to the text size \*/
margin-inline-end: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-inline-end: auto;

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

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

### Values

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

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

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

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

```

Examples
--------

### Setting inline end margin

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}
```

#### Result

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

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

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

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

See also
--------

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


:focus - CSS: Cascading Style Sheets

:focus
======

The **`:focus`** CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's `Tab` key.

Try it
------

**Note:** This pseudo-class applies only to the focused element itself. Use `:focus-within` if you want to select an element that *contains* a focused element.

Syntax
------

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

Examples
--------

### HTML

```html
<div><input class="red-input" value="I'll be red when focused." /></div>
<div><input class="blue-input" value="I'll be blue when focused." /></div>
```

### CSS

```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```

### Result

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

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

* Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### `:focus { outline: none; }`

Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.

* Quick Tip: Never remove CSS outlines
Specifications
--------------

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

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

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

See also
--------

* `:focus-visible`
* `:focus-within`


asin() - CSS: Cascading Style Sheets

asin()
======

The **`asin()`** CSS function is a trigonometric function that returns the inverse sine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an `<angle>` between `-90deg` and `90deg`.

Syntax
------

```css
/\* Single <number> values \*/
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));

/\* Other values \*/
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));
```

### Parameter

The `asin(number)` function accepts only one value as its parameter.

`number`

A calculation which resolves to a `<number>` between `-1` and `1`.

### Return value

The inverse sine of an `number` will always return an `<angle>` between `-90deg` and `90deg`.

* If `number` is less than `-1` or greater than `1`, the result is `NaN`.
* If `number` is `0⁻`, the result is `0⁻`.
### Formal syntax
```

<asin()> =
  asin( <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 `asin()` 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(asin(1));
}
div.box-2 {
  transform: rotate(asin(0.5));
}
div.box-3 {
  transform: rotate(asin(0));
}
div.box-4 {
  transform: rotate(asin(-0.5));
}
div.box-5 {
  transform: rotate(asin(-1));
}
```

#### 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()`
* `acos()`
* `atan()`
* `atan2()`


place-content - CSS: Cascading Style Sheets

place-content
=============

The **`place-content`** CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the `align-content` and `justify-content` properties) in a relevant layout system such as Grid or Flexbox.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `align-content`
* `justify-content`
Syntax
------

```css
/\* Positional alignment \*/
/\* align-content does not take left and right values \*/
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/\* Baseline alignment \*/
/\* justify-content does not take baseline values \*/
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/\* Distributed alignment \*/
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

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

The first value is the `align-content` property value, the second the `justify-content` one.

**Note:** If the second value is not present, the first value is used for both, provided it is a valid value for both. If it is invalid for one or the other, the whole value will be invalid.

### Values

`start`

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

`end`

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

`flex-start`

 The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start or cross-start side.
 This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `start`.

`flex-end`

 The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end or cross-end side.
 This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `end`.

`center`

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

`left`

The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

`right`

The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

`space-between`

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

`baseline`, `first baseline`, `last baseline`

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

`space-around`

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

`space-evenly`

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

`stretch`

If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size exactly fills the alignment container

`safe`

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `align-content`: `normal`
* `justify-content`: `normal`
 |
| Applies to | multi-line flex containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `align-content`: as specified
* `justify-content`: as specified
 |
| Animation type | discrete |

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

place-content =
  <'align-content'> <'justify-content'>?

```

Examples
--------

### Placing content in a flex container

#### HTML

```html
<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br />ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br />ipsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>
```

```
<code>writing-mode:</code
><select id="writingMode">
  <option value="horizontal-tb" selected>horizontal-tb</option>
  <option value="vertical-rl">vertical-rl</option>
  <option value="vertical-lr">vertical-lr</option>
  <option value="sideways-rl">sideways-rl</option>
  <option value="sideways-lr">sideways-lr</option></select
><code>;</code><br />

<code>direction:</code
><select id="direction">
  <option value="ltr" selected>ltr</option>
  <option value="rtl">rtl</option></select
><code>;</code><br />

<code>place-content:</code
><select id="alignContentAlignment">
  <option value="normal">normal</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="baseline">baseline</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly" selected>space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center">center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option>
</select>
<select id="justifyContentAlignment">
  <option value="normal">normal</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center" selected>center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option></select
><code>;</code>
```

```
function update() {
  document.getElementById("container").style.placeContent =
    `${document.getElementById("alignContentAlignment").value} ` +
    `${document.getElementById("justifyContentAlignment").value}`;
}

const alignContentAlignment = document.getElementById("alignContentAlignment");
alignContentAlignment.addEventListener("change", update);

const justifyContentAlignment = document.getElementById(
  "justifyContentAlignment",
);
justifyContentAlignment.addEventListener("change", update);

const writingM = document.getElementById("writingMode");
writingM.addEventListener("change", (evt) => {
  document.getElementById("container").style.writingMode = evt.target.value;
});

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

#### CSS

```css
#container {
  display: flex;
  height: 240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /\* Can be changed in the live sample \*/
  direction: ltr; /\* Can be changed in the live sample \*/
  place-content: flex-end center; /\* Can be changed in the live sample \*/
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # place-content |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `align-content` property
* The `justify-content` property


overscroll-behavior-y - CSS: Cascading Style Sheets

overscroll-behavior-y
=====================

The **`overscroll-behavior-y`** CSS property sets the browser's behavior when the vertical boundary of a scrolling area is reached.

See `overscroll-behavior` for a full explanation.

Syntax
------

```css
/\* Keyword values \*/
overscroll-behavior-y: auto; /\* default \*/
overscroll-behavior-y: contain;
overscroll-behavior-y: none;

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

The `overscroll-behavior-y` property is specified as a keyword chosen from the list of values below.

### Values

`auto`

The default scroll overflow behavior occurs as normal.

`contain`

Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

`none`

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

overscroll-behavior-y =
  contain  |
  none     |
  auto

```

Examples
--------

### Preventing an underlying element from scrolling vertically

```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```

See `overscroll-behavior` for a full example and explanation.

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |

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

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

See also
--------

* Take control of your scroll: customizing pull-to-refresh and overflow effects
* The mapped logical properties: `overscroll-behavior-inline`, `overscroll-behavior-block`


::view-transition-image-pair - CSS: Cascading Style Sheets

::view-transition-image-pair
============================

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

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

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

The **`::view-transition-image-pair`** CSS pseudo-element represents a container for a view transition's "old" and "new" view states — before and after the transition.

During a view transition, `::view-transition-image-pair` is included in the associated pseudo-element tree as explained in The view transition process. It is only ever a child of a `::view-transition-group`. In terms of children, it can have a `::view-transition-new` or a `::view-transition-old`, or both.

`::view-transition-image-pair` is given the following default styling in the UA stylesheet:

```css
html::view-transition-image-pair(\*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```

During a view transition, `::view-transition-image-pair` has `isolation: isolate` set on it in the view transition style sheet so that its children can be blended with non-normal blend modes without affecting other visual outputs.

Syntax
------

```css
::view-transition-image-pair(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` can be one of the following values:

`*`

Causes the pseudo-element to match all view transition groups.

`root`

Causes the pseudo-element to match the default `root` view transition group created by the user agent to contain the view transition for the overall page, meaning any element not assigned to its own specific view transition group via the `view-transition-name` property.

`<custom-ident>`

Causes the pseudo-element to match a specific view transition group created by assigning the given `<custom-ident>` to an element via the `view-transition-name` property.

Examples
--------

```css
::view-transition-image-pair(root) {
  isolation: auto;
}
```

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

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |

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

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

See also
--------

* View Transitions API
* Smooth and simple transitions with the View Transitions API


-moz-user-input - CSS: Cascading Style Sheets

-moz-user-input
===============

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

In Mozilla applications, **`-moz-user-input`** determines if an element will accept user input.

For elements that normally take user input, such as a `<textarea>`, the initial value of `-moz-user-input` is `enabled`.

**Note:** `-moz-user-input` was one of the proposals leading to the proposed CSS 3 `user-input` property, which has not yet reached Candidate Recommendation (call for implementations). A similar property, `user-focus`, was proposed in early drafts of a predecessor of the User Interface for CSS3 specification, but was rejected by the working group.

Syntax
------

```css
/\* Keyword values \*/
-moz-user-input: none;
-moz-user-input: enabled;
-moz-user-input: disabled;

/\* Global values \*/
-moz-user-input: inherit;
-moz-user-input: initial;
-moz-user-input: unset;
```

### Values

`none`
Deprecated

Non-standard

The element does not respond to user input, and it does not become `:active`.

`enabled`
Deprecated

Non-standard

The element accepts user input. For textboxes, this is the default behavior. **Please note that this value is no longer supported in Firefox 60 onwards (Firefox bug 1405087).**

`disabled`
Deprecated

Non-standard

The element does not accept user input. However, this is not the same as setting `disabled` to true, in that the element is drawn normally. **Please note that this value is no longer supported in Firefox 60 onwards (Firefox bug 1405087).**

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

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

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

-moz-user-input =
  auto | none | enabled | disabled
```

Examples
--------

### Disabling user input for an element

```css
input.example {
  /\* The user will be able to select the text, but not change it. \*/
  -moz-user-input: disabled;
}
```

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-modify`
* `-moz-user-select`


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

-webkit-mask-attachment
=======================

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

If a `mask-image` is specified, `-webkit-mask-attachment` determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.

Syntax
------

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

/\* Multiple values \*/
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

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

### Values

scroll

If `scroll` is specified, the mask image scrolls within the viewport along with the block that contains the mask image.

fixed

If `fixed` is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport.

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

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

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

-webkit-mask-attachment =
  <attachment>#
```

Examples
--------

### Fixing a mask image to the viewport

```css
body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}
```

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

* `mask`
* `mask-clip`
* `-webkit-mask-box-image`
* `mask-origin`
* `mask-image`
* `-webkit-mask-composite`
* `mask-repeat`


mask-clip - CSS: Cascading Style Sheets

mask-clip
=========

The **`mask-clip`** CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.

Syntax
------

```css
/\* <coord-box> values \*/
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/\* Keyword values \*/
mask-clip: no-clip;

/\* Non-standard keyword values \*/
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/\* Multiple values \*/
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

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

One or more of the keyword values listed below, separated by commas.

### Values

`content-box`

The painted content is clipped to the content box.

`padding-box`

The painted content is clipped to the padding box.

`border-box`

The painted content is clipped to the border box.

`fill-box`

The painted content is clipped to the object bounding box.

`stroke-box`

The painted content is clipped to the stroke bounding box.

`view-box`

Uses the nearest SVG viewport as reference box. If a `viewBox` attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.

`no-clip`

The painted content is not clipped.

`border`
Non-standard

This keyword behaves the same as `border-box`.

`padding`
Non-standard

This keyword behaves the same as `padding-box`.

`content`
Non-standard

This keyword behaves the same as `content-box`.

`text`
Non-standard

This keyword clips the mask image to the text of the element.

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

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

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

mask-clip =
  [ <coord-box> | no-clip ]#

<coord-box> =
  <paint-box>  |
  view-box

<paint-box> =
  <visual-box>  |
  fill-box      |
  stroke-box

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

```

Examples
--------

### Clipping a mask to the border box

Change the `mask-clip` value to any of the allowed values detailed above. If viewing the example in a Chromium-based browser change the value of `-webkit-mask-clip`.

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

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

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

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

See also
--------

* Clipping and Masking in CSS


empty-cells - CSS: Cascading Style Sheets

empty-cells
===========

The **`empty-cells`** CSS property sets whether borders and backgrounds appear around `<table>` cells that have no visible content.

Try it
------

This property has an effect only when the `border-collapse` property is `separate`.

Syntax
------

```css
/\* Keyword values \*/
empty-cells: show;
empty-cells: hide;

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

The `empty-cells` property is specified as one of the keyword values listed below.

### Values

`show`

Borders and backgrounds are drawn like in normal cells.

`hide`

No borders or backgrounds are drawn.

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

|  |  |
| --- | --- |
| Initial value | `show` |
| Applies to | table-cell elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

empty-cells =
  show  |
  hide

```

Examples
--------

### Showing and hiding empty table cells

#### HTML

```html
<table class="table\_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table\_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
```

#### CSS

```css
.table\_1 {
  empty-cells: show;
}

.table\_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}
```

#### Result

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

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

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

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

See also
--------

* `border-collapse`
* Styling tables