align-content - CSS: Cascading Style Sheets

align-content
=============

The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

The interactive example below uses Grid Layout to demonstrate some of the values of this property.

Try it
------

This property has no effect on single line flex containers (i.e. ones with `flex-wrap: nowrap`).

Syntax
------

```css
/\* Basic positional alignment \*/
/\* align-content does not take left and right values \*/
align-content: center; /\* Pack items around the center \*/
align-content: start; /\* Pack items from the start \*/
align-content: end; /\* Pack items from the end \*/
align-content: flex-start; /\* Pack flex items from the start \*/
align-content: flex-end; /\* Pack flex items from the end \*/

/\* Normal alignment \*/
align-content: normal;

/\* Baseline alignment \*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/\* Distributed alignment \*/
align-content: space-between; /\* Distribute items evenly
 The first item is flush with the start,
 the last is flush with the end \*/
align-content: space-around; /\* Distribute items evenly
 Items have a half-size space
 on either end \*/
align-content: space-evenly; /\* Distribute items evenly
 Items have equal space around them \*/
align-content: stretch; /\* Distribute items evenly
 Stretch 'auto'-sized items to fit
 the container \*/

/\* Overflow alignment \*/
align-content: safe center;
align-content: unsafe center;

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

### Values

`start`

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

`end`

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

`flex-start`

 The items are packed flush to each other against the edge of the alignment container depending on the flex container's 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 against the edge of the alignment container depending on the flex container's 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 in the center of the alignment container along the cross axis.

`normal`

The items are packed in their default position as if no `align-content` value was set.

`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 baseline is the line upon which most letters "sit" and below which descenders extend.](/en-US/docs/Web/CSS/align-content/410px-typography_line_terms.svg.png)

The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`space-between`

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

`space-around`

The items are evenly distributed within the alignment container along the cross axis. 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 along the cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same.

`stretch`

If the combined size of the items along the cross axis 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 along the cross axis.

`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 whether overflow which causes data loss might happen, the given alignment value is honored.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | multi-line flex containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

align-content =
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>

<baseline-position> =
  [ first | last ]?  &&
  baseline

<content-distribution> =
  space-between  |
  space-around   |
  space-evenly   |
  stretch

<overflow-position> =
  unsafe  |
  safe

<content-position> =
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

```

Examples
--------

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-content: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

### HTML

```html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

```
const values = document.getElementById("values");
const display = document.getElementById("display");
const container = document.getElementById("container");

values.addEventListener("change", (evt) => {
  container.style.alignContent = evt.target.value;
});

display.addEventListener("change", (evt) => {
  container.className = evt.target.value;
});
```

### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # align-content-property |

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


CSS writing modes - CSS: Cascading Style Sheets

CSS writing modes
=================

The **CSS writing modes** module defines various international writing modes, such as left-to-right (e.g., used by Latin and Indic scripts), right-to-left (e.g., used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts), and vertical (e.g., used by some Asian scripts).

Reference
---------

### Properties

* `direction`
* `glyph-orientation-horizontal`
* `text-combine-upright`
* `text-orientation`
* `unicode-bidi`
* `writing-mode`
Specifications
--------------

| Specification |
| --- |
| CSS Writing Modes Level 4  |


sign() - CSS: Cascading Style Sheets

sign()
======

The **`sign()`** CSS function contains one calculation, and returns `-1` if the numeric value of the argument is negative, `+1` if the numeric value of the argument is positive, `0⁺` if the numeric value of the argument is 0⁺, and `0⁻` if the numeric value of the argument is 0⁻.

**Note:** While ``abs()`` returns the absolute value of the argument, `sign()` returns the sign of the argument.

Syntax
------

```css
/\* property: sign( expression ) \*/
top: sign(20vh - 100px);
```

### Parameters

The `sign(x)` function accepts only one value as its parameter.

`x`

A calculation which resolves to a number.

### Return value

A number representing the sign of `A`:

* If `x` is positive, returns `1`.
* If `x` is negative, returns `-1`.
* If `x` is positive zero, returns `0`.
* If `x` is negative zero, returns `-0`.
* Otherwise, returns `NaN`.
### Formal syntax
```

<sign()> =
  sign( <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
--------

### Background image position

For example, in `background-position` positive percentages resolve to a negative length, and vice versa, if the background image is larger than the background area. Thus `sign(10%)` might return `1` or `-1`, depending on how the percentage is resolved! (Or even `0`, if it's resolved against a zero length.)

```css
div {
  background-position: sign(10%);
}
```

### Position direction

Another use case is to control the `position` of the element. Either a positive or a negative value.

```css
div {
  position: absolute;
  top: calc(100px * sign(var(--value)));
}
```

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

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

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

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

See also
--------

* `abs()`


:read-only - CSS: Cascading Style Sheets

:read-only
==========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`:read-only`** CSS pseudo-class represents an element (such as `input` or `textarea`) that is not editable by the user.

Try it
------

Syntax
------

```css
:read-only {
  /\* ... \*/
}
```

Examples
--------

### Confirming form information in read-only/read-write controls

One use of `readonly` form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. We do just this in the example below.

The `:read-only` pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs. The `:read-write` pseudo-class on the other hand is used to provide some nicer styling to the editable `<textarea>`.

```css
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}
```

You can find the full source code at readonly-confirmation.html; this renders like so:

### Styling read-only non-form controls

This selector doesn't just select `<input>`/`<textarea>` elements — it will select *any* element that cannot be edited by the user.

```html
<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>
```

```css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-read-only |
| Selectors Level 4 # rw-pseudos |

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

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

See also
--------

* `:read-write`
* HTML `contenteditable` attribute


border-inline-style - CSS: Cascading Style Sheets

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

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

Try it
------

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

Syntax
------

```css
/\* <'border-style'> values \*/
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: groove;

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

### Values

`<'border-style'>`

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

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

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

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

border-inline-style =
  <'border-top-style'>{1,2}

```

Examples
--------

### Setting border-inline-style

#### 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;
  border: 5px solid blue;
  border-inline-style: dashed;
}
```

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

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

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

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

See also
--------

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


background-clip - CSS: Cascading Style Sheets

background-clip
===============

The **`background-clip`** CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

Try it
------

If the element has no `background-image` or `background-color`, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to `border-style` or `border-image`); otherwise, the border masks the difference.

**Note:** Because the root element has a different background painting area, the `background-clip` property has no effect when specified on it. See "The backgrounds of special elements."

**Note:** For documents whose root element is an HTML element: if the computed value of `background-image` on the root element is `none` and its `background-color` is `transparent`, user agents must instead propagate the computed values of the `background` properties from that element's first HTML `<body>` child element. The used values of that `<body>` element's `background` properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the `<body>` element rather than the HTML element.

Syntax
------

```css
/\* Keyword values \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

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

### Values

`border-box`

The background extends to the outside edge of the border (but underneath the border in z-ordering).

`padding-box`

The background extends to the outside edge of the padding. No background is drawn beneath the border.

`content-box`

The background is painted within (clipped to) the content box.

`text`

The background is painted within (clipped to) the foreground text.

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

When using `background-clip: text` check that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

If the background image does not load, this could also lead to the text becoming unreadable. Add a fallback `background-color` to prevent this from happening, and test without the image.

Consider using feature queries with `@supports` to test for support of `background-clip: text` and provide an accessible alternative where it is not supported.

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

|  |  |
| --- | --- |
| Initial value | `border-box` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | a repeatable list |

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

background-clip =
  <visual-box>#

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

```

Examples
--------

### HTML

```html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>
```

### CSS

```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgb(0 0 0 / 20%);
}
```

#### Result

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

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

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

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

See also
--------

* The `clip-path` property creates a clipping region that defines what part of an *entire element* should be displayed.
* Background properties: `background`, `background-color`, `background-image`, `background-origin`
* Introduction to the CSS box model


::-moz-list-number - CSS: Cascading Style Sheets

::-moz-list-number
==================

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

The **`::-moz-list-number`** CSS pseudo-element is a Mozilla extension that represents the marker (typically a number) of a list item (`<li>`) in an ordered list (`<ol>`).

Syntax
------

```css
li::-moz-list-number {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
```

### CSS

```css
li::-moz-list-number {
  font-style: italic;
  font-weight: bold;
}
```

### Result

| Screenshot | Live sample |
| --- | --- |
|  |  |

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

Not part of any standard.

See also
--------

* `::-moz-list-bullet`
* `::marker`


@scope - CSS: Cascading Style Sheets

@scope
======

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

The **`@scope`** CSS at-rule enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.

In JavaScript, `@scope` can be accessed via the CSS object model interface `CSSScopeRule`.

Syntax
------

The `@scope` at-rule contains one or more rulesets (termed **scoped style rules**) and defines a scope in which to apply them to selected elements. `@scope` can be used in two ways:

1. As a standalone block inside your CSS, in which case it includes a prelude section that includes **scope root** and optional **scope limit** selectors — these define the upper and lower bounds of the scope.

```css
@scope (scope root) to (scope limit) {
  rulesets
}
```

2. As inline styles included inside a `<style>` element in your HTML, in which case the prelude is omitted, and the enclosed ruleset is automatically scoped to the `<style>` element's enclosing parent element.

```html
<parent-element>
  <style>
 @scope {
 rulesets
 }
 </style>
</parent-element>
```

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

A complex web document might include components such as headers, footers, news articles, maps, media players, ads, and others. As complexity increases, effectively managing the styling for these components becomes more of a concern, and effective scoping of styles helps us manage this complexity. Let's consider the following DOM tree:
```

body
└─ article.feature
   ├─ section.article-hero
   │  ├─ h2
   │  └─ img
   │
   ├─ section.article-body
   │  ├─ h3
   │  ├─ p
   │  ├─ img
   │  ├─ p
   │  └─ figure
   │     ├─ img
   │     └─ figcaption
   │
   └─ footer
      ├─ p
      └─ img
```

If you wanted to select the `<img>` element inside the `<section>` with a class of `article-body`, you could do the following:

* Write a selector like `.feature > .article-body > img`. However, that has high specificity so is hard to override, and is also tightly coupled to the DOM structure. If your markup structure changes in the future, you might need to rewrite your CSS.
* Write something less specific like `.article-body img`. However, that will select all images inside the `section`.

This is where `@scope` is useful. It allows you to define a precise scope inside which your selectors are allowed to target elements. For example, you could solve the above problem using a standalone `@scope` block like the following:

```css
@scope (.article-body) to (figure) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}
```

The `.article-body` scope root selector defines the upper bound of the DOM tree scope in which the ruleset will be applied, and the `figure` scope limit selector defines the lower bound. As a result, only `<img>` elements inside a `<section>` with a class of `article-body`, but not inside `<figure>` elements, will be selected.

**Note:** This kind of scoping — with an upper and lower bound — is commonly referred to as a **donut scope**.

If you want to select all images inside a `<section>` with a class of `article-body`, you can omit the scope limit:

```css
@scope (.article-body) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}
```

Or you could include your `@scope` block inline inside a `<style>` element, which in turn is inside the `<section>` with a class of `article-body`:

```html
<section class="article-body">
  <style>
 @scope {
 img {
 border: 5px solid black;
 background-color: goldenrod;
 }
 }
 </style>

  <!-- ... -->
</section>
```

**Note:** It is important to understand that, while `@scope` allows you to isolate the application of selectors to specific DOM subtrees, it does not completely isolate the applied styles to within those subtrees. This is most noticeable with inheritance — properties that are inherited by children (for example `color` or `font-family`) will still be inherited, beyond any set scope limit.

### The `:scope` pseudo-class

In the context of a `@scope` block, the `:scope` pseudo-class represents the scope root — it provides an easy way to apply styles to the scope root itself, from inside the scope:

```css
@scope (.feature) {
  :scope {
    background: rebeccapurple;
    color: antiquewhite;
    font-family: sans-serif;
  }
}
```

In fact, `:scope` is implicitly prepended to all scoped style rules. If you want, you can explicitly prepend `:scope` or prepend the nesting selector (`&`) to get the same effect if you find these representations easier to understand.

The three rules in the following block are all equivalent in what they select:

```css
@scope (.feature) {
  img { ... }

  :scope img { ... }

  & img { ... }
}
```

### Notes on scoped selector usage

* A scope limit can use `:scope` to specify a specific relationship requirement between the scope limit and root. For example:

```css
/\* figure is only a limit when it is a direct child of the :scope \*/
@scope (.article-body) to (:scope > figure) { ... }
```

* A scope limit can reference elements outside the scope root using `:scope`. For example:

```css
/\* figure is only a limit when the :scope is inside .feature \*/
@scope (.article-body) to (.feature :scope figure) { ... }
```

* Scoped style rules can't escape the subtree. Selections like `:scope + p` are invalid because that selection would be outside the subtree.
* It is perfectly valid to define the scope root and limit as a selector list, in which case multiple scopes will be defined. In the following example the styles are applied to any `<img>` inside a `<section>` with a class of `article-hero` or `article-body`, but not if it is nested inside a `<figure>`:

```css
@scope (.article-hero, .article-body) to (figure) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}
```

### Specificity in `@scope`

Including a ruleset inside a `@scope` block does not affect the specificity of its selector, regardless of the selectors used inside the scope root and limit. For example:

```css
@scope (.article-body) {
  /\* img has a specificity of 0-0-1, as expected \*/
  img { ... }
}
```

However, if you decide to explicitly prepend the `:scope` pseudo-class to your scoped selectors, you'll need to factor it in when calculating their specificity. `:scope`, like all regular pseudo-classes, has a specificity of 0-1-0. For example:

```css
@scope (.article-body) {
  /\* :scope img has a specificity of 0-1-0 + 0-0-1 = 0-1-1 \*/
  :scope img { ... }
}
```

When using the `&` selector inside a `@scope` block, `&` represents the scope root selector; it is internally calculated as that selector wrapped inside an `:is()` pseudo-class function. So for example, in:

```css
@scope (figure, #primary) {
  & img { ... }
}
```

`& img` is equivalent to `:is(figure, #primary) img`. Since `:is()` takes the specificity of its most specific argument (`#primary`, in this case), the specificity of the scoped `& img` selector is therefore 1-0-0 + 0-0-1 = 1-0-1.

### The difference between `:scope` and `&` inside `@scope`

`:scope` represents the matched scope root, whereas `&` represents the selector used to match the scope root. Because of this, it is possible to chain `&` multiple times. However, you can only use `:scope` once — you can't match a scope root inside a scope root.

```css
@scope (.feature) {
  /\* Selects a .feature inside the matched root .feature \*/
  & & { ... }

  /\* Doesn't work \*/
  :root :root { ... }
}
```

### How `@scope` conflicts are resolved

`@scope` adds a new criterion to the CSS cascade: **scoping proximity**. This states that when two scopes have conflicting styles, the style that has the smallest number of hops up the DOM tree hierarchy to the scope root is applied. Let's look at an example to see what this means.

Take the following HTML snippet, where different-themed cards are nested inside one another:

```html
<div class="light-theme">
  <p>Light theme text</p>
  <div class="dark-theme">
    <p>Dark theme text</p>
    <div class="light-theme">
      <p>Light theme text</p>
    </div>
  </div>
</div>
```

If you wrote the theme CSS like so, you'd run into trouble:

```css
.light-theme {
  background: #ccc;
}

.dark-theme {
  background: #333;
}

.light-theme p {
  color: black;
}

.dark-theme p {
  color: white;
}
```

The innermost paragraph is supposed to be colored black because it is inside a light theme card. However, it's targeted by both `.light-theme p` and `.dark-theme p`. Because the `.dark-theme p` rule appears later in the source order, it is applied, and the paragraph ends up being wrongly colored white.

To fix this, you can use `@scope` as follows:

```css
@scope (.light-theme) {
  :scope {
    background: #ccc;
  }
  p {
    color: black;
  }
}

@scope (.dark-theme) {
  :scope {
    background: #333;
  }
  p {
    color: white;
  }
}
```

Now the innermost paragraph is correctly colored black. This is because it is only one DOM tree hierarchy level away from the `.light-theme` scope root, but two levels away from the `.dark-theme` scope root. Therefore, the light style wins.

**Note:** Scoping proximity overrules source order but is itself overridden by other, higher-priority criteria such as importance, layers, and specificity.

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

@scope =
  @scope [ ( <scope-start> ) ]? [ to ( <scope-end> ) ]? { <rule-list> }

```

Examples
--------

### Basic style inside scope roots

In this example, we use two separate `@scope` blocks to match links inside elements with a `.light-scheme` and `.dark-scheme` class respectively. Note how `:scope` is used to select and provide styling to the scope roots themselves. In this example, the scope roots are the `<div>` elements that have the classes applied to them.

#### HTML

```html
<div class="light-scheme">
  <p>
    MDN contains lots of information about
    <a href="/en-US/docs/Web/HTML">HTML</a>,
    <a href="/en-US/docs/Web/CSS">CSS</a>, and
    <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
  </p>
</div>

<div class="dark-scheme">
  <p>
    MDN contains lots of information about
    <a href="/en-US/docs/Web/HTML">HTML</a>,
    <a href="/en-US/docs/Web/CSS">CSS</a>, and
    <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
  </p>
</div>
```

#### CSS
```

div {
  padding: 10px;
}
```

```css
@scope (.light-scheme) {
  :scope {
    background-color: plum;
  }

  a {
    color: darkmagenta;
  }
}

@scope (.dark-scheme) {
  :scope {
    background-color: darkmagenta;
    color: antiquewhite;
  }

  a {
    color: plum;
  }
}
```

#### Result

The above code renders like this:

### Scope roots and scope limits

In this example, we have an HTML snippet that matches the DOM structure we talked about earlier in the Description section. This structure represents a typical article summary. The key features to note are the `<img>` elements, which are nested at various levels in the structure.

The aim of this example is to show how to use a scope root and limit to style `<img>` elements starting at the top of the hierarchy, but only down as far as (and not including) the `<img>` inside the `<figure>` element — in effect creating a donut scope.

#### HTML

```html
<article class="feature">
  <section class="article-hero">
    <h2>Article heading</h2>
    <img alt="image" />
  </section>

  <section class="article-body">
    <h3>Article subheading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod
      consectetur leo, nec eleifend quam volutpat vitae. Duis quis felis at
      augue imperdiet aliquam. Morbi at felis et massa mattis lacinia. Cras
      pharetra velit nisi, ac efficitur magna luctus nec.
    </p>

    <img alt="image" />

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <figure>
      <img alt="image" />
      <figcaption>My infographic</figcaption>
    </figure>
  </section>

  <footer>
    <p>Written by Chris Mills.</p>
    <img alt="image" />
  </footer>
</article>
```

#### CSS
```

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

article {
  margin-bottom: 20px;
  padding: 10px;
  border: 2px solid gray;
}

.article-hero,
.article-body,
article footer {
  padding: 20px;
  margin: 10px;
  border: 2px solid lightgray;
}

img {
  height: 100px;
  width: 100%;
  display: block;
  background-color: lightgray;
  color: black;
  padding: 10px;
}
```

In our CSS, we have two `@scope` blocks:

* The first `@scope` block defines its scope root as elements with a class of `.feature` (in this case, the outer `<div>` only), demonstrating how `@scope` can be used to theme a specific HTML subset.
* The second `@scope` block also defines its scope root as elements with a class of `.feature`, but in addition defines a scope limit of `figure`. This ensures that contained rulesets will only be applied to matching elements within the scope root (`<div class="figure"> ... </div>` in this case) that **are not** nested inside descendant `<figure>` elements. This `@scope` block contains a single ruleset that styles `<img>` elements with a thick black border and a golden background color.

```css
/\* Scoped CSS \*/

@scope (.feature) {
  :scope {
    background: rebeccapurple;
    color: antiquewhite;
    font-family: sans-serif;
  }

  figure {
    background-color: white;
    border: 2px solid black;
    color: black;
    padding: 10px;
  }
}

/\* Donut scope \*/

@scope (.feature) to (figure) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}
```

#### Result

In the rendered code, note how all of the `<img>` elements are styled with the thick border and golden background, except for the one inside the `<figure>` element (labeled "My infographic").

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 6 # scoped-styles |

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

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

See also
--------

* `:scope`
* `CSSScopeRule`
* Limit the reach of your selectors with the CSS `@scope` at-rule on developer.chrome.com (2023)


<ident> - CSS: Cascading Style Sheets

<ident>
=======

The **`<ident>`** CSS data type denotes an arbitrary string used as an identifier.

Syntax
------

The syntax of `<custom-ident>` is similar to CSS identifiers (such as property names), except that it is case-sensitive. It consists of one or more characters, where characters can be any of the following:

* any alphabetical character (`A` to `Z`, or `a` to `z`),
* any decimal digit (`0` to `9`),
* a hyphen (`-`),
* an underscore (`_`),
* an escaped character (preceded by a backslash, `\`),
* a Unicode character (in the format of a backslash, `\`, followed by one to six hexadecimal digits, representing its Unicode code point)

Note that `id1`, `Id1`, `iD1` and `ID1` are all different identifiers as they are case-sensitive. On the other hand, as there are several ways to escape a character, `toto\?` and `toto\3F` are the same identifiers.

Examples
--------

### Valid identifiers
```

nono79        A mix of alphanumeric characters and numbers
ground-level  A mix of alphanumeric characters and a dash
-test         A dash followed by alphanumeric characters
--toto        A custom-property like identifier
_internal     An underscore followed by alphanumeric characters
\22 toto      A Unicode character followed by a sequence of alphanumeric characters
bili\.bob     A correctly escaped period
```

### Invalid identifiers
```

34rem     It must not start with a decimal digit.
-12rad    It must not start with a dash followed by a decimal digit.
bili.bob  Only alphanumeric characters, _, and - needn't be escaped.
'bilibob' This would be a `<string>`.
"bilibob" This would be a `<string>`.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # css-identifier |

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

*As this type is not a real type but a convenience type used to simplify the definition of other CSS syntax, there is no browser compatibility information as such.*

See also
--------

* <custom-ident>
* <dashed-ident>


CSS flexible box layout - CSS: Cascading Style Sheets

CSS flexible box layout
=======================

The **CSS flexible box layout** module defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

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

In the following example a container has been set to `display: flex`, which means that the three child items become flex items. The value of `justify-content` has been set to `space-between` in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of `align-items` being `stretch`. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.

Reference
---------

### Properties

* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `order`
### Properties for alignment

The properties `align-content`, `align-self`, `align-items` and `justify-content` initially appeared in the Flexbox specification, but are now defined in Box Alignment. The Flexbox spec now refers to the Box Alignment specification for up to date definitions. Also additional alignment properties are now defined in Box Alignment.

* `justify-content`
* `align-content`
* `align-items`
* `align-self`
* `place-content`
* `place-items`
* `row-gap`
* `column-gap`
* `gap`
Guides
------

Basic concepts of flexbox

An overview of the features of Flexbox

Relationship of flexbox to other layout methods

How Flexbox relates to other layout methods, and other CSS specifications

Aligning items in a flex container

How the Box Alignment properties work with Flexbox.

Ordering flex items

Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.

Controlling ratios of flex items along the main axis

Explaining the flex-grow, flex-shrink and flex-basis properties.

Mastering wrapping of flex items

How to create flex containers with multiple lines and control the display of the items in those lines.

Typical use cases of flexbox

Common design patterns that are typical Flexbox use cases.

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |

See also
--------

* CSS display module
* Using the multi-keyword syntax with CSS display
* Glossary terms:
    + Flexbox
    + Flex Container
    + Flex Item
    + Main Axis
    + Cross Axis
    + Flex


:playing - CSS: Cascading Style Sheets

:playing
========

 The **`:playing`** CSS pseudo-class selector represents the playback state of an element that is playable, such as `<audio>` or `<video>`, when that element is "playing".
 An element is considered to be playing if it is currently playing the media resource, or if it has temporarily stopped for reasons other than user intent (such as `:buffering` or `:stalled`).

Syntax
------

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

Examples
--------

### CSS

```css
:playing {
  border: 5px solid green;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # selectordef-playing |

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

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

See also
--------

* `:buffering`
* `:muted`
* `:paused`
* `:seeking`
* `:stalled`
* `:volume-locked`
* CSS selectors


border-image-source - CSS: Cascading Style Sheets

border-image-source
===================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`border-image-source`** CSS property sets the source image used to create an element's border image.

Try it
------

The `border-image-slice` property is used to divide the source image into regions, which are then dynamically applied to the final border image.

Syntax
------

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

/\* <image> values \*/
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

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

### Values

`none`

No border image is used. The appearance defined by `border-style` is displayed instead.

`<image>`

Image reference to use for the border.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | `none` or the image with its URI made absolute |
| Animation type | discrete |

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

border-image-source =
  none     |
  <image>

<image> =
  <url>       |
  <gradient>

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

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

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

```

Examples
--------

### Basic example

```css
.box {
  border-image-source: url("image.png");
}
```

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-source |

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

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

See also
--------

* `border`
* `outline`
* `box-shadow`
* `background-image`
* `url()` function
* Border images in CSS: A key focus area for Interop 2023 on MDN blog (2023)


margin-right - CSS: Cascading Style Sheets

margin-right
============

The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

Try it
------

The vertical margins of two adjacent boxes may fuse. This is called *margin collapsing*.

Syntax
------

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

/\* Keyword values \*/
margin-right: auto;

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

The `margin-right` property is specified as the keyword `auto`, or a `<length>`, or a `<percentage>`. Its value can be positive, zero, or negative.

### Values

`<length>`

The size of the margin as a fixed value.

`<percentage>`

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

`auto`

The right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of `margin-left` and `margin-right` are both `auto`, the calculated space is evenly distributed. This table summarizes the different cases:

| Value of `display` | Value of `float` | Value of `position` | Computed value of `auto` | Comment |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`,
 `inline-table` | *any* | `static` or `relative` | `0` | Inline layout mode |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and
 `margin-right` are set to `auto`. In this case, it
 is set to the value centering the element inside its parent.
  | Block layout mode |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | Block layout mode (floating element) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` |
 Internal `table-*` elements don't have margins, use
 `border-spacing` instead
  |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and
 `margin-right` are set to `auto`. In this case, it
 is set to the value centering the border area inside the available
 `width`, if fixed.
  | Absolutely positioned layout mode |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space.
 In this case, it is evenly distributed to all horizontal
 `auto` margins.
  | Flexbox layout mode |

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

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

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

margin-right =
  <length-percentage>  |
  auto

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

```

Examples
--------

### Setting right margin using pixels and percentages

```css
.content {
  margin-right: 5%;
}
.sidebox {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}
```

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

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

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

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

See also
--------

* `margin-top`, `margin-bottom`, and `margin-left` and the `margin` shorthand
* The mapped logical properties: `margin-block-start`, `margin-block-end`, `margin-inline-start`, and `margin-inline-end` and the shorthands `margin-block` and `margin-inline`


ID selectors - CSS: Cascading Style Sheets

ID selectors
============

The CSS **ID selector** matches an element based on the value of the element's `id` attribute. In order for the element to be selected, its `id` attribute must match exactly the value given in the selector.

```css
/\* The element with id="demo" \*/
#demo {
  border: red 2px solid;
}
```

Syntax
------

```css
#id\_value { style properties }
```

Note that syntactically (but not specificity-wise), this is equivalent to the following `attribute selector`:

```css
[id=id\_value] { style properties }
```

Examples
--------

### CSS

```css
#identified {
  background-color: skyblue;
}
```

### HTML

```html
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # id-selectors |

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

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

See also
--------

* CSS Selectors
* Learn CSS: Selectors


ruby-position - CSS: Cascading Style Sheets

ruby-position
=============

The **`ruby-position`** CSS property defines the position of a ruby element relatives to its base element. It can be positioned over the element (`over`), under it (`under`), or between the characters on their right side (`inter-character`).

Try it
------

Syntax
------

```css
/\* Keyword values \*/
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;
ruby-position: alternate;

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

### Values

`over`

![Over example](/en-US/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.20.png)Is a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts.

`under`

![Under example](/en-US/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.07.png)Is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts.

`inter-character`
Experimental

Is a keyword indicating that the ruby has to be placed between the different characters.

`alternate`
Experimental

Is a keyword indicating that the ruby alternates between over and under, when there are multiple levels of annotation.

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

|  |  |
| --- | --- |
| Initial value | `alternate` |
| Applies to | ruby annotations containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

ruby-position =
  [ alternate || [ over | under ] ]  |
  inter-character

```

Examples
--------

### Ruby positioned over the text

#### HTML

```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

#### CSS

```css
ruby {
  ruby-position: over;
}
```

#### Result

### Ruby positioned under the text

#### HTML

```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

#### CSS

```css
ruby {
  ruby-position: under;
}
```

#### Result

### Ruby alternate

#### HTML

```html
<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>
```

#### CSS

```css
ruby {
  ruby-position: alternate; /\* this is also the initial value \*/
}
```

#### Result

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

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # rubypos |

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

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

See also
--------

* HTML Ruby elements: `<ruby>`, `<rt>`, `<rp>`, and `<rtc>`.
* CSS Ruby properties: `ruby-align`, `ruby-merge`.


border-block-start-width - CSS: Cascading Style Sheets

border-block-start-width
========================

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

Try it
------

Syntax
------

```css
/\* <'border-width'> values \*/
border-block-start-width: 5px;
border-block-start-width: thick;

/\* Global values \*/
border-block-start-width: inherit;
border-block-start-width: initial;
border-block-start-width: revert;
border-block-start-width: revert-layer;
border-block-start-width: unset;
```

Related properties are `border-block-end-width`, `border-inline-start-width`, and `border-inline-end-width`, which define the other border widths of the element.

### Values

`<'border-width'>`

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

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

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

border-block-start-width =
  <line-width>

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

```

Examples
--------

### Border width with vertical text

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-start-width: 5px;
}
```

#### Results

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

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

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

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

See also
--------

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


text-decoration-skip-ink - CSS: Cascading Style Sheets

text-decoration-skip-ink
========================

The **`text-decoration-skip-ink`** CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.

Try it
------

`text-decoration-skip-ink` is not part of the `text-decoration` shorthand.

Syntax
------

```css
/\* Single keyword \*/
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/\* Global keywords \*/
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;
```

### Values

`none`

Underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.

`auto`

The default — the browser *may* interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.

`all`

The browser *must* interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the `auto` behavior might not create interruptions.

![An example of "text-decoration-skip-ink".](/en-US/docs/Web/CSS/text-decoration-skip-ink/decoration-skip-ink.png)

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

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

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

text-decoration-skip-ink =
  auto  |
  none  |
  all

```

Examples
--------

### HTML

```html
<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
  この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>
```

### CSS

```css
p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /\* this is the default anyway \*/
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}
```

### Result

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

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

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

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

See also
--------

* `text-decoration`
* `text-decoration-skip`


border-left - CSS: Cascading Style Sheets

border-left
===========

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

Try it
------

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

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

It is actually the same as this one:

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

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

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

This property is a shorthand for the following CSS properties:

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

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

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

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

### Values

`<br-width>`

See `border-left-width`.

`<br-style>`

See `border-left-style`.

`<color>`

See `border-left-color`.

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

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

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

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

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

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

```

Examples
--------

### Applying a left border

#### HTML

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

#### CSS

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

#### Results

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

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

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

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

See also
--------

* `border`
* `border-block`
* `outline`
* Backgrounds and borders
* Learn CSS: Backgrounds and borders


overscroll-behavior-block - CSS: Cascading Style Sheets

overscroll-behavior-block
=========================

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

See `overscroll-behavior` for a full explanation.

Syntax
------

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

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

The `overscroll-behavior-block` 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-block =
  contain  |
  none     |
  auto

```

Examples
--------

### Preventing block overscrolling

In this demo we have two block-level boxes, one inside the other. The outer box has a large `height` set on it so the page will scroll vertically. The inner box has a small `width` (and `height`) set on it so it sits comfortably inside the viewport, but its content is given a large `height` so it will also scroll vertically.

By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this happening in the block direction, we've set `overscroll-behavior-block: contain` on the inner box.

#### HTML

```html
<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-block</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>
```

#### CSS

```css
main {
  height: 3000px;
  width: 500px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-block: contain;
}

div > div {
  height: 1500px;
  width: 100%;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

p {
  padding: 10px;
  background-color: rgb(255 0 0 / 50%);
  margin: 0;
  width: 340px;
  position: relative;
  top: 10px;
  left: 10px;
}
```

#### Result

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

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

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


<hue-interpolation-method> - CSS: Cascading Style Sheets

<hue-interpolation-method>
==========================

 The **`<hue-interpolation-method>`** CSS data type represents the algorithm used for interpolation between `<hue>` values.
 The interpolation method specifies how to find a midpoint between two hue values based on a color wheel.
 It is used as a component of the `<color-interpolation-method>` data type.

When interpolating `<hue>` values, the hue interpolation algorithm defaults to `shorter`.

Syntax
------

A `<hue-interpolation-method>` value consists of the name of a hue interpolation algorithm followed by a literal token `hue`:
```

shorter hue
longer hue
increasing hue
decreasing hue
```

### Values

Any pair of hue angles correspond to two radii on the color wheel, which cut the circumference into two possible arcs for interpolation. Both arcs start at the first radius and end at the second radius, but one goes clockwise and the other goes counterclockwise.

**Note:** The following descriptions and illustrations are based on color wheels in which hue angles increase in a clockwise direction. Be aware that there are color wheels where an increase in angles will be a counterclockwise operation.

For a pair of hue angles `θ1` and `θ2` normalized to the range `[0deg, 360deg)`, there are four algorithms to determine which arc is used when interpolating from `θ1` to `θ2`:

`shorter`

Use the shorter arc. When the two radii coincide, the arc degenerates to a single point. When both arcs have the same lengths:

* If `θ1 < θ2`, use the clockwise arc;
* If `θ1 > θ2`, use the counterclockwise arc.

| `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 135deg`, `θ2 = 45deg` |
| --- | --- |
| shorter with θ1 = 45deg and θ2 = 135deg | shorter with θ1 = 135deg and θ2 = 45deg |

`longer`

Use the longer arc. When the two radii coincide:

* If `θ1 ≤ θ2`, the arc becomes the full circumference with a clockwise orientation.
* If `θ1 > θ2`, the arc becomes the full circumference with a counterclockwise orientation.

When both arcs have the same lengths:

* If `θ1 < θ2`, use the clockwise arc;
* If `θ1 > θ2`, use the counterclockwise arc.

| `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 135deg`, `θ2 = 45deg` |
| --- | --- |
| longer with θ1 = 45deg and θ2 = 135deg | longer with θ1 = 135deg and θ2 = 45deg |

`increasing`

Use the clockwise arc. When the two radii coincide, the arc degenerates to a single point.

| `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 135deg`, `θ2 = 45deg` |
| --- | --- |
| increasing with θ1 = 45deg and θ2 = 135deg | increasing with θ1 = 135deg and θ2 = 45deg |

`decreasing`

Use the counterclockwise arc. When the two radii coincide, the arc degenerates to a single point.

| `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 135deg`, `θ2 = 45deg` |
| --- | --- |
| decreasing with θ1 = 45deg and θ2 = 135deg | decreasing with θ1 = 135deg and θ2 = 45deg |

As there are only two arcs to choose from, these algorithms are pairwise equivalent under certain circumstances. Specifically:

* If `0deg < θ2 - θ1 < 180deg` or `θ2 - θ1 < -180deg`, `shorter` and `increasing` are equivalent, whereas `longer` and `decreasing` are equivalent.
* If `-180deg < θ2 - θ1 < 0deg` or `θ2 - θ1 > 180deg`, `shorter` and `decreasing` are equivalent, whereas `longer` and `increasing` are equivalent.

A notable feature of `increasing` and `decreasing` is that when the hue angle difference passes through `180deg` during transition or animation, the arc will not flip to the other side like `shorter` and `longer` do.

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

<hue-interpolation-method> =
  [ shorter | longer | increasing | decreasing ] hue

```

Examples
--------

### Comparing hue interpolation algorithms

The following example shows the effect of using different hue interpolation algorithms in a `linear-gradient()`.

#### HTML

```html
<div class="hsl">
  <p>HSL</p>
</div>
<div class="hsl-increasing">
  <p>HSL increasing</p>
</div>
<div class="hsl-decreasing">
  <p>HSL decreasing</p>
</div>
<div class="hsl-shorter">
  <p>HSL shorter</p>
</div>
<div class="hsl-longer">
  <p>HSL longer</p>
</div>
<div class="hsl-named">
  <p>HSL named</p>
</div>
<div class="hsl-named-longer">
  <p>HSL named (longer)</p>
</div>
```

#### CSS
```

div {
  border: 1px solid black;
  height: 50px;
  margin: 10px;
  width: 90%;
}
p {
  color: white;
  margin: 6px;
}

/\* Fallback styles \*/
.hsl,
.hsl-shorter,
.hsl-named {
  background: linear-gradient(
    to right,
    hsl(39 100% 50%),
    hsl(46 100% 50%),
    hsl(53 100% 50%),
    hsl(60 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right,
    hsl(190 100% 50%),
    hsl(225 100% 50%),
    hsl(260 100% 50%),
    hsl(295 100% 50%),
    hsl(330 100% 50%),
    hsl(365 100% 50%),
    hsl(400 100% 50%),
    hsl(435 100% 50%),
    hsl(470 100% 50%),
    hsl(505 100% 50%),
    hsl(540 100% 50%)
  );
}
.hsl-decreasing,
.hsl-longer,
.hsl-named-longer {
  background: linear-gradient(
    to right,
    hsl(399 100% 50%),
    hsl(368 100% 50%),
    hsl(337 100% 50%),
    hsl(307 100% 50%),
    hsl(276 100% 50%),
    hsl(245 100% 50%),
    hsl(214 100% 50%),
    hsl(183 100% 50%),
    hsl(152 100% 50%),
    hsl(122 100% 50%),
    hsl(91 100% 50%),
    hsl(60 100% 50%)
  );
}
```

```css
.hsl {
  background: linear-gradient(
    to right in hsl,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right in hsl increasing hue,
    hsl(190deg 100% 50%),
    hsl(180deg 100% 50%)
  );
}
.hsl-decreasing {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-shorter {
  background: linear-gradient(
    to right in hsl shorter hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-longer {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-named {
  background: linear-gradient(to right in hsl, orange, yellow);
}
.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}
```

#### Result

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

| Specification |
| --- |
| CSS Color Module Level 4 # hue-interpolation |

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

### css.types.color.color-mix

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

### css.types.image.gradient.conic-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.linear-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.radial-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-conic-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-linear-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-radial-gradient.hue\_interpolation\_method

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

See also
--------

* `<color-interpolation-method>`
* `<hue>` data type


<display-legacy> - CSS: Cascading Style Sheets

<display-legacy>
================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 2 used a single-keyword syntax for the `display` property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.

Syntax
------

Valid `<display-legacy>` values:

`inline-block`

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

It is equivalent to `inline flow-root`.

`inline-table`

The `inline-table` value does not have a direct mapping in HTML. It behaves like an HTML `<table>` element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

It is equivalent to `inline table`.

`inline-flex`

The element behaves like an inline element and lays out its content according to the flexbox model.

It is equivalent to `inline flex`.

`inline-grid`

The element behaves like an inline element and lays out its content according to the grid model.

It is equivalent to `inline grid`.

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

<display-legacy> =
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid

```

Examples
--------

In the below example, we are creating an inline flex container with the legacy keyword inline-flex.

### HTML

```html
<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item
```

### CSS

```css
.container {
  display: inline-flex;
}
```

### Result

In the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.

```css
.container {
  display: inline flex;
}
```

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

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-legacy |

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

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

See also
--------

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


-webkit-text-stroke - CSS: Cascading Style Sheets

-webkit-text-stroke
===================

The **`-webkit-text-stroke`** CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties `-webkit-text-stroke-width` and `-webkit-text-stroke-color`.

```css
/\* Width and color values \*/
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

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

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

This property is a shorthand for the following CSS properties:

* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
Syntax
------

### Values

`<length>`

The width of the stroke.

`<color>`

The color of the stroke.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: `0`
* `-webkit-text-stroke-color`: `currentcolor`
 |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: absolute `<length>`
* `-webkit-text-stroke-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: discrete
* `-webkit-text-stroke-color`: a color
 |

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

-webkit-text-stroke =
  <line-width>  ||
  <color>

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

```

Examples
--------

### Adding a red text stroke

#### HTML

```html
<p id="example">The stroke of this text is red.</p>
```

#### CSS

```css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}
```

#### Result

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke |

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

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

See also
--------

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


@counter-style - CSS: Cascading Style Sheets

@counter-style
==============

The **`@counter-style`** CSS at-rule lets you extend predefined list styles and define your own counter styles that are not part of the predefined set of styles. The `@counter-style` rule contains descriptors defining how the counter value is converted into a string representation.

```css
@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}
```

While CSS provides many useful predefined counter styles, the `@counter-style` at-rule offers an open-ended method for creating counters. This at-rule caters to the needs of worldwide typography by allowing authors to define their own counter styles when the predefined styles don't fit their requirements.

Syntax
------

The `@counter-style` at-rule is identified by a counter style name, and the style of the named counter can be fine-tuned using a `<declaration-list>` consisting of one or more descriptors and their values.

### Counter style name

`<counter-style-name>`

Provides a name for your counter style. It is specified as a case-sensitive `<custom-ident>` without quotes. The value should not be equal to `none`. Like all custom identifiers, the value of your counter style can't be a CSS-wide keyword. Avoid other enumerated CSS property values, including values of list and counter style properties. The name of your counter can't be the case-insensitive `list-style-type` property values of `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed`.

**Note:** The non-overridable counter style names `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed` cannot be used as the name of a custom counter. However, they are valid in other contexts where the `<counter-style-name>` data type is expected, such as in `system: extend <counter-style-name>`.

### Descriptors

`system`

Specifies the algorithm to be used for converting the integer value of a counter to a string representation. If the value is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, the `symbols` descriptor must also be specified. If the value is `additive` , the `additive-symbols` descriptor must also be specified.

`symbols`

Specifies the symbols that are to be used for the marker representations. Symbols can contain strings, images, or custom identifiers. This descriptor is required if the `system` descriptor is set to `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`.

`additive-symbols`

Defines the *additive tuples* for additive systems. While the symbols specified in the `symbols` descriptor are used for constructing marker representation by most algorithms, additive counter systems, such as Roman numerals, consist of a series of weighted symbols. The descriptors is a list of counter symbol along with their non-negative integer weights, listed by weight in descending order. This descriptor is required if the `system` descriptor is set to `additive`.

`negative`

Specifies to symbols to be appended or prepended to the counter representation if the value is negative.

`prefix`

Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, before any characters added to negative counter values by the `negative` descriptor.

`suffix`

Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Suffixes come after the marker representation, including after any characters added to negative counter values by the `negative` descriptor.

`range`

Defines the range of values over which the counter style is applicable. If a counter style is used to represent a counter value outside of the ranges defined by this descriptor, the counter style will drop back to its `fallback` style.

`pad`

Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start at 01 and go through 02, 03, 04, etc., then the `pad` descriptor is to be used. For representations larger than the specified `pad` value, the marker is constructed as normal.

`speak-as`

Describes how speech synthesizers, such as screen readers, should announce the counter style. For example, the value of the list item marker can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.

`fallback`

Specifies the counter name of the system to fall back to if either the specified system is unable to construct the representation of a counter value or if the counter value is outside the specified `range`. If the fallback counter also fails to represent the value, then that counter's fallback is used, if one is specified. If there are either no fallback counters described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the `decimal` style.

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

@counter-style =
  @counter-style <counter-style-name> { <declaration-list> }

```

Examples
--------

### Specifying symbols with counter-style

```css
@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
```

The above counter style rule can be applied to lists like this:

```css
.items {
  list-style: circled-alpha;
}
```

The above code produces the following result:
```

<ol class="items">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol>
<p>...</p>
<ol class="items" start="25">
  <li>twenty-five</li>
  <li>twenty-six</li>
  <li>twenty-seven</li>
  <li>twenty-eight</li>
</ol>
```

See more examples on the demo page.

### Ready-made counter styles

Find a collection of over 100 `counter-style` code snippets in the Ready-made Counter Styles document. This document provides counter styles that meet the needs of languages and cultures around the world.

The Counter styles converter pulls from this list to test and create copy and paste code for counter styles.

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-counter-style-rule |

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

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

See also
--------

* `list-style`, `list-style-image`, `list-style-position`, `list-style-type`
* `symbols()`, the functional notation creating anonymous counter styles.
* CSS `counter()` and `counters()` functions
* Counter style demo (code)


min-height - CSS: Cascading Style Sheets

min-height
==========

The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`.

Try it
------

The element's height is set to the value of `min-height` whenever `min-height` is larger than `max-height` or `height`.

Syntax
------

```css
/\* <length> value \*/
min-height: 3.5em;

/\* <percentage> value \*/
min-height: 10%;

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

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

### Values

`<length>`

Defines the `min-height` as an absolute value.

`<percentage>`

Defines the `min-height` as a percentage of the containing block's height.

`auto`

The browser will calculate and select a `min-height` for the specified element.

`max-content`

The intrinsic preferred `min-height`.

`min-content`

The intrinsic minimum `min-height`.

`fit-content`

Use the available space, but not more than max-content, i.e `min(max-content, max(min-content, stretch))`.

`fit-content(`<length-percentage>`)`
Experimental

Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `0`. |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |

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

min-height =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

Examples
--------

### Setting min-height

```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The box model, `box-sizing`
* `height`, `max-height`


right - CSS: Cascading Style Sheets

right
=====

The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

Try it
------

Syntax
------

```css
/\* <length> values \*/
right: 3px;
right: 2.4em;

/\* <percentage>s of the width of the containing block \*/
right: 10%;

/\* Keyword value \*/
right: auto;

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

### Values

`<length>`

A negative, null, or positive `<length>` that represents:

* for *absolutely positioned elements*, the distance to the right edge of the containing block.
* for *relatively positioned elements*, the distance that the element is moved to the left of its normal position.

`<percentage>`

A `<percentage>` of the containing block's width.

`auto`

Specifies that:

* for *absolutely positioned elements*, the position of the element is based on the `left` property, while `width: auto` is treated as a width based on the content; or if `left` is also `auto`, the element is positioned where it should horizontally be positioned if it were a static element.
* for *relatively positioned elements*, the distance of the element from its normal position is based on the `left` property; or if `left` is also `auto`, the element is not moved horizontally at all.

`inherit`

Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a `<length>`, `<percentage>`, or the `auto` keyword.

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

The effect of `right` depends on how the element is positioned (i.e., the value of the `position` property):

* When `position` is set to `absolute` or `fixed`, the `right` property specifies the distance between the element's outer margin of right edge and the inner border of the right edge of its containing block.
* When `position` is set to `relative`, the `right` property specifies the distance the element's right edge is moved to the left from its normal position.
* When `position` is set to `sticky`, the `right` property is used to compute the sticky-constraint rectangle.
* When `position` is set to `static`, the `right` property has *no effect*.

When both `left` and `right` are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. If the element cannot stretch to satisfy both — for example, if a `width` is declared — the position of the element is *over-constrained*. When this is the case, the `left` value has precedence when the container is left-to-right; the `right` value has precedence when the container is right-to-left.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| 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, percentage or calc(); |

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

right =
  auto                 |
  <length-percentage>

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

```

Examples
--------

### Absolute and relative positioning using right

#### HTML

```html
<div id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</div>
```

#### CSS

```css
#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
```

#### Result

### Declaring both left and right

When both `left` and `right` are declared, the element will stretch to meet both, unless other constraints prevent it from doing so. If the element will not stretch or shrink to meet both. When the position of the element is *overspecified*, the precedence is based on the container's direction: The `left` will take precedence if the container's direction is left-to-right. The `right` will take precedence if the container's direction is right-to-left.

#### HTML

```html
<div id="parent">
  Parent
  <div id="noWidth">No width</div>
  <div id="width">width: 100px</div>
</div>
```

#### CSS

```css
div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/\* declare both a left and a right \*/
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/\* declare a width \*/
#width {
  width: 100px;
  top: 60px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

See also
--------

* `inset`, the shorthand for all related properties: `top`, `bottom`, `left`, and `right`
* The mapped logical properties: `inset-block-start`, `inset-block-end`, `inset-inline-start`, and `inset-inline-end` and the shorthands `inset-block` and `inset-inline`
* `position`


will-change - CSS: Cascading Style Sheets

will-change
===========

The **`will-change`** CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.

**Warning:** `will-change` is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

Proper usage of this property can be a bit tricky:

* *Don't apply will-change to too many elements.* The browser already tries as hard as it can to optimize everything. Some of the stronger optimizations that are likely to be tied to `will-change` end up using a lot of a machine's resources, and when overused like this can cause the page to slow down or consume a lot of resources.
* *Use sparingly.* The normal behavior for optimizations that the browser make is to remove the optimizations as soon as it can and revert back to normal. But adding `will-change` directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise. So it is a good practice to switch `will-change` on and off using script code before and after the change occurs.
* *Don't apply will-change to elements to perform premature optimization*. If your page is performing well, don't add the `will-change` property to elements just to wring out a little more speed. `will-change` is intended to be used as something of a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems. Excessive use of `will-change` will result in excessive memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change. This will lead to worse performance.
* *Give it sufficient time to work*. This property is intended as a method for authors to let the user-agent know about properties that are likely to change ahead of time. Then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens. So it is important to give the browser some time to actually do the optimizations. Find some way to predict at least slightly ahead of time that something will change, and set `will-change` then.
* *Be aware, that will-change may actually influence the visual appearance of elements*, when used with property values, that create a stacking context (e.g. will-change: opacity), as the stacking context is created up front.
Syntax
------

```css
/\* Keyword values \*/
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /\* Example of <custom-ident> \*/
will-change: opacity; /\* Example of <custom-ident> \*/
will-change: left, top; /\* Example of two <animatable-feature> \*/

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

### Values

`auto`

This keyword expresses no particular intent; the user agent should apply whatever heuristics and optimizations it normally does.

The `<animatable-feature>` can be one of the following values:

`scroll-position`

Indicates that the author expects to animate or change the scroll position of the element in the near future.

`contents`

Indicates that the author expects to animate or change something about the element's contents in the near future.

`<custom-ident>`

Indicates that the author expects to animate or change the property with the given name on the element in the near future. If the property given is a shorthand, it indicates the expectation for all the longhands the shorthand expands to. It cannot be one of the following values: `unset`, `initial`, `inherit`, `will-change`, `auto`, `scroll-position`, or `contents`. The spec doesn't define the behavior of particular value, but it is common for `transform` to be a compositing layer hint. Chrome currently takes two actions, given particular CSS property idents: establish a new compositing layer or a new stacking context.

### Via stylesheet

It may be appropriate to include `will-change` in your style sheet for an application that does page flips on key presses like an album or a slide deck presentation where the pages are large and complex. This will let browser prepare the transition ahead of time and allow for snappy transitions between the pages as soon as the key is pressed. But use caution with the `will-change` property directly in stylesheets. It may cause the browser to keep the optimization in memory for much longer than it is needed.

```css
.slide {
  will-change: transform;
}
```

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

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

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

will-change =
  auto                    |
  <animateable-feature>#

<animateable-feature> =
  scroll-position  |
  contents         |
  <custom-ident>

```

Examples
--------

### Via script

This is an example showing how to apply the `will-change` property through scripting, which is probably what you should be doing in most cases.

```js
const el = document.getElementById("element");

// Set will-change when the element is hovered
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}
```

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

| Specification |
| --- |
| CSS Will Change Module Level 1 # will-change |

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

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

See also
--------

* `transform`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
    + Note: there is no individual `skew` property


::-moz-progress-bar - CSS: Cascading Style Sheets

::-moz-progress-bar
===================

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

The **`::-moz-progress-bar`** CSS pseudo-element is a Mozilla extension that represents the progress bar inside a `<progress>` element. (The bar represents the amount of progress that has been made.)

If you want to select the unfinished part of `<progress>` in Mozilla, please select the `<progress>` directly.

Syntax
------

```css
::-moz-progress-bar {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminate</progress>
```

### CSS

```css
::-moz-progress-bar {
  background-color: red;
}

/\* Force indeterminate bars to have zero width \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

### Result

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

Not part of any standard.

See also
--------

* `<progress>`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`