hyphens - CSS: Cascading Style Sheets

hyphens
=======

The **`hyphens`** CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

Try it
------

**Note:** In the above demo, the string "An extraordinarily long English word!" contains the hidden `` (soft hyphen) character: `An extraordinarily long English word!`. This character is used to indicate a potential place to insert a hyphen when `hyphens: manual;` is specified.

Hyphenation rules are language-specific. In HTML, the language is determined by the `lang` attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. In XML, the `xml:lang` attribute must be used.

**Note:** The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

If supported, `hyphenate-character` may be used to specify an alternative hyphenation character to use at the end of the line being broken.

Syntax
------

```css
/\* Keyword values \*/
hyphens: none;
hyphens: manual;
hyphens: auto;

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

The `hyphens` property is specified as a single keyword value chosen from the list below.

### Values

`none`

Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.

`manual`

Default value. Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See Suggesting line break opportunities below for details.

`auto`

The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection when present.

**Note:** The `auto` setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. You must specify a language using the `lang` HTML attribute to guarantee that automatic hyphenation is applied in that language.

**Note:** If you apply `word-break: break-all` then no hyphens are shown, even if the word breaks at a hyphenation point.

Suggesting line break opportunities
-----------------------------------

There are two Unicode characters used to manually specify potential line break points within text:

U+2010 (HYPHEN)

The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.

U+00AD (SHY)

An invisible, "**s**oft" **hy**phen. This character is not rendered visibly; instead, it marks a place where the browser should break the word if hyphenation is necessary. In HTML, use `` to insert a soft hyphen.

**Note:** When the HTML `<wbr>` element leads to a line break, no hyphen is added.

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

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

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

hyphens =
  none    |
  manual  |
  auto

```

Examples
--------

### Specifying text hyphenation

This example uses three classes, one for each possible configuration of the `hyphens` property.

#### HTML

```html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extremely long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extremely long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extremely long English word</dd>
</dl>
```

#### CSS

```css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}
```

#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # hyphens-property |

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

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

See also
--------

* `content`
* `overflow-wrap` (formerly `word-wrap`)
* `word-break`
* Guide to wrapping and breaking text


::-webkit-meter-bar - CSS: Cascading Style Sheets

::-webkit-meter-bar
===================

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

The **`::-webkit-meter-bar`** CSS pseudo-element is a WebKit extension that represents the meter bar in a `<meter>` element. It is used for selecting and applying styles to the container meter gauge.

Syntax
------

```css
::-webkit-meter-bar {
  /\* ... \*/
}
```

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

Not part of any standard.

Examples
--------

### HTML

```html
Normal: <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Styled: <meter id="styled" min="0" max="10" value="6">Score 6/10</meter>
```

### CSS

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

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

#styled::-webkit-meter-bar {
  background: #eee;
  box-shadow: 0 2px 3px rgb(0 0 0 / 20%) inset;
  border-radius: 3px;
}
```

### JavaScript

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

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

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

### Result

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

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

See also
--------

* The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:
    + `::-webkit-meter-inner-element`
    + `::-webkit-meter-even-less-good-value`
    + `::-webkit-meter-optimum-value`
    + `::-webkit-meter-suboptimum-value`
* WebKit CSS extensions


offset-path - CSS: Cascading Style Sheets

offset-path
===========

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

Newly availableSince August 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 **`offset-path`** CSS property specifies a path for an element to follow and determines the element's positioning within the path's parent container or the SVG coordinate system. The path is a line, a curve, or a geometrical shape along which the element gets positioned or moves.

The `offset-path` property is used in combination with the `offset-distance`, `offset-rotate`, and `offset-anchor` properties to control the position and orientation of the element along a path.

Try it
------

Syntax
------

```css
/\* Default \*/
offset-path: none;

/\* Line segment \*/
offset-path: ray(45deg closest-side contain);
offset-path: ray(contain 150deg at center center);
offset-path: ray(45deg);

/\* URL \*/
offset-path: url(#myCircle);

/\* Basic shape \*/
offset-path: circle(50% at 25% 25%);
offset-path: ellipse(50% 50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200");
offset-path: rect(5px 5px 160px 145px round 20%);
offset-path: xywh(0 5px 100% 75% round 15% 0);

/\* Coordinate box \*/
offset-path: content-box;
offset-path: padding-box;
offset-path: border-box;
offset-path: fill-box;
offset-path: stroke-box;
offset-path: view-box;

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

### Values

The `offset-path` property takes as its value an `<offset-path>` value, a `<coord-box>` value, or both, or the `none` keyword. The `<offset-path>` value is a `ray()` function, a `<url>` value, or a `<basic-shape>` value.

`none`

Specifies that the element does not follow any offset path. The `none` value is equivalent to the element not having any offset transform. The element's movement in this case is determined by its default position properties, such as `top` and `left`, instead of an offset path. This is the default value.

`<offset-path>`

A `ray()` function, a `<url>` value, or a `<basic-shape>` value that specifies the geometrical offset path. If omitted, the path shape for the `<coord-box>` value is `inset(0 round X)`, where `X` is the value of `border-radius` of the element that establishes the containing block.

`ray()`

Defines a line starting at a set position, of a set length, and extending at the specified angle. The `ray()` function accepts up to four parameters – an `<angle>`, an optional size value, the optional keyword `contain`, and an optional `at <position>`.

`<url>`

Specifies the ID of an SVG shape element. The path is the shape of the SVG `<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, or `<rect>` element referenced by its `id` in the `url()` function. If the URL does not reference a shape element or is otherwise invalid, the resolved value for the offset path is `path("M0,0")` (which is a valid `<basic-shape>` value).

`<basic-shape>`

Specifies the offset path as the equivalent path of a `CSS basic shape function`, such as `circle()`, `ellipse()`, `inset()`, `path()`, `polygon()`, `rect()`, or `xywh()`. For example, if the `<basic_shape>` is an `ellipse()` function, then the path is the outline of the ellipse, starting at the rightmost point of the ellipse, proceeding clockwise through a full rotation. For `ellipse()` and `circle()`, which accept the `at <position>` parameter, if the `<position>` is omitted, the position defaults to `center` unless the element has an `offset-position` specified. In this case, the `offset-position` value is used for the `at <position>` parameter.

`<coord-box>`

Specifies the size information of the reference box containing the path. The reference box is derived from the element that establishes the containing block for this element. This parameter is optional. If not specified, the default value is `border-box` in CSS contexts. In SVG contexts, the value is treated as `view-box`. If `ray()` or `<basic-shape>` is used to define the offset path, the `<coord-box>` value provides the reference box for the ray or the `<basic-shape>`, respectively. If `<url>` is used to define the offset path, the `<coord-box>` value provides the viewport and user coordinate system for the shape element, with the origin (`0 0`) at the top left corner and size being `1px`.

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

The `offset-path` property defines a path an animated element can follow. An offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. The element's exact position on the offset path is determined by the `offset-distance` property. Each shape or path must define an initial position for the computed value of `0` for `offset-distance` and an initial direction which specifies the rotation of the object to the initial position.

Early versions of the spec called this property `motion-path`. It was changed to `offset-path` because the property describes static positions, not motion.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |
| Creates stacking context | yes |

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

offset-path =
  none                          |
  <offset-path> || <coord-box>

<offset-path> =
  <ray()>        |
  <url>          |
  <basic-shape>

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

<ray()> =
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )

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

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

<ray-size> =
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides

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

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

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

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

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

```

Examples
--------

### Creating an offset-path using box-edge positioning

This example demonstrates using various `<coord-box>` values in the `offset-path` property.
```

<div class="box blueBox"></div>
<div class="box redBox"></div>
<div class="box greenBox"></div>
```

```
body {
  width: 300px;
  height: 200px;
  border-radius: 50px;
  border: dashed aqua;
  border-width: 25px;
  padding: 25px;
  margin: 50px;
}
```

```css
.box {
  width: 40px;
  height: 20px;
  animation: move 8000ms infinite ease-in-out;
}

.blueBox {
  background-color: blue;
  offset-path: border-box;
  offset-distance: 5%;
}

.greenBox {
  background-color: green;
  offset-path: padding-box;
  offset-distance: 8%;
}

.redBox {
  background-color: red;
  offset-path: content-box;
  offset-distance: 12%;
}

@keyframes move {
  0%,
 20% {
    offset-distance: 0%;
  }
  80%,
 100% {
    offset-distance: 100%;
  }
}
```

In this example, the margin, border, and padding have been purposely given large values to demonstrate the placement of the blue, green, and red rectangles on their respective `<coord-box>` edges: border-box, padding-box, and content-box.

![The blue rectangle sits on the outer edge of the border box, the green rectangle is on the inner border edge, which is the outer edge of the padding box, and the red rectangle is on the outer edge of the content box.](/en-US/docs/Web/CSS/offset-path/offset-path-coord-box.png)

#### Result

### Creating an offset-path using path()

In this example, the `<svg>` element creates a house with a chimney and also defines two halves of a scissor. The house and chimney are composed of rectangles and polygons, and the scissor halves are represented by two distinct path elements. In the CSS code, the `offset-path` property is used to specify a path to follow for the two scissor halves. This CSS-defined path is identical to the one represented by the `<path>` element in the SVG, which is the outline of the house including the chimney.

```html
<svg
 xmlns="http://www.w3.org/2000/svg"
 width="700"
 height="450"
 viewBox="350 0 1400 900">
  <title>House and Scissors</title>
  <rect x="595" y="423" width="610" height="377" fill="blue" />
  <polygon points="506,423 900,190 1294,423" fill="yellow" />
  <polygon points="993,245 993,190 1086,190 1086,300" fill="red" />
  <path
 id="house"
 d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
 fill="none"
 stroke="black"
 stroke-width="13"
 stroke-linejoin="round"
 stroke-linecap="round" />
  <path
 id="firstScissorHalf"
 class="scissorHalf"
 d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
 transform="translate(0,0)"
 fill="green"
 stroke="black"
 stroke-width="5"
 stroke-linejoin="round"
 stroke-linecap="round"
 fill-rule="evenodd" />
  <path
 id="secondScissorHalf"
 class="scissorHalf"
 d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
 transform="translate(0,0)"
 fill="forestgreen"
 stroke="black"
 stroke-width="5"
 stroke-linejoin="round"
 stroke-linecap="round"
 fill-rule="evenodd" />
</svg>
```

```css
.scissorHalf {
  offset-path: path(
    "M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
  );
  animation: followpath 4s linear infinite;
}

@keyframes followpath {
  to {
    offset-distance: 100%;
  }
}
```

#### Result

Without the `offset-path` property, the two halves of the scissors would default to the top-left corner of the canvas. However, by using `offset-path`, the two scissor halves are aligned with the starting point of the SVG path, allowing them to move along it.

### Creating an offset-path using url()

This example illustrates how to refer to an SVG shape to define the shape of the path that an element can follow. The green circle (defined by `.target`) follows the path of a rectangle, which is defined by passing the SVG shape's ID (`svgRect`) to the `offset-path` property by using `url()`.

The SVG rectangle that defines the path shape is shown here only to visually demonstrate that the green circle is indeed following the path defined by this rectangle.

```html
<div class="outer">
  <div class="target"></div>
</div>
  <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect id="svgRect" x="50" y="50" width="200" height="100" />
  </svg>
</div>
```

```
.outer {
  position: absolute;
}
```

```css
.target {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: green;
  offset-path: url(#svgRect);
  offset-anchor: auto;
  animation: move 5s linear infinite;
}

#svgRect {
  fill: antiquewhite;
  stroke: black;
  stroke-width: 2;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```

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

| Specification |
| --- |
| Motion Path Module Level 1 # offset-path-property |

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

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

See also
--------

* `offset`
* `offset-distance`
* `offset-rotate`
* SVG <path>
* `path()`
* Other demos:
    + Examples using various shapes values on Codepen by CSS-Tricks
    + Moving a triangle along a curved path on Codepen by Eric Willigers
    + Moving a pair of scissors along the shape of a house on Codepen by Eric Willigers
    + Moving multiple pairs of eyes on JSFiddle by Eric Willigers


transition-duration - CSS: Cascading Style Sheets

transition-duration
===================

The **`transition-duration`** CSS property sets the length of time a transition animation should take to complete. By default, the value is `0s`, meaning that no animation will occur.

Try it
------

You may specify multiple durations; each duration will be applied to the corresponding property as specified by the `transition-property` property, which acts as a master list. If the number of specified durations is less than in the master list, the user agent repeats the list of durations. If the number of specified durations is more than in the master list, the list is truncated to the right size. In both the cases, the CSS declaration stays valid.

Syntax
------

```css
/\* <time> values \*/
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

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

### Values

`<time>`

Is a `<time>` denoting the amount of time the transition from the old value of a property to the new value should take. A time of `0s` indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid.

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

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

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

transition-duration =
  <time [0s,∞]>#

```

Examples
--------

### Example showing different durations

#### HTML

```html
<div class="box duration-1">0.5 seconds</div>

<div class="box duration-2">2 seconds</div>

<div class="box duration-3">4 seconds</div>

<button id="change">Change</button>
```

#### CSS

```css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
}

.duration-1 {
  transition-duration: 0.5s;
}

.duration-2 {
  transition-duration: 2s;
}

.duration-3 {
  transition-duration: 4s;
}
```

#### JavaScript

```js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
```

#### Result

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

| Specification |
| --- |
| CSS Transitions # transition-duration-property |

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

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

See also
--------

* Using CSS transitions
* `transition`
* `transition-property`
* `transition-timing-function`
* `transition-delay`
* `TransitionEvent`


@starting-style - CSS: Cascading Style Sheets

@starting-style
===============

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

The **`@starting-style`** CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page.

Syntax
------

The `@starting-style` at rule can be used in two ways:

1. As a standalone block, in which case it contains one or more rulesets defining starting style declarations and selecting the elements they apply to:

```css
@starting-style {
  rulesets
}
```

2. Nested within an existing ruleset, in which case it contains one or more declarations defining starting property values for the elements already selected by that ruleset:

```css
selector { /\* existing ruleset \*/
  /\* ... \*/

  @starting-style {
    declarations
  }
}
```

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

To avoid unexpected behavior, CSS transitions are by default not triggered on an element's initial style update, or when its `display` type changes from `none` to another value. To enable first-style transitions, `@starting-style` rules are needed. They provide starting styles for elements that do not have a previous state, defining the property values to transition from.

`@starting-style` is especially useful when creating entry and exit transitions for elements displayed in the top layer (such as popovers and modal `<dialog>`s), elements that are changing to and from `display: none`, and elements when first added to or removed from the DOM.

**Note:** `@starting-style` is only relevant to CSS transitions. When using CSS animations to implement such effects, `@starting-style` is not needed. See Using CSS animations for an example.

There are two ways to use `@starting-style`: as a standalone rule or nested within a ruleset.

Let's consider a scenario where we want to animate a popover when shown (that is, when added to the top layer). The "original rule" specifying the styles for the open popover could look something like this (see the popover example below):

```css
[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}
```

To specify the starting values of the popover's properties that will be animated using the first method, you include a standalone `@starting-style` block in your CSS:

```css
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}
```

**Note:** The `@starting-style` at-rule and the "original rule" have the same `specificity`. To ensure that starting styles get applied, include the `@starting-style` at-rule *after* the "original rule". If you specify the `@starting-style` at-rule before the "original rule", the original styles will override the starting styles.

To specify the starting style for the popover using the nested method, you can nest the `@starting-style` block inside the "original rule":

```css
[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}
```

### When exactly are starting styles used?

It is important to understand that an element will transition from its `@starting-style` styles when it is first rendered in the DOM, or when it transitions from `display: none` to a visible value. When it transitions back from its initial visible state, it will no longer use the `@starting-style` styles as it is now visible in the DOM. Instead, it will transition back to whatever styles exist for that element's default state.

In effect, there are three style states to manage in these situations — starting-style state, transitioned state, and default state. It is possible for the "to" and "from" transitions to be different in such cases. You can see a proof of this in our Demonstration of when starting styles are used example, below.

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

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

### Basic @starting-style usage

Transition an element's `background-color` from transparent to green when it is initially rendered:

```css
#target {
  transition: background-color 1.5s;
  background-color: green;
}

@starting-style {
  #target {
    background-color: transparent;
  }
}
```

Transition the `opacity` of an element when it changes its `display` value to or from `none`:

```css
#target {
  transition-property: opacity, display;
  transition-duration: 0.5s;
  display: block;
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
}

#target.hidden {
  display: none;
  opacity: 0;
}
```

### Demonstration of when starting styles are used

In this example, a button is pressed to create a `<div>` element, give it a `class` of `showing`, and add it to the DOM.

`showing` is given a `@starting-style` of `background-color: red` and a style of `background-color: blue` to transition to. The default `div` ruleset contains `background-color: yellow`, and is also where the `transition` is set.

When the `<div>` is first added to the DOM, you'll see the background transition from red to blue. After a timeout, we remove the `showing` class from the `<div>` via JavaScript. At that point it transitions from blue back to yellow, not red. This proves that the starting styles are only used when the element is first rendered in the DOM. Once it has appeared, the element transitions back to the default style set on it.

After another timeout, we then remove the `<div>` from the DOM altogether, resetting the initial state of the example so it can be run again.

#### HTML

```html
<button>Display <code><div></code></button>
```

#### CSS
```

div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  margin-top: 10px;
}

div::after {
  content: "class: " attr(class);
  position: relative;
  top: 3px;
  left: 3px;
}
```

```css
div {
  background-color: yellow;
  transition: background-color 3s;
}

div.showing {
  background-color: skyblue;
}

@starting-style {
  div.showing {
    background-color: red;
  }
}
```

#### JavaScript

```js
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  btn.disabled = true;
  const divElem = document.createElement("div");
  divElem.classList.add("showing");
  document.body.append(divElem);

  setTimeout(() => {
    divElem.classList.remove("showing");

    setTimeout(() => {
      divElem.remove();
      btn.disabled = false;
    }, 3000);
  }, 3000);
});
```

#### Result

The code renders as follows:

### Animating a popover

In this example, a popover is animated using CSS transitions. Basic entry and exit animations are provided using the `transition` property.

#### HTML

The HTML contains a `<div>` element declared as a popover using the popover attribute and a `<button>` element designated as the popover's display control using its popovertarget attribute.

```html
<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>
```

#### CSS

In this example, we want to animate two properties, `opacity` and `transform` (specifically, a horizontally scaling transform), to make the popover fade in and out as well as grow and shrink horizontally.

```css
html {
  font-family: Arial, Helvetica, sans-serif;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;

  /\* Final state of the exit animation \*/
  opacity: 0;
  transform: scaleX(0);

  transition:
    opacity 0.7s,
    transform 0.7s,
    overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /\* Equivalent to
 transition: all 0.7s allow-discrete; \*/
}

/\* Include after the [popover]:popover-open rule \*/
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

/\* Transition for the popover's backdrop \*/
[popover]::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /\* Equivalent to
 transition: all 0.7s allow-discrete; \*/
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/\* Nesting (&) is not supported for pseudo-elements
so specify a standalone starting-style block. \*/
@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}
```

To achieve this, we have set a starting state for these properties on the default hidden state of the popover element (selected via `[popover]`), and an ending state on the open state of the popover (selected via the `:popover-open` pseudo-class).

We then set a `transition` property to animate between the two states. A starting state for the animation is included inside a `@starting-style` at-rule to enable the entry animation.

Because the animated element is being promoted to the top layer when shown and removed from the top layer when hidden (with `display: none`), some extra steps are required to ensure the animation works in both directions:

* `display` is added to the list of transitioned elements to ensure the animated element is visible (set to `display: block` or another visible `display` value) throughout both the entry and exit animations. Without this, the exit animation would not be visible; in effect, the popover would just disappear. Note that the `transition-behavior: allow-discrete` value is also set in the shorthand to activate the animation.
* `overlay` is added to the list of transitioned elements to ensure that the removal of the element from the top layer is deferred until the animation ends. This doesn't make a huge difference for simple animations such as this one, but in more complex cases, not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur.

**Note:** We've also included a transition on the `::backdrop` that appears behind the popover when it opens, to provide a nice darkening animation. `[popover]:popover-open::backdrop` is used to select the backdrop when the popover is open.

#### Result

The code renders as follows:

**Note:** Because popovers change from `display: none` to `display: block` each time they are shown, the popover transitions from its `@starting-style` styles to its `[popover]:popover-open` styles every time the entry transition occurs. When the popover closes, it transitions from its `[popover]:popover-open` state to the default `[popover]` state.

**Note:** You can find an example that demonstrates transitioning a `<dialog>` element and its backdrop as it is shown and hidden on the `<dialog>` reference page — see Transitioning dialog elements.

### Transitioning elements on DOM addition and removal

This example contains a button which, when pressed, appends new elements to a `<section>` container. Each element, in turn, contains a nested button, which when pressed, removes the element. This example demonstrates how to use transitions to animate elements when they are added to or removed from the DOM.

#### HTML

```html
<button>Create new column</button>
<section></section>
```

#### JavaScript

JavaScript enables the addition and removal of elements:

```js
const btn = document.querySelector("button");
const sectionElem = document.querySelector("section");

btn.addEventListener("click", createColumn);

function randomColor() {
  function randomNum() {
    return Math.floor(Math.random() \* 255);
  }

  return `rgb(${randomNum()} ${randomNum()} ${randomNum()})`;
}

function createColumn() {
  const divElem = document.createElement("div");
  divElem.style.backgroundColor = randomColor();

  const closeBtn = document.createElement("button");
  closeBtn.textContent = "✖";
  closeBtn.setAttribute("aria-label", "close");
  divElem.append(closeBtn);
  sectionElem.append(divElem);

  closeBtn.addEventListener("click", () => {
    divElem.classList.add("fade-out");

    setTimeout(() => {
      divElem.remove();
    }, 1000);
  });
}
```

When the "Create new column" button is clicked, the `createColumn()` function is called. This creates a `<div>` element with a randomly generated background color and a `<button>` element to close the `<div>`. It then appends the `<button>` to the `<div>` and the `<div>` to the `<section>` container.

We then add an event listener to the close button via `addEventListener`. Clicking the close button does two things:

* Adds the `fade-out` class to the `<div>`. Adding the class triggers the exit animation set on that class.
* Removes the `<div>` after a 1000ms delay. The `setTimeout()` delays removal of the `<div>` from the DOM (via `Element.remove()`) until after the animation ends.

#### CSS

We include a `transition` that animates the `opacity` and `scale` of each column as they are added and removed:
```

html \* {
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  gap: 10px;
}

body > button {
  margin: 10px 10px 0 10px;
}

section {
  display: flex;
  flex: 1;
  gap: 10px;
  margin: 10px;
}
```

```css
div {
  flex: 1;
  border: 1px solid gray;
  position: relative;
  background: linear-gradient(
    to right,
    rgb(255 255 255 / 0%),
    rgb(255 255 255 / 50%)
  );
  opacity: 1;
  scale: 1 1;

  transition:
    opacity 0.7s,
    scale 0.7s,
    display 0.7s allow-discrete;
    all 0.7s allow-discrete
  /\* Equivalent to
 transition: all 0.7s allow-discrete; \*/
}

/\* Include after the `div` rule \*/
@starting-style {
  div {
    opacity: 0;
    scale: 1 0;
  }
}

.fade-out {
  opacity: 0;
  display: none;
  scale: 1 0;
}

div > button {
  font-size: 1.6rem;
  background: none;
  border: 0;
  text-shadow: 2px 1px 1px white;
  border-radius: 15px;
  position: absolute;
  top: 1px;
  right: 1px;
  cursor: pointer;
}
```

To animate the `opacity` and `scale` of each `<div>` as it is added to the DOM and then reverse the animation as it is removed from the DOM, we:

* Specify the ending state of the properties we want to transition on the `div { ... }` rule.
* Specify the starting state from which to transition the properties inside a `@starting-style` block.
* Specify the exit animation inside the `.fade-out` rule — this is the class that the JavaScript assigns to the `<div>` elements when their close buttons are pressed. Besides setting the `opacity` and `scale` ending states, we also set `display: none` on the `<div>`s — we want them to become immediately unavailable when removed from the UI.
* Specify the `transition` list inside the `div { ... }` rule to animate `opacity`, `scale`, and `display`. Note that for `display`, the `transition-behavior: allow-discrete` value is also set in the shorthand so that it will animate.

#### Result

The final result looks like this:

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

| Specification |
| --- |
| CSS Transitions Level 2 # defining-before-change-style |

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

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

See also
--------

* CSS transitions module
* `overlay`
* `transition-behavior`
* `CSSStartingStyleRule`
* Four new CSS features for smooth entry and exit animations on developer.chrome.com (2023)


counter() - CSS: Cascading Style Sheets

counter()
=========

The **`counter()`** CSS function returns a string representing the current value of the named counter, if there is one.

The `counter()` function is generally used within pseudo-element through the `content` property but, theoretically, it can be used wherever a `<string>` value is supported.

Try it
------

Syntax
------

```css
/\* Simple usage \*/
counter(countername);

/\* changing the counter display \*/
counter(countername, upper-roman)
```

Counters have no visible effect by themselves.
 The `counter()` and `counters()` functions are what make counters useful by returning developer-defined strings (or images).

### Values

The `counter()` function accepts up to two parameters. The first parameter is the `<counter-name>`. The optional second parameter is the `<counter-style>`.

`<counter-name>`

A `<custom-ident>` identifying the counter, which is the same case-sensitive name used with the `counter-reset` and `counter-increment` property values. The counter name cannot start with two dashes and can't be `none`, `unset`, `initial`, or `inherit`.

`<counter-style>`

A `<list-style-type>` name, `<@counter-style>` name or `symbols()` function, where a counter style name is a `numeric`, `alphabetic`, or `symbolic` simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other predefined counter style. If omitted, the counter-style defaults to `decimal`.

**Note:** To join the counter values when nesting counters, use the `counters()` function, which provides an additional `<string>` parameter.

### Formal syntax
```

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

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

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

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

<image> =
  <url>       |
  <gradient>

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

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

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

```

Examples
--------

### lower-roman compared to lower-alpha

In this example, we display a counter using `lower-roman` and `lower-alpha` list styles.

#### HTML

```html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content:
    "[" counter(count, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}
```

#### Result

### Displaying a counter using three styles

In this example, we use the `counter()` function three times.

#### HTML

```html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```

#### CSS

We include the `counter()` function with three different counter styles, including the default decimal value. We've added padding to the list to provide space for the long `::marker` string.

```css
ol {
  counter-reset: listCounter;
  padding-left: 5em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "Item #" counter(listCounter) " is: ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}
```

#### Result

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

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

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

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

See also
--------

* Using CSS Counters
* `counter-reset`
* `counter-set`
* `counter-increment`
* `@counter-style`
* CSS `counters()` function
* CSS lists and counters module
* CSS counter styles module
* CSS generated content module


border-bottom-style - CSS: Cascading Style Sheets

border-bottom-style
===================

The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.

Try it
------

**Note:** The specification doesn't define how borders of different styles connect in the corners.

Syntax
------

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

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

The `border-bottom-style` property is specified as a single `<line-style>` keyword value.

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

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

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

border-bottom-style =
  <line-style>

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

```

Examples
--------

### Demonstrating all border styles

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* Define look of the table \*/
table {
  border-width: 3px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-bottom-style example classes \*/
.b1 {
  border-bottom-style: none;
}
.b2 {
  border-bottom-style: hidden;
}
.b3 {
  border-bottom-style: dotted;
}
.b4 {
  border-bottom-style: dashed;
}
.b5 {
  border-bottom-style: solid;
}
.b6 {
  border-bottom-style: double;
}
.b7 {
  border-bottom-style: groove;
}
.b8 {
  border-bottom-style: ridge;
}
.b9 {
  border-bottom-style: inset;
}
.b10 {
  border-bottom-style: outset;
}
```

#### Result

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

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

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

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

See also
--------

* The other style-related border properties: `border-left-style`, `border-right-style`, `border-top-style`, and `border-style`.
* The other bottom-border-related properties: `border-bottom`, `border-bottom-color`, and `border-bottom-width`.


:disabled - CSS: Cascading Style Sheets

:disabled
=========

The **`:disabled`** CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

Try it
------

Syntax
------

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

Examples
--------

This example shows a basic shipping form. It uses the JavaScript `change` event to let the user enable/disable the billing fields.

### HTML

```html
<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Address" />
    <input type="text" placeholder="Zip Code" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Address" disabled />
    <input type="text" placeholder="Zip Code" disabled />
  </fieldset>
</form>
```

### CSS

```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript

```js
// Wait for the page to finish loading
document.addEventListener(
  "DOMContentLoaded",
  () => {
    // Attach `change` event listener to checkbox
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // Select the billing text fields
  const billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  billingItems.forEach((item) => {
    item.disabled = !item.disabled;
  });
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

See also
--------

* `:enabled`


Specified value - CSS: Cascading Style Sheets

Specified value
===============

The **specified value** of a CSS property is the value it receives from the document's style sheet. The specified value for a given property is determined according to the following rules:

1. If the document's style sheet explicitly specifies a value for the property, the given value will be used.
2. If the document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element.
3. If none of the above pertain, the element's initial value will be used.
Examples
--------

### HTML

```html
<p>My specified color is given explicitly in the CSS.</p>

<div>
  The specified values of all my properties default to their initial values,
  because none of them are given in the CSS.
</div>

<div class="fun">
  <p>
    The specified value of my font family is not given explicitly in the CSS, so
    it is inherited from my parent. However, the border is not an inheriting
    property.
  </p>
</div>
```

### CSS

```css
.fun {
  border: 1px dotted pink;
  font-family: fantasy;
}

p {
  color: green;
}
```

### Result

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

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

See also
--------

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


repeat() - CSS: Cascading Style Sheets

repeat()
========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`repeat()`** CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

Try it
------

This function can be used in the CSS Grid properties `grid-template-columns` and `grid-template-rows`.

Syntax
------

```css
/\* <track-repeat> values \*/
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/\* <auto-repeat> values \*/
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/\* <fixed-repeat> values \*/
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
```

The `repeat()` function takes two arguments:

* **repeat count**: the first argument specifies the number of times that the track list should be repeated. It is specified with an integer value of 1 or more, or with the keyword values `auto-fill` or `auto-fit`. These keyword values repeat the set of tracks as many times as is needed to fill the grid container.
* **tracks**: the second argument specifies the set of tracks that will be repeated. Fundamentally this consists of one or more values, where each value represents the size of that track. Each size is specified using either a `<track-size>` value or a `<fixed-size>` value. You can also specify one or more line names before or after each track, by providing `<line-names>` values before and/or after the track size.

If you use `auto-fill` or `auto-fit` to set the repeat count, you may only specify track sizes using the `<fixed-size>` type, not the `<track-size>` type. This give us three main syntax forms for `repeat()`:

* `<track-repeat>`, which uses:
    + an integer to set the repeat count
    + `<track-size>` values to set track sizes.
* `<auto-repeat>`, which uses
    + `auto-fill` or `auto-fit` to set the repeat count
    + `<fixed-size>` to set track sizes.
* `<fixed-repeat>`, which uses:
    + an integer to set the repeat count
    + `<fixed-size>` values to set track sizes.

Then if a property declaration uses `<auto-repeat>`, it is only allowed to use `<fixed-repeat>` for any additional `repeat()` calls. For example, this is invalid, because it combines the `<auto-repeat>` form with the `<track-repeat>` form:

```css
.wrapper {
  grid-template-columns:
    repeat(auto-fill, 10px)
    repeat(2, minmax(min-content, max-content));
}
```

There is a fourth form, `<name-repeat>`, which is used to add line names to subgrids. It only used with the `subgrid` keyword and only specifies line names, not track sizes.

### Values

`<fixed-size>`

One of the following forms:

* a `<length-percentage>` value
* a `minmax()` function with:
    + `min` given as a `<length-percentage>` value
    + `max` given as one of a `<length-percentage>` value, a `<flex>` value, or one of the following keywords: `min-content`, `max-content`, or `auto`
* a `minmax()` function with:
    + `min` given as a `<length-percentage>` value or one of the following keywords: `min-content`, `max-content`, or `auto`
    + `max` given as a `<length-percentage>` value.

`<flex>`

A non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

`<length>`

A positive integer length.

`<line-names>`

Zero or more `<custom-ident>` values, space-separated and enclosed in square brackets, like this: `[first header-start]`.

`<percentage>`

A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the `<percentage>` must be treated as `auto`. The user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

`<track-size>`

One of the following forms:

* a `<length-percentage>` value, a `<flex>` value, or one of the following keywords: `min-content`, `max-content`, or `auto`
* a `minmax()` function with:
    + `min` given as a `<length-percentage>` value, or one of the following keywords: `min-content`, `max-content`, or `auto`
    + `max` given as a `<length-percentage>` value, a `<flex>` value, or one of the following keywords: `min-content`, `max-content`, or `auto`
* a `fit-content()` function, passed a `<length-percentage>` value.

`auto`

As a maximum, identical to `max-content`. As a minimum it represents the largest minimum size (as specified by `min-width`/`min-height`) of the grid items occupying the grid track.

`auto-fill`

If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container. Treating each track as its maximal track sizing function (each independent value used to define `grid-template-rows` or `grid-template-columns`), if that is definite. Otherwise, as its minimum track sizing function, and taking grid-gap into account. If any number of repetitions would overflow, then the repetition is `1`. Otherwise, if the grid container has a definite minimal size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

`auto-fit`

Behaves the same as `auto-fill`, except that after placing the grid items any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed, if they're all empty.)

A collapsed track is treated as having a single fixed track sizing function of `0px`, and the gutters on either side of it collapse.

For the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g., `1px`), to avoid division by zero.

`max-content`

Represents the largest max-content contribution of the grid items occupying the grid track.

`min-content`

Represents the largest min-content contribution of the grid items occupying the grid track.

Examples
--------

### Specifying grid columns using repeat()

#### HTML

```html
<div id="container">
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>Inflexible item of 100 pixels width.</div>
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  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 Grid Layout Module Level 2 # repeat-notation |

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

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

See also
--------

* Related CSS properties: `grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Grid Layout Guide: *Grid template areas - Grid definition shorthands*


font-feature-settings - CSS: Cascading Style Sheets

font-feature-settings
=====================

The **`font-feature-settings`** CSS property controls advanced typographic features in OpenType fonts.

Try it
------

Syntax
------

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

/\* Set values for OpenType feature tags \*/
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

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

Whenever possible, Web authors should instead use the `font-variant` shorthand property or an associated longhand property such as `font-variant-ligatures`, `font-variant-caps`, `font-variant-east-asian`, `font-variant-alternates`, `font-variant-numeric` or `font-variant-position`.

These lead to more effective, predictable, understandable results than `font-feature-settings`, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature. In particular, `font-feature-settings` shouldn't be used to enable small caps.

### Values

This property is specified as either the keyword `normal` or as a comma-separated list of `<feature-tag-value>` values. When rendering text, the list of OpenType `<feature-tag-value>` values are passed to the text layout engine to enable or disable font features.

`normal`

Indicates that text is laid out using default font settings. This is the default value.

`<feature-tag-value>`

Represents a space-separated tuple consisting of a tag name and an optional value.

The tag name is always a `<string>` of four ASCII characters. If the tag name has more or fewer characters or if it contains characters outside the `U+20` – `U+7E` code point range, the descriptor is invalid.

The optional value can be a positive integer or the keyword `on` or `off`. The keywords `on` and `off` are synonyms for the values `1` and `0`, respectively. If no value is set, the default is `1`. For non-boolean OpenType features (e.g., stylistic alternates), the value implies a particular glyph to be selected; for boolean features, the value turns the feature on or off.

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

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

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

font-feature-settings =
  normal                |
  <feature-tag-value>#

<feature-tag-value> =
  <opentype-tag> [ <integer [0,∞]> | on | off ]?

<opentype-tag> =
  <string>

```

Examples
--------

### Enabling various font features

```css
/\* use small-cap alternate glyphs \*/
.smallcaps {
  font-feature-settings: "smcp" on;
}

/\* convert both upper and lowercase to small caps (affects punctuation also) \*/
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/\* use zeros with a slash through them to differentiate from "O" \*/
.nicezero {
  font-feature-settings: "zero";
}

/\* enable historical forms \*/
.hist {
  font-feature-settings: "hist";
}

/\* disable common ligatures, usually on by default \*/
.noligs {
  font-feature-settings: "liga" 0;
}

/\* enable tabular (monospaced) figures \*/
td.tabular {
  font-feature-settings: "tnum";
}

/\* enable automatic fractions \*/
.fractions {
  font-feature-settings: "frac";
}

/\* use the second available swash character \*/
.swash {
  font-feature-settings: "swsh" 2;
}

/\* enable stylistic set 7 \*/
.fancystyle {
  font-family: Gabriola;
  font-feature-settings: "ss07";
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-settings-prop |

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

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

See also
--------

* `font-display`
* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-variation-settings`
* `src`
* `unicode-range`
* OpenType feature tags list
* OpenType features in CSS


font-variant-alternates - CSS: Cascading Style Sheets

font-variant-alternates
=======================

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

Newly availableSince March 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 **`font-variant-alternates`** CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in `@font-feature-values`.

The `@font-feature-values` at-rule can be used to associate, for a given font face, a human-readable name with a numeric index that controls a particular OpenType font feature. For features that select alternative glyphs (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament` or `annotation`), the `font-variant-alternates` property can then reference the human-readable name in order to apply the associated feature.

This allows CSS rules to enable alternative glyphs without needing to know the specific index values that a particular font uses to control them.

Syntax
------

```css
/\* Keyword values \*/
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/\* Functional notation values \*/
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

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

This property may take one of two forms:

* either the keyword `normal`
* or one or more of the other keywords and functions listed below, space-separated, in any order.
### Values

`normal`

This keyword deactivates alternate glyphs.

`historical-forms`

This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value `hist`.

`stylistic()`

This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `salt`, like `salt 2`.

`styleset()`

This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ssXY`, like `ss02`.

`character-variant()`

This function enables specific stylistic alternatives for characters. It is similar to `styleset()`, but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `cvXY`, like `cv02`.

`swash()`

This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values `swsh` and `cswh`, like `swsh 2` and `cswh 2`.

`ornaments()`

This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ornm`, like `ornm 2`.

**Note:** In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice.

`annotation()`

This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `nalt`, like `nalt 2`.

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

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

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

font-variant-alternates =
  normal                                              |
  [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]

<feature-value-name> =
  <ident>

```

Examples
--------

### Enabling swash glyphs

In this example, we use the `@font-feature-values` at-rule to define a name for the `swash` feature of the MonteCarlo font. The rule maps the name `"fancy"` to the index value `1`.

We can then use that name inside `font-variant-alternates` to switch on swashes for that font. This is the equivalent of a line like `font-feature-settings: "swsh" 1`, except that the CSS applying the feature does not need to include, or even know, the index value needed for this particular font.

#### HTML

```html
<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>
```

#### CSS

```css
@font-face {
  font-family: MonteCarlo;
  src: url("montecarlo-regular.woff2");
}

@font-feature-values "MonteCarlo" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MonteCarlo";
  font-size: 3rem;
  margin: 0.7rem 3rem;
}

.variant {
  font-variant-alternates: swash(fancy);
}
```

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-alternates-prop |

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

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

See also
--------

* `font-variant`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `@font-feature-values`
* `font-feature-settings`


CSS transitions - CSS: Cascading Style Sheets

CSS transitions
===============

The **CSS transitions** module lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their easing function, duration, and other attributes.

Reference
---------

### Properties

* `transition`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
### At rules

* `@starting-style`
Guides
------

Using CSS transitions

Step-by-step tutorial about how to create transitions using CSS. This article describes each relevant CSS property and explains how they interact with each other.

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

| Specification |
| --- |
| CSS Transitions  |

See also
--------

* Related to CSS transitions, CSS animations provide finer control over animated properties.


:-moz-broken - CSS: Cascading Style Sheets

:-moz-broken
============

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

The **`:-moz-broken`** CSS pseudo-class is a Mozilla extension that matches elements representing broken image links.

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

Syntax
------

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

Examples
--------

### HTML

```html
<img src="broken.jpg" alt="This image is broken. :-(" />
```

### CSS

```css
:-moz-broken {
  background: bisque;
  padding: 8px;
}
```

### Result

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

Not part of any standard.

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

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

See also
--------

* `:-moz-loading`, `:-moz-suppressed`, `:-moz-user-disabled`
* Firefox bug 11011


<hex-color> - CSS: Cascading Style Sheets

<hex-color>
===========

The **`<hex-color>`** CSS data type is a notation for describing the *hexadecimal color syntax* of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency.

A `<hex-color>` value can be used everywhere where a `<color>` can be used.

Syntax
------
```

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax
```

### Value

`R` or `RR`

The *red* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255). If there is only one number, it is duplicated: `1` means `11`.

`G` or `GG`

The *green* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255). If there is only one number, it is duplicated: `c` means `cc`.

`B` or `BB`

The *blue* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255). If there is only one number, it is duplicated: `9` means `99`.

`A` or `AA` Optional

The *alpha* component of the color, indicating its transparency, as a case-insensitive hexadecimal number between `0` and `ff` (255). If there is only one number, it is duplicated: `e` means `ee`. `0`, or `00`, represents a fully transparent color, and `f`, or `ff`, a fully opaque one.

**Note:** The syntax is case-insensitive: `#00ff00` is the same as `#00FF00`.

Examples
--------

### Hexadecimal syntax for a fully opaque hot pink

#### HTML

```html
<span>
  #f09
  <div class="c1"></div>
</span>
<span>
  #F09
  <div class="c2"></div>
</span>
<span>
  #ff0099
  <div class="c3"></div>
</span>
<span>
  #FF0099
  <div class="c4"></div>
</span>
```

#### CSS
```

body {
  display: flex;
  justify-content: space-evenly;
}
```

```css
div {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099;
}
```

#### Result

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

| Specification |
| --- |
| CSS Color Module Level 4 # hex-notation |

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

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

See also
--------

* `<color>`: the color data type
* `rgb()`: the function allowing to set the three components of the color, as well as its transparency, using decimal values
* CSS color module


transition-behavior - CSS: Cascading Style Sheets

transition-behavior
===================

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

The **`transition-behavior`** CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.

Syntax
------

```css
/\* Keyword values \*/
transition-behavior: allow-discrete;
transition-behavior: normal;

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

### Values

`allow-discrete`

Transitions will be started on the element for discrete animated properties.

`normal`

Transitions will *not* be started on the element for discrete animated properties.

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

The `transition-behavior` property is only relevant when used in conjunction with other transition properties, notably `transition-property` and `transition-duration`, as no transition occurs if no properties are animated over a non-zero duration of time.

```css
.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}
```

The `transition-behavior` value can be included as part of a shorthand `transition` declaration. When included in the shorthand, when using or defaulting to all properties, the `allow-discrete` value has no impact on regular animatable properties. The following CSS is equivalent to the longhand declarations above:

```css
.card {
  transition: all 0.25s;
  transition: all 0.25s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}
```

In the above snippet we include the `transition` property twice. The first instance does not include the `allow-discrete` value — this provides cross-browser support, ensuring the card's other properties still transition in browsers that don't support `transition-behavior.`

### Discrete animation behavior

Discrete-animated properties generally flip between two values 50% through animating between the two.

There is an exception, however, which is when animating to or from `display: none` or `content-visibility: hidden`. In this case, the browser will flip between the two values so that the transitioned content is shown for the entire animation duration.

So for example:

* When animating `display` from `none` to `block` (or another visible `display` value), the value will flip to `block` at `0%` of the animation duration so it is visible throughout.
* When animating `display` from `block` (or another visible `display` value) to `none`, the value will flip to `none` at `100%` of the animation duration so it is visible throughout.
Formal definition
-----------------

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

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

transition-behavior =
  <transition-behavior-value>#

<transition-behavior-value> =
  normal          |
  allow-discrete

```

Examples
--------

### Transitioning a popover

In this example, a popover is animated as it transitions from hidden to shown and back again.

#### HTML

The HTML contains a `<div>` element declared as a popover using the popover attribute, and a `<button>` element designated as the popover's display control using its popovertarget attribute.

```html
<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>
```

#### CSS
```

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

[popover] {
  font-size: 1.2rem;
  padding: 10px;
}
```

```css
[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  /\* Final state of the exit animation \*/
  opacity: 0;
  transform: scaleX(0);

  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
  /\* Using the shorthand transition property, we could write:
 transition:
 opacity 0.7s,
 transform 0.7s,
 overlay 0.7s allow-discrete,
 display 0.7s allow-discrete;

 or even:
 transition: all 0.7s allow-discrete;
 \*/
}

/\* Needs to be included after the previous [popover]:popover-open
 rule to take effect, as the specificity is the same \*/
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}
```

The two properties we want to animate are `opacity` and `transform`: we want the popover to fade in and out while growing and shrinking in the horizontal direction. We set a starting state for these properties on the default hidden state of the popover element (selected via `[popover]`), and an end state on the open state of the popover (selected via the `:popover-open` pseudo-class). We then set a `transition` property to animate between the two.

Because the animated element is being promoted to the top layer when shown and removed from the top layer when hidden — which also means that its hidden state has `display: none` set on it — the following properties are added to the list of transitioned elements to get the animation working in both directions. In both cases, `transition-behavior: allow-discrete` is set in the shorthand to enable discrete animation.

* `display`: Required so that the animated element is visible (set to `display: block`) throughout both the entry and exit animation. Without this, the exit animation would not be visible; in effect, the popover would just disappear.
* `overlay`: Required to make sure that the removal of the element from the top layer is deferred until the animation has been completed. This doesn't make a huge difference for simple animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective.

In addition, a starting state for the animation is set inside the `@starting-style` at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type. `@starting-style` allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear.

#### Result

The code renders as follows:

**Note:** Because popovers change from `display: none` to `display: block` each time they are shown, the popover transitions from its `@starting-style` styles to its `[popover]:popover-open` styles every time the entry transition occurs. When the popover closes, it transitions from its `[popover]:popover-open` state to the default `[popover]` state.

It is possible for the style transition on entry and exit to be different in such cases. See our Demonstration of when starting styles are used example for a proof of this.

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

| Specification |
| --- |
| CSS Transitions Level 2 # transition-behavior-property |

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

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

See also
--------

* `overlay`
* `@starting-style`
* CSS transitions module
* Four new CSS features for smooth entry and exit animations on developer.chrome.com (2023)


:right - CSS: Cascading Style Sheets

:right
======

The **`:right`** CSS pseudo-class, used with the `@page` at-rule, represents all right-hand pages of a printed document.

```css
/\* Selects any right-hand pages when printing \*/
@page :right {
  margin: 2in 3in;
}
```

Whether a given page is "left" or "right" is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a `:right` page; if it has a major writing direction of right-to-left then it will be a `:left` page.

**Note:** This pseudo-class can be used to change only the `margin`, `padding`, `border`, and `background` properties of the *page box*. All other properties will be ignored, and only the page box, not the document content on the page, will be affected.

Syntax
------

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

Examples
--------

### Setting margins for right-hand pages

```css
@page :right {
  margin: 2in 3in;
}
```

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

See also
--------

* `@page`
* Other page-related pseudo-classes: `:first`, `:left`


::after - CSS: Cascading Style Sheets

::after
=======

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

Try it
------

**Note:** The pseudo-elements generated by `::before` and `::after` are contained by the element's formatting box, and thus don't apply to *replaced elements* such as `<img>`, or to `<br>` elements.

Syntax
------

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

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

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

Examples
--------

### Simple usage

Let's create two classes: one for boring paragraphs and one for exciting ones. We can use these classes to add pseudo-elements to the end of paragraphs.

#### HTML

```html
<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>
```

#### CSS

```css
.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}
```

#### Result

### Decorative example

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

#### HTML

```html
<span class="ribbon">Look at the orange box after this text. </span>
```

#### CSS

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

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

#### Result

### Tooltips

This example uses `::after`, in conjunction with the `attr()` CSS expression and a `data-descr` custom data attribute, to create tooltips. No JavaScript is required!

We can also support keyboard users with this technique, by adding a `tabindex` of `0` to make each `span` keyboard focusable, and using a CSS `:focus` selector. This shows how flexible `::before` and `::after` can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate.

#### HTML

```html
<p>
  Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation">
    text
  </span>
  with a few
  <span tabindex="0" data-descr="small popups that appear when hovering">
    tooltips</span
 >.
</p>
```

#### CSS

```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```

#### Result

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

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

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

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

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

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

See also
--------

* `::before`
* `content`


border-block-end - CSS: Cascading Style Sheets

border-block-end
================

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

Try it
------

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

This property is a shorthand for the following CSS properties:

* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
Syntax
------

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

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

`border-block-end` can be used to set the values for one or more of `border-block-end-width`, `border-block-end-style`, and `border-block-end-color`. The physical border to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top`, `border-right`, `border-bottom`, or `border-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

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

### Values

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

`<'border-width'>`

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

`<'border-style'>`

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

`<color>`

The color of the border.

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

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

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

border-block-end =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

Examples
--------

### Border with vertical text

#### HTML

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

#### CSS

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

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

#### Results

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

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

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

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

See also
--------

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


CSS paged media - CSS: Cascading Style Sheets

CSS paged media
===============

The **CSS paged media** module defines the properties that control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements.

Reference
---------

### Properties

* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
### At-rules

* `@page`
### Pseudo-classes

* `:blank`
* `:first`
* `:left`
* `:right`
Specifications
--------------

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |

See also
--------

* Printing guide
* CSS media queries module


text-align - CSS: Cascading Style Sheets

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

The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;

/\* Block alignment values (Non-standard syntax) \*/
text-align: -moz-center;
text-align: -webkit-center;

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

The `text-align` property is specified in one of the following ways:

* Using the keyword values `start`, `end`, `left`, `right`, `center`, `justify`, `justify-all`, or `match-parent`.
* Using a `<string>` value only, in which case the other value defaults to `right`.
* Using both a keyword value and a `<string>` value.
### Values

`start`

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

`end`

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

`left`

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

`right`

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

`center`

The inline contents are centered within the line box.

`justify`

The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

`justify-all`
Experimental

Same as `justify`, but also forces the last line to be justified.

`match-parent`

Similar to `inherit`, but the values `start` and `end` are calculated according to the parent's `direction` and are replaced by the appropriate `left` or `right` value.

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

The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `start`, or a nameless value that acts as `left` if `direction` is `ltr`, `right` if `direction` is `rtl` if `start` is not supported by the browser. |
| Applies to | block containers |
| Inherited | yes |
| Computed value | as specified, except for the `match-parent` value which is calculated against its parent's `direction` value and results in a computed value of either `left` or `right` |
| Animation type | discrete |

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

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

```

Examples
--------

### Start alignment

#### HTML

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

#### CSS

```css
.example {
  text-align: start;
  border: solid;
}
```

#### Result

### Centered text

#### HTML

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

#### CSS

```css
.example {
  text-align: center;
  border: solid;
}
```

#### Result

### Example using "justify"

#### HTML

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

#### CSS

```css
.example {
  text-align: justify;
  border: solid;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # text-align |
| CSS Text Module Level 3 # text-align-property |

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

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

See also
--------

* `margin: auto`, `margin-left: auto`, `vertical-align`