padding-bottom - CSS: Cascading Style Sheets

padding-bottom
==============

The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.

Try it
------

An element's padding area is the space between its content and its border.

![The effect of the CSS padding-bottom property on the element box](/en-US/docs/Web/CSS/padding-bottom/padding-bottom.svg)

**Note:** The `padding` property can be used to set paddings on all four sides of an element with a single declaration.

Syntax
------

```css
/\* <length> values \*/
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/\* <percentage> value \*/
padding-bottom: 10%;

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

The `padding-bottom` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

### Values

`<length>`

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

`<percentage>`

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

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| 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
-------------
```

padding-bottom =
  <length-percentage [0,∞]>

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

```

Examples
--------

### Setting padding bottom with pixels and percentages

```css
.content {
  padding-bottom: 5%;
}
.sidebox {
  padding-bottom: 10px;
}
```

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

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

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

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

See also
--------

* Introduction to the CSS basic box model
* `padding-top`, `padding-right`, `padding-left` and the `padding` shorthand
* The mapped logical properties: `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` and the shorthands `padding-block` and `padding-inline`


contain - CSS: Cascading Style Sheets

contain
=======

Baseline 2023
-------------

Newly availableSince February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`contain`** CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree.
 Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.

Try it
------

 There are four types of CSS containment: size, layout, style, and paint, which are set on the container.
 The property is a space-separated list of a subset of the five standard values or one of the two shorthand values.
 Changes to the contained properties within the container are not propagated outside of the contained element to the rest of the page.
 The main benefit of containment is that the browser does not have to re-render the DOM or page layout as often, leading to small performance benefits during the rendering of static pages and greater performance benefits in more dynamic applications.

Using the `contain` property is useful on pages with groups of elements that are supposed to be independent, as it can prevent element internals from having side effects outside of its bounding-box.

**Note:** using `layout`, `paint`, `strict` or `content` values for this property creates:

1. A new containing block (for the descendants whose `position` property is `absolute` or `fixed`).
2. A new stacking context.
3. A new block formatting context.

Syntax
------

```css
/\* Keyword values \*/
contain: none;
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;

/\* Multiple keywords \*/
contain: size paint;
contain: size layout paint;
contain: inline-size layout;

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

### Values

The `contain` property can have any of the following values:

* The keyword `none` **or**
* One or more of the space-separated keywords `size` (or `inline-size`), `layout`, `style`, and `paint` in any order **or**
* One of the shorthand values `strict` or `content`

The keywords have the following meanings:

`none`

The element renders as normal, with no containment applied.

`strict`

All containment rules are applied to the element. This is equivalent to `contain: size layout paint style`.

`content`

All containment rules except `size` are applied to the element. This is equivalent to `contain: layout paint style`.

`size`

Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with `inline-size`.

`inline-size`

Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with `size`.

`layout`

The internal layout of the element is isolated from the rest of the page. This means nothing outside the element affects its internal layout, and vice versa.

`style`

For properties that can affect more than just an element and its descendants, the effects don't escape the containing element. Counters and quotes are scoped to the element and its contents.

`paint`

Descendants of the element don't display outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. If a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box.

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

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

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

contain =
  none                                  |
  strict                                |
  content                               |
  [ size || layout || style || paint ]

```

Examples
--------

### Paint containment

The following example shows how to use `contain: paint` to prevent an element's descendants from painting outside of its bounds.

```css
div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  font-size: 20px;
}
```

```html
<div style="contain: paint">
  <p>This text will be clipped to the bounds of the box.</p>
</div>
<div>
  <p>This text will not be clipped to the bounds of the box.</p>
</div>
```

### Layout containment

Consider the example below which shows how elements behave with and without layout containment applied:

```html
<div class="card" style="contain: layout;">
  <h2>Card 1</h2>
  <div class="fixed"><p>Fixed box 1</p></div>
  <div class="float"><p>Float box 1</p></div>
</div>
<div class="card">
  <h2>Card 2</h2>
  <div class="fixed"><p>Fixed box 2</p></div>
  <div class="float"><p>Float box 2</p></div>
</div>
<div class="card">
  <h2>Card 3</h2>
  <!-- ... -->
</div>
```

```
p {
  margin: 4px;
  padding: 4px;
}

h2 {
  margin-bottom: 4px;
  padding: 10px;
}

div {
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 gray;
  padding: 6px;
  margin: 6px;
}
```

```css
.card {
  width: 70%;
  height: 90px;
}

.fixed {
  position: fixed;
  right: 10px;
  top: 10px;
  background: coral;
}

.float {
  float: left;
  margin: 10px;
  background: aquamarine;
}
```

 The first card has layout containment applied, and its layout is isolated from the rest of the page.
 We can reuse this card in other places on the page without worrying about layout recalculation of the other elements.
 If floats overlap the card bounds, elements on the rest of the page are not affected.
 When the browser recalculates the containing element's subtree, only that element is recalculated. Nothing outside of the contained element needs to be recalculated.
 Additionally, the fixed box uses the card as a layout container to position itself.

 The second and third cards have no containment.
 The layout context for the fixed box in the second card is the root element so the fixed box is positioned in the top right corner of the page.
 A float overlaps the second card's bounds causing the third card to have unexpected layout shift that's visible in the positioning of the `<h2>` element.
 When recalculation occurs, it is not limited to a container.
 This impacts performance and interferes with the rest of the page layout.

### Style containment

 Style containment scopes counters and quotes to the contained element.
 For CSS counters, the `counter-increment` and `counter-set` properties are scoped to the element as if the element is at the root of the document.

#### Containment and counters

The example below takes a look at how counters work when style containment is applied:

```html
<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li class="container">Item C</li>
  <li>Item D</li>
  <li>Item E</li>
</ul>
```

```css
body {
  counter-reset: list-items;
}

li::before {
  counter-increment: list-items;
  content: counter(list-items) ": ";
}

.container {
  contain: style;
}
```

 Without containment, the counter would increment from 1 to 5 for each list item.
 Style containment causes the `counter-increment` property to be scoped to the element's subtree and the counter begins again at 1:

#### Containment and quotes

CSS quotes are similarly affected in that the `content` values relating to quotes are scoped to the element:

```html
<!-- With style containment -->
<span class="open-quote">
  outer
  <span style="contain: style;">
    <span class="open-quote"> inner </span>
  </span>
</span>
<span class="close-quote"> close </span>
<br />
<!-- Without containment -->
<span class="open-quote">
  outer
  <span>
    <span class="open-quote"> inner </span>
  </span>
</span>
<span class="close-quote"> close </span>
```

```css
body {
  quotes: "[" "]" "‹" "›";
}
.open-quote:before {
  content: open-quote;
}

.close-quote:after {
  content: close-quote;
}
```

Because of containment, the first closing quote ignores the inner span and uses the outer span's closing quote instead:

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

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |

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

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

See also
--------

* CSS containment
* CSS container queries
* CSS `content-visibility` property
* CSS `position` property


:optional - CSS: Cascading Style Sheets

:optional
=========

The **`:optional`** CSS pseudo-class represents any `<input>`, `<select>`, or `<textarea>` element that does not have the `required` attribute set on it.

Try it
------

This pseudo-class is useful for styling fields that are not required to submit a form.

**Note:** The `:required` pseudo-class selects *required* form fields.

Syntax
------

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

Examples
--------

### The optional field has a purple border

#### HTML

```html
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```

#### CSS

```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}
```

#### Result

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

If a form contains optional `<input>`s, required inputs should be indicated using the `required` attribute. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful form submission.

Required inputs should also be indicated visually, using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

* MDN Understanding WCAG, Guideline 3.3 explanations
* Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| HTML Standard # selector-optional |
| Selectors Level 4 # opt-pseudos |

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

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

See also
--------

* Other validation-related pseudo-classes: `:required`, `:invalid`, `:valid`
* Form data validation


sin() - CSS: Cascading Style Sheets

sin()
=====

The **`sin()`** CSS function is a trigonometric function that returns the sine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a `<number>` or an `<angle>` by interpreting the result of the argument as radians. That is, `sin(45deg)`, `sin(0.125turn)`, and `sin(3.14159 / 4)` all represent the same value, approximately `0.707`.

Syntax
------

```css
/\* Single <angle> values \*/
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

/\* Single <number> values \*/
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/\* Other values \*/
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));
```

### Parameter

The `sin(angle)` function accepts only one value as its parameter.

`angle`

A calculation which resolves to a `<number>` or an `<angle>`. When specifying unitless numbers they are interpreted as a number of radians, representing an `<angle>`

### Return value

The sine of an `angle` will always return a number between `−1` and `1`.

* If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
* If `angle` is `0⁻`, the result is `0⁻`.
### Formal syntax
```

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

### Changing box sizes

In this example, `sin(30deg)` will return `0.5`, making the box have a `50px` width and a `50px` height.

```css
div {
  background-color: red;
  width: calc(sin(30deg) * 100px);
  height: calc(sin(30deg) * 100px);
}
```

### Controlling animation duration

Another use case is to control the `animation-duration`, reducing the duration based on the sine value. In this case, the animation duration will be `1s`.

```css
div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}
```

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

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

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

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

See also
--------

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


<custom-ident> - CSS: Cascading Style Sheets

<custom-ident>
==============

The **`<custom-ident>`** CSS data type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity.

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.

### Escaping characters

Any Unicode code point can be included as part of a `<custom-ident>` or quoted `<string>` by escaping it.

In CSS, there are several ways to escape a character. Escape sequences start with a backslash (`\`), and continue with:

* One to six hex (`ABCDEF0123456789`) digits. The hex digits can optionally be followed by white space. The hex escape sequence gets replaced by the Unicode code point whose value is given by those digits. The whitespace allows the sequences to be followed by actual hex digits (versus replaced ones).
* Any Unicode code point that is not a hex digit or a newline character.

Examples:

* "&B" can be written as `\26 B` or `\000026B`.
* "hi.there" can be written as `hi\.there` or `hi\002Ethere`.
* "toto?" can be written as `toto\?`, `toto\3F`, or `toto\00003F`.

To include actual white space after an escape sequence, include two white spaces in the escape sequence.

### Forbidden values

A `<custom-ident>` must not be placed between single or double quotes as this would be identical to a `<string>`. Moreover, the first character must not be a decimal digit, nor a hyphen (`-`) followed by a decimal digit.

To prevent ambiguity, each property that uses `<custom-ident>` forbids the use of specific values:

`animation-name`

Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as `none`.

`counter-reset`, `counter-increment`

Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as `none`.

`@counter-style`, `list-style-type`

Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as the values:

* `none`
* `inline`
* `outside`

Also, quite a few predefined values are implemented by the different browsers:

* `disc`
* `circle`
* `square`
* `decimal`
* `cjk-decimal`
* `decimal-leading-zero`
* `lower-roman`
* `upper-roman`
* `lower-greek`
* `lower-alpha`
* `lower-latin`
* `upper-alpha`
* `upper-latin`
* `arabic-indic`
* `armenian`
* `bengali`
* `cambodian`
* `cjk-earthly-branch`
* `cjk-heavenly-stem`
* `cjk-ideographic`
* `devanagari`
* `ethiopic-numeric`
* `georgian`
* `gujarati`
* `gurmukhi`
* `hebrew`
* `hiragana`
* `hiragana-iroha`
* `japanese-formal`
* `japanese-informal`
* `kannada`
* `katakana`
* `katakana-iroha`
* `khmer`
* `korean-hangul-formal`
* `korean-hanja-formal`
* `korean-hanja-informal`
* `lao`
* `lower-armenian`
* `malayalam`
* `mongolian`
* `myanmar`
* `oriya`
* `persian`
* `simp-chinese-formal`
* `simp-chinese-informal`
* `tamil`
* `telugu`
* `thai`
* `tibetan`
* `trad-chinese-formal`
* `trad-chinese-informal`
* `upper-armenian`
* `disclosure-open`
* `disclosure-close`

`grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end`

Forbids the `span` value.

`view-transition-name`

Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as `none`.

`will-change`

Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as the values `will-change`, `auto`, `scroll-position`, and `contents`.

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
_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 # custom-idents |
| CSS Will Change Module Level 1 # valdef-will-change-custom-ident |
| CSS Counter Styles Level 3 # typedef-counter-style-name |
| CSS Lists and Counters Module Level 3 # counter-properties |

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

*As this type is not a real type but a convenience type used to simplify the description of allowed values, there is no browser compatibility information as such.*

See also
--------

* <ident>
* <dashed-ident>


@property - CSS: Cascading Style Sheets

@property
=========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`@property`** CSS at-rule is part of the CSS Houdini umbrella of APIs. It allows developers to explicitly define their `CSS custom properties`, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.

The `@property` rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid `@property` rules result in a registered custom property, as if `registerProperty()` had been called with equivalent parameters.

Syntax
------

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

### Descriptors

`syntax`

Describes the allowable syntax for the property. May be a `<length>`, `<number>`, `<percentage>`, `<length-percentage>`, `<color>`, `<image>`, `<url>`, `<integer>`, `<angle>`, `<time>`, `<resolution>`, `<transform-function>`, or `<custom-ident>`, or a list of data type and keyword values.

The `+` (space-separated) and `#` (comma-separated) multipliers indicate that a list of values is expected, for example `<color>#` means a comma-separated list of `<color>` values is the expected syntax.

Vertical lines (`|`) can create "or" conditions for the expected syntax, for example `<length> | auto` accepts a `<length>` or `auto`, and `<color># | <integer>#` expects a comma-separated list of `<color>` values or a comma-separated list of `<integer>` values.

`inherits`

Controls whether the custom property registration specified by `@property` inherits by default.

`initial-value`

Sets the initial value for the property.

 The `@property` rule must include both the `syntax` and `inherits` descriptors; if either are missing, the entire `@property` rule is invalid and ignored.
 The `initial-value` descriptor is also required, unless the syntax is the `*` universal syntax definition (e.g., `initial-value: *`).
 If the `initial-value` descriptor is required and omitted, the entire `@property` rule is invalid and ignored.

Unknown descriptors are invalid and ignored, but do not invalidate the `@property` rule.

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

@property =
  @property <custom-property-name> { <declaration-list> }

```

Examples
--------

In this example, we define two custom properties, `--item-size` and `--item-color`, that we'll use to define the size (width and height) and background color of the three following items.

```html
<div class="container">
  <div class="item one">Item one</div>
  <div class="item two">Item two</div>
  <div class="item three">Item three</div>
</div>
```

The following code uses the CSS `@property` at-rule to define a custom property named `--item-size`. The property sets the initial value to `40%`, limiting valid values to `<percentage>` values only. This means, when used as the value for an item's size, its size will always be relative to its parent's size. The property is inheritable.

```css
@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 40%;
}
```

We define a second custom property, `--item-color`, using JavaScript instead of CSS. The JavaScript `registerProperty()` method is equivalent to `@property` at-rule. The property is defined to have an initial value of `aqua`, to accept only `<color>` values, and is not inherited.

```js
window.CSS.registerProperty({
  name: "--item-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "aqua",
});
```

We use the two custom properties to style the items:

```css
.container {
  display: flex;
  height: 200px;
  border: 1px dashed black;

  /\* set custom property values on parent \*/
  --item-size: 20%;
  --item-color: orange;
}

/\* use custom properties to set item size and background color \*/
.item {
  width: var(--item-size);
  height: var(--item-size);
  background-color: var(--item-color);
}

/\* set custom property values on element itself \*/
.two {
  --item-size: initial;
  --item-color: inherit;
}

.three {
  /\* invalid values \*/
  --item-size: 1000px;
  --item-color: xyz;
}
```

The two custom properties, `--item-size: 20%` and `--item-color: orange;` are set on the `container` parent, overriding the `40%` and `aqua` default values set when these custom properties were defined. The size is set to be inheritable; the color is not.

For item one, none of these custom properties have been set. The `--item-size` is inheritable, so the value `20%` set on its parent `container` is used. On the other hand, the property `--item-color` is not inheritable, so the value `orange` set on the parent is not considered. Instead the default initial value `aqua` is used.

For item two, CSS global keywords are set for both custom properties which are valid values for all value types and therefore valid no matter the `syntax` descriptor value. The `--item-size` is set to `initial` and uses the `initial-value: 40%;` set in the `@property` declaration. The `initial` value means the`initialValue` value for the property is used. The `--item-color` is set to `inherit`, explicitly inheriting the `orange` value from its parent even though the custom property is set to otherwise not be inherited. This is why item two is orange.

For item three, the `--item-size` value gets set to `1000px`. While `1000px` is a `<length>` value, the `@property` declaration requires the value be a `<percentage>`, so the declaration is not valid and is ignored, meaning the inheritable `20%` set on the parent is used. The `xyz` value is also invalid. As `registerProperty()` set `--item-color` to not be inherited, the default initial value of `aqua` is used and not the parent's `orange` value.

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

| Specification |
| --- |
| CSS Properties and Values API Level 1 # at-property-rule |

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

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

See also
--------

* `var()`
* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* Houdini APIs
* Using CSS custom properties (variables) guide
* CSS custom properties for cascading variables module


@font-feature-values - CSS: Cascading Style Sheets

@font-feature-values
====================

The **`@font-feature-values`** CSS at-rule lets you use a common name in the `font-variant-alternates` property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts.

The `@font-feature-values` at-rule may be used either at the top level of your CSS or inside any CSS conditional-group at-rule.

Syntax
------

### Feature value blocks

`@swash`

Specifies a feature name that will work with the `swash()` functional notation of `font-variant-alternates`. A swash feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@annotation`

Specifies a feature name that will work with the `annotation()` functional notation of `font-variant-alternates`. An annotation feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@ornaments`

Specifies a feature name that will work with the `ornaments()` functional notation of `font-variant-alternates`. An ornaments feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@stylistic`

Specifies a feature name that will work with the `stylistic()` functional notation of `font-variant-alternates`. A stylistic feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@styleset`

Specifies a feature name that will work with the `styleset()` functional notation of `font-variant-alternates`. A styleset feature value definition allows an unlimited number of values: `ident1: 2 4 12 1` maps to the OpenType values `ss02`, `ss04`, `ss12`, and `ss01`. Note that values higher than `99` are valid, but don't map to any OpenType values and are ignored.

`@character-variant`

Specifies a feature name that will work with the `character-variant()` functional notation of `font-variant-alternates`. A character-variant feature value definition allows either one or two values: `ident1: 3` maps to `cv03=1`, and `ident2: 2 4` maps to `cv02=4`, but `ident2: 2 4 5` is invalid.

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

@font-feature-values =
  @font-feature-values <family-name># { <declaration-rule-list> }

<family-name> =
  <string>         |
  <custom-ident>+

```

Examples
--------

### Using @styleset in a @font-feature-values rule

```css
/\* At-rule for "nice-style" in Font One \*/
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/\* At-rule for "nice-style" in Font Two \*/
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

…

/\* Apply the at-rules with a single declaration \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-values |

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

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

See also
--------

* The `font-variant-alternates` property that uses values that this at-rule defines.


min-width - CSS: Cascading Style Sheets

min-width
=========

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

Try it
------

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

Syntax
------

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

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

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

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

### Values

`<length>`

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

`<percentage>`

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

`auto`

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

`max-content`

The intrinsic preferred `min-width`.

`min-content`

The intrinsic minimum `min-width`.

`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 rows, and row groups |
| 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, percentage or calc(); |

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

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

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

```

Examples
--------

### Setting minimum element width

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

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

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # min-size-properties |
| 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
--------

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


<shape> - CSS: Cascading Style Sheets

<shape>
=======

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

The **`<shape>`** CSS data type defines the specific form (shape) of a region. The region represents the part of an element to which the `clip` property applies.

**Note:** `<shape>` and `rect()` work in conjunction with `clip`, which has been deprecated in favor of `clip-path`. When possible, use `clip-path` and the `<basic-shape>` data type instead.

Syntax
------

The `<shape>` data type is specified using the `rect()` function, which produces a region in the form of a rectangle.

`rect()`

```css
rect(top, right, bottom, left)
```

### Values

![A graph showing top, right, bottom, and left, as described below. These define the rectangle's shape. The upper left corner is defined by the top and left values. The bottom right corner is defined by the bottom and right values.](/en-US/docs/Web/CSS/shape/rect.png)

*top*

Is a `<length>` representing the offset for the top of the rectangle relative to the top border of the element's box.

*right*

Is a `<length>` representing the offset for the right of the rectangle relative to the left border of the element's box.

*bottom*

Is a `<length>` representing the offset for the bottom of the rectangle relative to the top border of the element's box.

*left*

Is a `<length>` representing the offset for the left of the rectangle relative to the left border of the element's box.

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

When animated, values of the `<shape>` data type are interpolated over their `top`, `right`, `bottom`, and `left` components, each treated as a real, floating-point number. The speed of the interpolation is determined by the easing function associated with the animation.

Example
-------

### Example demonstrating correct use of the rect() function

```css
img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # value-def-shape |

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

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

See also
--------

* Related CSS property: `clip`


:dir() - CSS: Cascading Style Sheets

:dir()
======

The **`:dir()`** CSS pseudo-class matches elements based on the directionality of the text contained in them.

```css
/\* Selects any element with right-to-left text \*/
:dir(rtl) {
  background-color: red;
}
```

The `:dir()` pseudo-class uses only the *semantic* value of the directionality, i.e., the one defined in the document itself. It doesn't account for *styling* directionality, i.e., the directionality set by CSS properties such as `direction`.

**Note:** Be aware that the behavior of the `:dir()` pseudo-class is not equivalent to the `[dir=…]` attribute selectors. The latter match the HTML `dir` attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (Similarly, `[dir=rtl]` and `[dir=ltr]` won't match the `auto` value.) In contrast, `:dir()` will match the value calculated by the user agent, even if inherited.

**Note:** In HTML, the direction is determined by the `dir` attribute. Other document types may have different methods.

Syntax
------

The `:dir()` pseudo-class requires one parameter, representing the text directionality you want to target.

```css
:dir([ltr | rtl]) {
  /\* ... \*/
}
```

### Parameters

`ltr`

Target left-to-right elements.

`rtl`

Target right-to-left elements.

Examples
--------

### HTML

```html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
```

### CSS

```css
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-ltr |
| Selectors Level 4 # the-dir-pseudo |

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

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

See also
--------

* Language-related pseudo-classes: `:lang`, `:dir`
* HTML `lang` attribute
* HTML `translate` attribute


:only-child - CSS: Cascading Style Sheets

:only-child
===========

The **`:only-child`** CSS pseudo-class represents an element without any siblings. This is the same as `:first-child:last-child` or `:nth-child(1):nth-last-child(1)`, but with a lower specificity.

Try it
------

Syntax
------

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

Examples
--------

### Basic example

#### HTML

```html
<div>
  <div>I am an only child.</div>
</div>

<div>
  <div>I am the 1st sibling.</div>
  <div>I am the 2nd sibling.</div>
  <div>
    I am the 3rd sibling,
    <div>but this is an only child.</div>
  </div>
</div>
```

#### CSS

```css
div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}
```

#### Result

### A list example

#### HTML

```html
<ol>
  <li>
    First
    <ul>
      <li>This list has just one element.</li>
    </ul>
  </li>
  <li>
    Second
    <ul>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
    </ul>
  </li>
</ol>
```

#### CSS

```css
li li {
  list-style-type: disc;
}

li:only-child {
  color: red;
  list-style-type: square;
}
```

#### Result

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

| Specification |
| --- |
| Selectors Level 4 # only-child-pseudo |

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

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

See also
--------

* `:only-of-type`
* `:first-child`
* `:last-child`
* `:nth-child`


min-content - CSS: Cascading Style Sheets

min-content
===========

The `min-content` sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

Syntax
------

```css
/\* Used as a length \*/
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;

/\* used in grid tracks \*/
grid-template-columns: 200px 1fr min-content;
```

Examples
--------

### Using min-content for box sizing

#### HTML

```html
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
```

#### CSS

```css
.item {
  width: min-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```

#### Result

### Sizing grid columns with min-content

#### HTML

```html
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: min-content min-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-min-content |

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

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

See also
--------

* Related sizing keywords: `max-content`, `fit-content`


@import - CSS: Cascading Style Sheets

@import
=======

 The **`@import`** CSS at-rule is used to import style rules from other valid stylesheets.
 An `@import` rule *must* be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

Syntax
------

```css
@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;
```

where:

*url*

Is a `<string>`, a `<url>`, or a `url()` function representing the location of the resource to import. The URL may be absolute or relative.

*list-of-media-queries*

Is a comma-separated list of media queries, which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.

*layer-name*

Is the name of a cascade layer into which the contents of the linked resource are imported.

*supports-condition*
Experimental

 Indicates the feature(s) that the browser must support in order for the stylesheet to be imported.
 If the browser does not conform to the conditions specified in the *supports-condition*, it may not fetch the linked stylesheet, and even if downloaded through some other path, will not load it.
 The syntax of `supports()` is almost identical to that described in `@supports`, and that topic can be used as a more complete reference.

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

Imported rules must come before all other types of rules, except `@charset` rules and layer creating `@layer` statements.

```css
\* {
  margin: 0;
  padding: 0;
}
/\* more styles \*/
@import url("my-imported-styles.css");
```

As the `@import` at-rule is declared after the styles it is invalid and hence ignored.

```css
@import url("my-imported-styles.css");
\* {
  margin: 0;
  padding: 0;
}
/\* more styles \*/
```

The `@import` rule is not a nested statement. Therefore, it cannot be used inside conditional group at-rules.

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separated media queries after the URL. In the absence of any media query, the import is not conditional on the media used. Specifying `all` for the `list-of-media-queries` has the same effect.

 Similarly, user agents can use the `supports()` function in an `@import` at-rule to only fetch resources if a particular feature set is (or is not) supported.
 This allows authors to take advantage of recently introduced CSS features, while providing graceful fallbacks for older browser versions.
 Note that the conditions in the `supports()` function of an `@import` at-rule can be obtained in JavaScript using `CSSImportRule.supportsText`.

The `@import` rule can also be used to create a cascade layer by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. The `layer` keyword or the `layer()` function is used with `@import` for this purpose. Declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the import.

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

@import =
  @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;

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

<layer-name> =
  <ident> [ '.' <ident> ]\*

<import-conditions> =
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?

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

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

<supports-condition> =
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]\*  |
  <supports-in-parens> [ or <supports-in-parens> ]\*

<supports-in-parens> =
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>

<supports-feature> =
  <supports-decl>

<general-enclosed> =
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]

<supports-decl> =
  ( <declaration> )

```

Examples
--------

### Importing CSS rules

```css
@import "custom.css";
@import url("chrome://communicator/skin/");
```

The two examples above show how to specify the *url* as a `<string>` and as a `url()` function.

### Importing CSS rules conditional on media queries

```css
@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
```

The `@import` rules in the above examples show media-dependent conditions that will need to be true before the linked CSS rules are applied. So for instance, the last `@import` rule will load the `landscape.css` stylesheet only on a screen device in landscape orientation.

### Importing CSS rules conditional on feature support

```css
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
 and (max-width: 400px);
```

 The `@import` rules above illustrate how you might import a layout that uses a grid if `display: grid` is supported, and otherwise imports CSS that uses `display: flex`.
 While you can only have one `supports()` statement, you can combine any number of feature checks with `not`, `and`, and `or`, as long as you wrap each condition to be tested in parentheses.
 You can also use parentheses to indicate precedence.
 Note that if you just have a single declaration then you don't need to wrap it in additional parenthese: this is shown in the first example above.

 The examples above show support conditions using simple declaration syntax.
 You can also specify CSS functions in `supports()`, and it will evaluate to `true` if they are supported and can be evaluated on the user-agent.
 For example, the code below shows an `@import` that is conditional on both child combinators (`selector()`) and the `font-tech()` function:

```css
@import url("whatever.css") supports((selector(h2 > p)) and
 (font-tech(color-COLRv1)));
```

### Importing CSS rules into a cascade layer

```css
@import "theme.css" layer(utilities);
```

In the above example, a cascade layer named `utilities` is created and it will include rules from the imported stylesheet `theme`.

```css
@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}
```

In the above example, the rules in `headings.css` and `links.css` stylesheets cascade within the same layer as the `audio[controls]` rule.

```css
@import "theme.css" layer();
@import "style.css" layer;
```

This is an example of creating two separate unnamed cascade layers and importing the linked rules into each one separately. A cascade layer declared without a name is an unnamed cascade layer. Unnamed cascade layers are finalized when created: they do not provide any means for re-arranging or adding styles and they cannot be referenced from outside.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

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

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

See also
--------

* `@media`
* `@supports`
* CSS cascade and inheritance module


log() - CSS: Cascading Style Sheets

log()
=====

The **`log()`** CSS function is an exponential function that returns the logarithm of a number.

Logarithm is the inverse of exponentiation. It is the number that a fixed base has to be raised to in order to yield the number passed as the first parameter.

In CSS, when a single parameter is passed, the natural logarithm `e`, or approximately `2.7182818`, is used, though the base can be set to any value with an optional second parameter.

Syntax
------

```css
/\* A <number> value \*/
width: calc(100px * log(7.389)); /\* 200px \*/
width: calc(100px * log(8, 2)); /\* 300px \*/
width: calc(100px * log(625, 5)); /\* 400px \*/
```

### Parameters

The `log(value [, base]?)` function accepts two comma-separated values as its parameters.

`value`

A calculation which resolves to a `<number>` greater than or equal to 0. Representing the value to be logarithmed.

`base`

Optional. A calculation which resolves to a `<number>` greater than or equal to 0. Representing the base of the logarithm. If not defined, the default logarithmic base `e` is used.

### Return value

The logarithm of `value`, when `base` is defined.

The natural logarithm (base `e`) of `value`, when `base` is not defined.

### Formal syntax
```

<log()> =
  log( <calc-sum> , <calc-sum>? )

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

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

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

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

```

Examples
--------

### Sizes based on `log()` function

This example shows how you can use the `log()` function to calculate sizes.

#### HTML

```html
<div class="boxes">
  <div class="box zero">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>
```

#### CSS

Here we are using CSS custom properties to define the sizes to be used. First, we declare the first size (`--size-0`), which is then used to calculate the other sizes.

* `--size-1` is calculated by multiplying `--size-0` (50px) by the value of `log(7.389)` (2) which results in 100px.
* `--size-2` is calculated by multiplying `--size-0` (50px) by the value of `log(8, 2)` (3) which results in 150px.
* `--size-3` is calculated by multiplying `--size-0` (50px) by the value of `log(625, 5)` (4) which results in 200px.

```css
:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * log(7.389)); /\* 100px \*/
  --size-2: calc(var(--size-0) * log(8, 2)); /\* 150px \*/
  --size-3: calc(var(--size-0) * log(625, 5)); /\* 200px \*/
}
```

```
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

The sizes are then applied as the `width` and `height` values of the selectors.

```css
.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}
```

#### Result

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

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

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

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

See also
--------

* `pow()`
* `sqrt()`
* `hypot()`
* `exp()`


paint-order - CSS: Cascading Style Sheets

paint-order
===========

The **`paint-order`** CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.

Syntax
------

```css
/\* Normal \*/
paint-order: normal;

/\* Single values \*/
paint-order: stroke; /\* draw the stroke first, then fill and markers \*/
paint-order: markers; /\* draw the markers first, then fill and stroke \*/

/\* Multiple values \*/
paint-order: stroke fill; /\* draw the stroke first, then the fill, then the markers \*/
paint-order: markers stroke fill; /\* draw markers, then stroke, then fill \*/

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

If no value is specified, the default paint order is `fill`, `stroke`, `markers`.

When one value is specified, that one is painted first, followed by the other two in their default order relative to one another. When two values are specified, they will be painted in the order they are specified in, followed by the unspecified one.

**Note:** In the case of this property, markers are only appropriate when drawing SVG shapes involving the use of the `marker-*` properties (e.g. `marker-start`) and `<marker>` element. They do not apply to HTML text, so in that case, you can only determine the order of `stroke` and `fill`.

### Values

`normal`

Paint the different items in normal paint order.

`stroke`,
 `fill`,
 `markers`

Specify some or all of these values in the order you want them to be painted in.

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

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

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

paint-order =
  normal                         |
  [ fill || stroke || markers ]

```

Examples
--------

### Reversing the paint order of stroke and fill

#### SVG

```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
```

#### CSS

```css
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}
```

#### Result

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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

See also
--------

* CSS Tricks: paint-order


border-block-color - CSS: Cascading Style Sheets

border-block-color
==================

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

Try it
------

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

Syntax
------

```css
border-block-color: yellow;
border-block-color: #f5f6f7;

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

### Values

`<color>`

The color of the border.

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

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

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

border-block-color =
  <'border-top-color'>{1,2}

```

Examples
--------

### Border with vertical text

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-color: red;
}
```

#### Results

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

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

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 the physical border properties: `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`


:nth-of-type() - CSS: Cascading Style Sheets

:nth-of-type()
==============

The **`:nth-of-type()`** CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).

Try it
------

Syntax
------

The `nth-of-type` pseudo-class is specified with a single argument, which represents the pattern for matching elements.

See `:nth-child` for a more detailed explanation of its syntax.

```css
:nth-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}
```

Examples
--------

### Basic example

#### HTML

```html
<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>
```

#### CSS

```css
/\* Odd paragraphs \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* Even paragraphs \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* First paragraph \*/
p:nth-of-type(1) {
  font-weight: bold;
}

/\* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.
The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) \*/
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}
```

#### Result

**Note:** There is no way to select the nth-of-class using this selector. The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on `:nth-of-type` location **and** a class, as shown in the example above.

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

| Specification |
| --- |
| Selectors Level 4 # nth-of-type-pseudo |

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

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

See also
--------

* `:nth-child`, `:nth-last-of-type`


box-flex-group - CSS: Cascading Style Sheets

box-flex-group
==============

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

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

**Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See flexbox for information about the current standard.

The **`box-flex-group`** CSS property assigns the flexbox's child elements to a flex group.

For flexible elements assigned to flex groups, the first flex group is 1 and higher values specify subsequent flex groups. The initial value is 1. When dividing up the box's extra space, the browser first considers all elements within the first flex group. Each element within that group is given extra space based on the ratio of that element's flexibility compared to the flexibility of other elements within the same flex group. If the space of all flexible children within the group has been increased to the maximum, the process repeats for the children within the next flex group, using any space left over from the previous flex group. Once there are no more flex groups, and there is still space remaining, the extra space is divided within the containing box according to the `box-pack` property.

If the box would overflow after the preferred space of the children has been computed, then space is removed from flexible elements in a manner similar to that used when adding extra space. Each flex group is examined in turn and space is removed according to the ratio of the flexibility of each element. Elements do not shrink below their minimum widths.

Syntax
------

```css
/\* <integer> values \*/
box-flex-group: 1;
box-flex-group: 5;

/\* Global values \*/
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;
```

The `box-flex-group` property is specified as any positive `<integer>`.

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

|  |  |
| --- | --- |
| Initial value | `1` |
| Applies to | in-flow children of box elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

box-flex-group =
  <integer>
```

Examples
--------

### Simple usage example

In the original Flexbox spec, `box-flex-group` could be used to assign flex children to different groups to distribute flexible space between:

```css
article:nth-child(1) {
  -webkit-box-flex-group: 1;
}

article:nth-child(2) {
  -webkit-box-flex-group: 2;
}
```

This was only ever supported in WebKit-based browsers, with a prefix, and in subsequent versions of the spec this functionality does not have an equivalent. Instead, distribution of space inside the flex container is now handled using `flex-basis`, `flex-grow`, and `flex-shrink`.

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

Not part of any standard.

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

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

See also
--------

* `flex`
* `flex-basis`
* `flex-grow`
* `flex-shrink`


CSS counter styles - CSS: Cascading Style Sheets

CSS counter styles
==================

The **CSS counter styles** module lets you define your own counter styles to manage the appearance of markers in lists and counters in generated content. It also enables you to extend native browser list styles with your own customizations.

While we think of counters as numbers, they are actually strings with components that can be incremented. The counter styles module defines the `@counter-style` rule with ten descriptors, which enable developers to precisely define how counters are converted into strings. This module enables defining which characters to use for the counter bullets, the prefix to put before the counter and postfix that comes after, along with how to handle negative values. The descriptors can also set a range to limit the values a counter style can handle, while also providing fallback styles for when the counter value falls outside the defined range or otherwise can't render the counter value. The module also enables defining how the counter is read out loud by speech synthesizers.

Reference
---------

### Properties

No properties are defined in this module

### Functions

* `symbols()`
### Data types

* `<counter-style-name>`
* `<symbol>`
* `<symbols-type>`
### At-rules and descriptors

* `@counter-style`
    + `system`
    + `symbols`
    + `additive-symbols`
    + `negative`
    + `prefix`
    + `suffix`
    + `range`
    + `pad`
    + `speak-as`
    + `fallback`
### Interfaces and APIs

* CSS counter styles API
* `CSSCounterStyleRule` interface
Guides
------

Using CSS counters

Describes how to use counters to number any HTML element or to perform complex counting.

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

CSS lists and counters module:

* `counter-increment` property
* `counter-reset` property
* `counter-set` property
* `list-style-type` property
* `list-style` shorthand property
* `counter()` function
* `counters()` function

CSS pseudo-elements module:

* `::after` pseudo-element
* `::before` pseudo-element
* `::marker` pseudo-element

CSS generated content

* `content` property
Specifications
--------------

| Specification |
| --- |
| CSS Counter Styles Level 3  |

See also
--------

* CSS counter styles API
* CSS lists and counters module
* CSS pseudo-elements module
* CSS generated content module
* Ready-made counter styles via W3C (2023)


justify-tracks - CSS: Cascading Style Sheets

justify-tracks
==============

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

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

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

The **`justify-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their inline axis.

Syntax
------

```css
/\* Keyword values \*/
justify-tracks: start;
justify-tracks: space-between;
justify-tracks: center;
justify-tracks: start, center, end;

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

The property can take a single value, in which case all tracks are aligned in the same way. If a list of values is used then the first value applies to the first track in the grid axis, the second to the next, and so on.

If there are fewer values than tracks, the last value is used for all remaining tracks. If there are more values than tracks, any additional values are ignored.

### Values

`start`

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

`end`

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

`center`

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

`normal`

Acts as `start`.

`space-between`

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

`space-around`

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

`stretch`

The items stretch along the masonry axis to fill the content box. Items with definite size do not stretch.

`left`

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

`right`

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

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | Grid containers with masonry layout in their inline axis |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------

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

### Masonry layout with multiple values for justify-tracks

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

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # tracks-alignment |

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

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

See also
--------

* Related CSS properties: `align-tracks`, `masonry-auto-flow`


:-moz-only-whitespace - CSS: Cascading Style Sheets

:-moz-only-whitespace
=====================

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

**Note:** In Selectors Level 4, the `:empty` selector was changed to act like `:-moz-only-whitespace`, but no browser currently supports this yet.

The **`:-moz-only-whitespace`** CSS pseudo-class matches elements that only contain text nodes that only contain whitespace. (This includes elements with empty text nodes and elements with no child nodes.)

Syntax
------

```css
:-moz-only-whitespace {
  /\* ... \*/
}
```

Examples
--------

### Simple :-moz-only-whitespace example

#### HTML

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

#### CSS

```css
div {
  border: 4px solid red;
}

:-moz-only-whitespace {
  border-color: lime;
}
```

#### Result

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

Briefly defined as `:blank` in Selectors Level 4, but then the functionality was merged into `:empty` and `:blank` redefined to mean empty `<input>`.

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

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

See also
--------

* `:blank`
Experimental
* `:empty`


place-self - CSS: Cascading Style Sheets

place-self
==========

The **`place-self`** CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the `align-self` and `justify-self` properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `align-self`
* `justify-self`
Syntax
------

```css
/\* Keyword values \*/
place-self: auto center;
place-self: normal start;

/\* Positional alignment \*/
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;

/\* Baseline alignment \*/
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

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

### Values

`auto`

Computes to the parent's `align-items` value.

`normal`

The effect of this keyword is dependent of the layout mode we are in:

* In absolutely-positioned layouts, the keyword behaves like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
* For flex items, the keyword behaves as `stretch`.
* For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
* The property doesn't apply to block-level boxes, and to table cells.

`self-start`

Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.

`self-end`

Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.

`flex-start`

The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.

`flex-end`

The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.

`center`

The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.

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

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

`stretch`

If the combined size of the items along the cross axis is less than the size of the alignment container and the item is `auto`-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size of all `auto`-sized items exactly fills the alignment container along the cross axis.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `align-self`: `auto`
* `justify-self`: `auto`
 |
| Applies to | block-level boxes, absolutely-positioned boxes, and grid items |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `align-self`: `auto` computes to itself on absolutely-positioned elements, and to the computed value of `align-items` on the parent (minus any legacy keywords) on all other boxes, or `start` if the box has no parent. Its behavior depends on the layout model, as described for `justify-self`. Otherwise the specified value.
* `justify-self`: as specified
 |
| Animation type | discrete |

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

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

```

Examples
--------

### Simple demonstration

In the following example we have a simple 2 x 2 grid layout. Initially the grid container has `justify-items` and `align-items` values of `stretch` — the defaults — which causes the grid items to stretch across the entire width of their cells.

The second, third, and fourth grid items are then given different values of `place-self`, to show how these override the default placements. These values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions.

#### HTML

```html
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
}

span:nth-child(2) {
  place-self: start center;
}

span:nth-child(3) {
  place-self: center start;
}

span:nth-child(4) {
  place-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # place-self-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
* The `align-self` property
* The `justify-self` property


contain-intrinsic-height - CSS: Cascading Style Sheets

contain-intrinsic-height
========================

The **`contain-intrinsic-length`** CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment.

Syntax
------

```css
/\* Keyword values \*/
contain-intrinsic-height: none;

/\* <length> values \*/
contain-intrinsic-height: 1000px;
contain-intrinsic-height: 10rem;

/\* auto <length> \*/
contain-intrinsic-height: auto 300px;

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

### Values

The following values may be specified for an element.

`none`

The element has no intrinsic height.

`<length>`

The element has the specified height (`<length>`).

`auto <length>`

A remembered value of the "normally rendered" element height if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified `<length>`.

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

The property is commonly applied alongside elements that can trigger size containment, such as `contain: size` and `content-visibility`, and may also be set using the `contain-intrinsic-size` shorthand property.

 Size containment allows a user agent to lay out an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
 By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no height (or width).
 The `contain-intrinsic-height` property allows authors to specify an appropriate value to be used as the height for layout.

 The `auto <length>` value allows the height of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified height when the element is skipping its contents.
 This allows offscreen elements with `content-visibility: auto` to benefit from size containment without developers having to be as precise in their estimates of element size.
 The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used).

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | elements for which size containment can apply |
| Inherited | no |
| Computed value | as specified, with <length>s values computed |
| Animation type | by computed value type |

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

contain-intrinsic-height =
  auto? [ none | <length> ]

```

Examples
--------

In addition to the example below, the `contain-intrinsic-size` page contains a live example that demonstrates the effect of modifying the intrinsic width and height.

### Setting the intrinsic height

The HTML below defines an element "contained\_element" that will be subject to size constraint, and which contains a child element.

```html
<div id="contained\_element">
  <div class="child\_element"></div>
</div>
```

 The CSS below sets the `content-visibility` of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
 The width and height that are used when it is size constrained are set at the same time using `contain-intrinsic-width` and `contain-intrinsic-height`, respectively.

```css
#contained\_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-height |

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

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

See also
--------

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


content - CSS: Cascading Style Sheets

content
=======

The **`content`** CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the `content` property specifies whether the element renders normally (`normal` or `none`) or is replaced with an image (and associated "alt" text). For pseudo-elements and margin boxes, `content` defines the content as images, text, both, or none, which determines whether the element renders at all.

Objects inserted using the `content` property are **anonymous replaced elements**.

Try it
------

Syntax
------

```css
/\* Keywords that cannot be combined with other values \*/
content: normal;
content: none;

/\* <content-replacement>: <image> values \*/
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/\* speech output: alternative text after a "/" \*/
content: url("../img/test.png") / "This is the alt text";

/\* <string> value \*/
content: "unparsed text";

/\* <counter> values, optionally with <list-style-type> \*/
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

/\* attr() value linked to the HTML attribute value \*/
content: attr(href);

/\* <quote> values \*/
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/\* <content-list>: a list of content values.
Several values can be used simultaneously \*/
content: "prefix" url(http://www.example.com/test.png);
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

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

### Values

The value can be:

* One of two keywords — `none` or `normal`
* `<content-replacement>` when replacing a DOM node. `<content-replacement>` is always an `<image>`.
* A `<content-list>` when replacing pseudo-elements and margin boxes. A content-list is a list of one or more anonymous inline boxes appearing in the order specified. Each `<content-list>` item is either `contents` or of type `<string>`, `<image>`, `<counter>`, `<quote>`, `<target>`, or `<leader()>`.
* An optional alternative text value of a `<string>` or `<counter>`, preceded by a slash (`/`).

The keywords and data types mentioned above are described in more detail below:

`none`

 When applied to a pseudo-element, the pseudo-element is not generated.
 When applied to an element, the value has no effect.

`normal`

The default value. Computes to `none` for the `::before` and `::after` pseudo-elements. For other pseudo-elements, the content will be the initial (or normal) content expected for that `::marker`, `::placeholder`, or `::file-selector-button`. For regular elements or page margin boxes, this computes to `contents`.

`contents`
Experimental

Adds the contents of the element itself to the generated content value.

`<string>`

A sequence of characters enclosed in matching single or double quotes. Multiple string values will be concatenated (there is no concatenation operator in CSS).

`<image>`

An `<image>`, representing an image to display. This can be equal to a `url()`, `image-set()`, or `<gradient>` data type, or a part of the webpage itself, defined by the `element()` function.

`<counter>`

The `<counter>` value is a CSS counter, generally a number produced by computations defined by `<counter-reset>` and `<counter-increment>` properties. It can be displayed using either the `counter()` or `counters()` function.

`counter()`

The `counter()` function has two forms: 'counter(*name*)' or 'counter(*name*, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified `<list-style-type>` (`decimal` by default).

`counters()`

The `counters()` function also has two forms: 'counters(*name*, *string*)' or 'counters(*name*, *string*, *style*)'. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated `<list-style-type>` (`decimal` by default).

`<quote>`

The `<quote>` data type includes language- and position-dependent keywords:

`open-quote` and `close-quote`

These values are replaced by the appropriate string from the `quotes` property.

`no-open-quote` and `no-close-quote`

Introduces no content, but increments (decrements) the level of nesting for quotes.

`<target>`
Experimental

The `<target>` data type includes three target functions, `<target-counter()>`, `<target-counters()>`, and `<target-text()>` that create cross-references obtained from the target end of a link. See Formal syntax.

`<leader()>`
Experimental

The `<leader()>` data type inclues a leader function: `leader( <leader-type> )`. This function accepts the keyword values `dotted`, `solid`, or `space` (equal to `leader(".")`, `leader("_")`, and `leader(" ")`, respectively), or a `<string>` as a parameter. When supported and used as a value for `content`, the leader-type provided will be inserted as a repeating pattern, visually connecting content across a horizontal line.

`attr(x)`

The `attr(x)` CSS function retrieves the value of an attribute of the selected element, or the pseudo-element's originating element. The value of the element's attribute `x` is an unparsed string representing the attribute name. If there is no attribute `x`, an empty string is returned. The case sensitivity of the attribute name parameter depends on the document language.

alternative text: `/ <string> | <counter>`

Alternative text may be specified for an image or any `<content-list>` items, by appending a forward slash and then a string of text or a counter. The alternative text is intended for speech output by screen-readers, but may also be displayed in some browsers. Note that if the browser does not support alternative text, the `content` declaration will be considered invalid and will be ignored. The `/ <string>` or `/ <counter>` data types specify the "alt text" for the element.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | All elements, tree-abiding pseudo-elements, and page margin boxes |
| Inherited | no |
| Computed value | On elements, always computes to `normal`. On `::before` and `::after`, if `normal` is specified, computes to `none`. Otherwise, for URI values, the absolute URI; for `attr()` values, the resulting string; for other keywords, as specified. |
| Animation type | discrete |

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

content =
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]?  |
  <element()>

<content-replacement> =
  <image>

<content-list> =
  [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+

<counter> =
  <counter()>   |
  <counters()>

<element()> =
  element( <id-selector> )

<image> =
  <url>       |
  <gradient>

<counter()> =
  counter( <counter-name> , <counter-style>? )

<counters()> =
  counters( <counter-name> , <string> , <counter-style>? )

<content()> =
  content( [ text | before | after | first-letter | marker ]? )

<attr()> =
  attr( <attr-name> <attr-type>? , <declaration-value>? )

<id-selector> =
  <hash-token>

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

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<attr-name> =
  [ <ident-token> '|' ]? <ident-token>

<attr-type> =
  string            |
  url               |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>

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

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

<symbols()> =
  symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

```

Examples
--------

The first five examples create generated content on pseudo-elements. The last three are examples of element replacement.

### Appending strings based on an element's class

This example inserts generated text after the text of elements that have a particular class name. The text is colored red.

#### HTML

```html
<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="new-entry">Vampire Romance</li>
</ol>
```

#### CSS

```css
.new-entry::after {
  content: " New!"; /\* The leading space creates separation
 between the DOM node's content and the generated content
 being added. \*/
  color: red;
}
```

#### Result

### Quotes

This example inserts differently colored quotation marks around quotes.

#### HTML

```html
<p>
  According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
    I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.
  </q>
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>
<p lang="fr-fr">
  Mais c'est Magritte qui a dit,
  <q lang="fr-fr"> Ceci n'est pas une pipe. </q>.
</p>
```

#### CSS

```css
q {
  color: #00f;
}

q::before,
q::after {
  font-size: larger;
  color: #f00;
  background: #ccc;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}
```

#### Result

Note the type of quotes generated is based on the language. Browsers add open- and close-quotes before and after `<q>` elements by default, so the quotes in this example would appear without them being explicitly set. They could have been turned off by setting the respective `content` property values to `no-open-quote` and `no-close-quote`, or by setting them both to `none`. They can also be turned off by setting the `quotes` property to `none` instead.

### Adding text to list item counters

This example combines a counter sandwiched between two `<string>`s prepended to all list items, creating a more detailed marker for list items (`<li>`) within unordered lists (`<ol>`).

#### HTML

```html
<ol>
  <li>Dogs</li>
  <li>Cats</li>
  <li>
    Birds
    <ol>
      <li>Owls</li>
      <li>Ducks</li>
      <li>Flightless</li>
    </ol>
  <li>Marsupials</li>
  </li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: items;
  margin-left: 2em;
}
li {
  counter-increment: items;
}
li::marker {
  content: "item " counters(items, ".", numeric) ": ";
}
```

#### Result

The generated content on each list item's marker adds the text "item " as a prefix, including a space to separate the prefix from the counter, which is followed by ": ", a colon and an additional space. The `counters()` function defines a numeric `items` counter, in which the numbers of nested ordered lists have their numbers separated with a period (`.`) in most browsers.

### Strings with attribute values

This example is useful for print stylesheets. It uses an attribute selector to select every fully qualified secure link, adding the value of the `href` attribute after the link text as the content of the `::after` pseudo-element.

#### HTML

```html
<ul>
  <li><a href="https://mozilla.com">Mozilla</a></li>
  <li><a href="/">MDN</a></li>
  <li><a href="https://openwebdocs.org">OpenWebDocs</a></li>
</ul>
```

#### CSS

```css
a[href^="https://"]::after
{
  content: " (URL: " attr(href) ")";
  color: darkgreen;
}
```

#### Result

The generated content is the value of the `href` attribute, prepended by "URL: ", with a space, all in parentheses.

### Adding an image with alternative text

This example inserts an image before all links. Two `content` values are provided. The later `content` value includes an image with alternative text that a screen reader can output as speech. If a browser does not support alternative text, this declaration will be considered invalid, with the previous `content` value displaying. This fallback content list includes an image and the message " - alt text is not supported - ".

#### HTML

```html
<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>
```

#### CSS

 The CSS to show the image and set the alternative text is shown below.
 This also sets the font and color for the content.
 This will be used on browsers that *display* the alternative text and in browsers that don't support alternative text and show the fallback `content` value.

```css
a::before {
  /\* fallback content \*/
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
    " - alt text is not supported - ";
  /\* content with alternative text \*/
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}
```

#### Result

If using a screen reader, it should speak the word "MOZILLA" when it reaches the image. If supported (if the "alt text is not supported" is not showing), you can select the `::before` pseudo-element with your developer tools selection tool, and view the accessible name in the accessibility panel.

In browsers that don't support the alternative text syntax the whole declaration containing the alt text is invalid. In this case, the previous `content` value will be used, showing the image and "alt text is not supported" text.

### Element replacement with `url()`

This example replaces a regular element! The element's contents are replaced with an SVG using the `url()` image function.

Pseudo-elements aren't rendered on replaced elements. As this element is replaced, any matching `::after` or `::before` are not generated or applied. To demonstrate this, we include an `::after` declaration block, attempting to add the `id` as generated content. This pseudo-element will not be generated as the element is replaced.

#### HTML

```html
<div id="replaced">This content is replaced!</div>
```

#### CSS

```css
#replaced {
  content: url("mdn.svg");
}

/\* will not show if element replacement is supported \*/
div::after {
  content: " (" attr(id) ")";
}
```

#### Result

When generating content on regular elements (rather than just on pseudo-elements), the entire element is replaced. This means that `::before` and `::after` pseudo-elements are not generated.

### Element replacement with `<gradient>`

This example demonstrates how an element's contents can be replaced by any type of `<image>`, in this case, a CSS gradient. The element's contents are replaced with a `linear-gradient()`. With `@supports`, we provide alt text support and a `repeating-linear-gradient()` for browsers that support alt text with element content replacement.

#### HTML

```html
<div id="replaced">I disappear</div>
```

#### CSS

```css
div {
  border: 1px solid;
  background-color: #ccc;
  min-height: 100px;
  min-width: 100px;
}

#replaced {
  content: linear-gradient(#639f, #c96a);
}

@supports (content: linear-gradient(#000, #fff) / "alt text") {
  #replaced {
    content: repeating-linear-gradient(blue 0, orange 10%) /
      "Gradients and alt text are supported";
  }
}
```

#### Result

Check the browser compatibility chart. All browsers support gradients and all browsers support replacing elements with images, but not all browsers support gradients as a `content` value and not all browsers support alt text on replacements. If the browser displays a box with no gradient, replacing elements is supported, but gradients are not supported as a content replacement value. If the element is replaced with a striped gradient, the browser supports both.

### Element replacement with `image-set()`

This example replaces an element's content with a `image-set()`. If the users display has normal resolution the `1x.png` will be displayed screens with a higher resolution will display the `2x.png` image.

#### HTML

```html
<div id="replaced">Mozilla</div>
```

#### CSS
```

div {
  width: 100px;
  border: 1px solid lightgrey;
}
```

```css
#replaced {
  content: image-set(
    "1x.png" 1x,
    "2x.png" 2x
  );
}
```

#### Result

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

CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.

If inserted content is not decorative, check that the information is provided to assistive technologies and is also available when CSS is turned off.

* Accessibility support for CSS generated content – Tink (2015)
* WCAG, Guideline 1.3: Create content that can be presented in different ways
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
* Failure of Success Criterion 1.3.1: inserting non-decorative generated content Techniques for WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| CSS Generated Content Module Level 3 # content-property |

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

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

See also
--------

* `::after`
* `::before`
* `::marker`
* `contain`
* `quotes`
* `<gradient>`
* `image-set()`
* `url()`
* Replaced elements
* CSS generated content module
* CSS lists and counters module