column-rule-width - CSS: Cascading Style Sheets

column-rule-width
=================

The **`column-rule-width`** CSS property sets the width of the line drawn between columns in a multi-column layout.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/\* <length> values \*/
column-rule-width: 1px;
column-rule-width: 2.5em;

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

The `column-rule-width` property is specified as a single `<'border-width'>` value.

### Values

`<'border-width'>`

Is a keyword defined by `border-width` describing the width of the rule. It may be either a `<length>` or one of the `thin`, `medium`, or `thick` keywords.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | multicol elements |
| Inherited | no |
| Computed value | the absolute length; `0` if the `column-rule-style` is `none` or `hidden` |
| Animation type | a length |

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

column-rule-width =
  <line-width>

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

```

Examples
--------

### Setting a thick column rule

#### HTML

```html
<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>
```

#### CSS

```css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thick;
}
```

#### Result

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

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

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

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

See also
--------

* Multiple-column Layout
* `column-rule-style`
* `column-rule-color`
* `column-rule`


:local-link - CSS: Cascading Style Sheets

:local-link
===========

The **`:local-link`** CSS pseudo-class represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target's absolute URL matches the element's own document URL.

```css
/\* Selects any <a> that links to the current document \*/
a:local-link {
  color: green;
}
```

Syntax
------

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

Examples
--------

### HTML

```html
<a href="#target">This is a link on the current page.</a><br />
<a href="https://example.com">This is an external link</a><br />
```

### CSS

```css
a:local-link {
  color: green;
}
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # local-link-pseudo |

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

This feature is a proposal integrated into the specification. Currently, no browser supports it.

See also
--------

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


block-size - CSS: Cascading Style Sheets

block-size
==========

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

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

Try it
------

Syntax
------

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

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

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

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

### Values

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

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

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

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

block-size =
  <'width'>

```

Examples
--------

### Block size with vertical text

#### HTML

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

#### CSS

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

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

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


font-variant-emoji - CSS: Cascading Style Sheets

font-variant-emoji
==================

The **`font-variant-emoji`** CSS property specifies the default presentation style for displaying emojis.

Traditionally, this was done by appending a *Variation Selector*, `U+FE0E` for text and `U+FE0F` for emoji, to the emoji code point. Only emojis listed as contributing to a Unicode emoji presentation sequence are affected by this property.

Syntax
------

```css
/\* Keyword values \*/
font-variant-emoji: normal;
font-variant-emoji: text;
font-variant-emoji: emoji;
font-variant-emoji: unicode;

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

The `font-variant-emoji` property is specified using a single keyword value from the list below.

### Values

`normal`

Allows a browser to choose how to display the emoji. This often follows the operating system setting.

`text`

Renders the emoji as if it were using the unicode text variation selector (`U+FE0E`).

`emoji`

Renders the emoji as if it were using the unicode emoji variation selector (`U+FE0F`).

`unicode`

Renders the emoji in accordance with the Emoji presentation properties. If the `U+FE0E` or `U+FE0F` variation selector is present, then it will override this value setting.

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-emoji =
  normal   |
  text     |
  emoji    |
  unicode

```

Examples
--------

### Changing the way an emoji is displayed

This example shows how you can render an emoji in its `text` or `emoji` presentation.

#### HTML
```

<p class="nosupport">
  Your Browser does not support <code>font-variant-emoji</code>. This image
  shows how it is rendered with support.
</p>
<img
 class="nosupport"
 src="./font-variant-emoji-example.jpg"
 alt="a telephone emoji show as text, black and white next to a telephone emoji shown as emoji full color and graphical representation" />
```

```html
<section class="emojis">
  <div class="emoji">
    <h2>text presentation</h2>
    <div class="text-presentation">☎</div>
  </div>
  <div class="emoji">
    <h2>emoji presentation</h2>
    <div class="emoji-presentation">☎</div>
  </div>
</section>
```

#### CSS
```

@supports (font-variant-emoji: emoji) {
  .nosupport {
    display: none;
  }
  .emojis {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .emoji > div {
    font-size: 2rem;
  }
}

@supports not (font-variant-emoji: emoji) {
  .emojis {
    display: none;
  }
}
```

```css
.text-presentation {
  font-variant-emoji: text;
}

.emoji-presentation {
  font-variant-emoji: emoji;
}
```

#### Result

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

While the use of emojis may seem fun, you should consider their impact on accessibility, specifically for users with visual and cognitive impairments. Consider the following factors while using emojis:

* Display on screen-readers: Screen-readers will read out the alt text of an emoji. Keep this in mind to consider the position of an emoji in the content. Repeated and overuse of emojis will have a detrimental effect on screen-reader users. It is better to use emojis than emoticons; emoticons will be read out as punctuation characters.
* Contrast with background: When using emojis, consider their colors and how that will work with the background color, especially if you have background colors that can change, such as light/dark modes.
* Intent of use: Do not use emojis to replace words because your understanding of the emoji meaning may differ from that of the users'. Also consider that emojis might have different meanings in different cultures and geographies. Our recommendation is to preferably limit usage to commonly known emojis.
Specifications
--------------

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

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

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

See also
--------

* font-variant
* font-variant-alternates
* font-variant-caps
* font-variant-east-asian
* font-variant-ligatures
* font-variant-numeric
* Emojis and accessibility: How to use them properly


Pseudo-classes - CSS: Cascading Style Sheets

Pseudo-classes
==============

A CSS ***pseudo-class*** is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class `:hover` can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

```css
/\* Any button over which the user's pointer is hovering \*/
button:hover {
  color: blue;
}
```

A pseudo-class consists of a colon (`:`) followed by the pseudo-class name (e.g., `:hover`). A functional pseudo-class also contains a pair of parentheses to define the arguments (e.g., `:dir()`). The element that a pseudo-class is attached to is defined as an *anchor element* (e.g., `button` in case `button:hover`).

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (`:visited`, for example), the status of its content (like `:checked` on certain form elements), or the position of the mouse (like `:hover`, which lets you know if the mouse is over an element or not).

**Note:** In contrast to pseudo-classes, pseudo-elements can be used to style a *specific part* of an element.

Element display state pseudo-classes
------------------------------------

These pseudo-classes enable the selection of elements based on their display states.

`:fullscreen`

Matches an element that is currently in fullscreen mode.

`:modal`

Matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.

`:picture-in-picture`

Matches an element that is currently in picture-in-picture mode.

Input pseudo-classes
--------------------

These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.

`:autofill`

Matches when an `<input>` has been autofilled by the browser.

`:enabled`

Represents a user interface element that is in an enabled state.

`:disabled`

Represents a user interface element that is in a disabled state.

`:read-only`

Represents any element that cannot be changed by the user.

`:read-write`

Represents any element that is user-editable.

`:placeholder-shown`

Matches an input element that is displaying placeholder text. For example, it will match the `placeholder` attribute in the `<input>` and `<textarea>` elements.

`:default`

Matches one or more UI elements that are the default among a set of elements.

`:checked`

Matches when elements such as checkboxes and radio buttons are toggled on.

`:indeterminate`

Matches UI elements when they are in an indeterminate state.

`:blank`

Matches a user-input element which is empty, containing an empty string or other null input.

`:valid`

Matches an element with valid contents. For example, an input element with the type 'email' that contains a validly formed email address or an empty value if the control is not required.

`:invalid`

Matches an element with invalid contents. For example, an input element with type 'email' with a name entered.

`:in-range`

Applies to elements with range limitations. For example, a slider control when the selected value is in the allowed range.

`:out-of-range`

Applies to elements with range limitations. For example, a slider control when the selected value is outside the allowed range.

`:required`

Matches when a form element is required.

`:optional`

Matches when a form element is optional.

`:user-valid`

Represents an element with correct input, but only when the user has interacted with it.

`:user-invalid`

Represents an element with incorrect input, but only when the user has interacted with it.

Linguistic pseudo-classes
-------------------------

These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction.

`:dir()`

The directionality pseudo-class selects an element based on its directionality as determined by the document language.

`:lang()`

Select an element based on its content language.

Location pseudo-classes
-----------------------

These pseudo-classes relate to links, and to targeted elements within the current document.

`:any-link`

Matches an element if the element would match either `:link` or `:visited`.

`:link`

Matches links that have not yet been visited.

`:visited`

Matches links that have been visited.

`:local-link`

Matches links whose absolute URL is the same as the target URL. For example, anchor links to the same page.

`:target`

Matches the element which is the target of the document URL.

`:target-within`

Matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.

`:scope`

Represents elements that are a reference point for selectors to match against.

Resource state pseudo-classes
-----------------------------

These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.

`:playing`

Represents a media element that is capable of playing when that element is playing.

`:paused`

Represents a media element that is capable of playing when that element is paused.

Time-dimensional pseudo-classes
-------------------------------

These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.

`:current`

Represents the element or ancestor of the element that is being displayed.

`:past`

Represents an element that occurs entirely before the `:current` element.

`:future`

Represents an element that occurs entirely after the `:current` element.

Tree-structural pseudo-classes
------------------------------

These pseudo-classes relate to the location of an element within the document tree.

`:root`

Represents an element that is the root of the document. In HTML this is usually the `<html>` element.

`:empty`

Represents an element with no children other than white-space characters.

`:nth-child`

Uses `An+B` notation to select elements from a list of sibling elements.

`:nth-last-child`

Uses `An+B` notation to select elements from a list of sibling elements, counting backwards from the end of the list.

`:first-child`

Matches an element that is the first of its siblings.

`:last-child`

Matches an element that is the last of its siblings.

`:only-child`

Matches an element that has no siblings. For example, a list item with no other list items in that list.

`:nth-of-type`

Uses `An+B` notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.

`:nth-last-of-type`

Uses `An+B` notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.

`:first-of-type`

Matches an element that is the first of its siblings, and also matches a certain type selector.

`:last-of-type`

Matches an element that is the last of its siblings, and also matches a certain type selector.

`:only-of-type`

Matches an element that has no siblings of the chosen type selector.

User action pseudo-classes
--------------------------

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

`:hover`

Matches when a user designates an item with a pointing device, such as holding the mouse pointer over the item.

`:active`

Matches when an item is being activated by the user. For example, when the item is clicked on.

`:focus`

Matches when an element has focus.

`:focus-visible`

Matches when an element has focus and the user agent identifies that the element should be visibly focused.

`:focus-within`

Matches an element to which `:focus` applies, plus any element that has a descendant to which `:focus` applies.

Functional pseudo-classes
-------------------------

These pseudo-classes accept a selector list or forgiving selector list as a parameter.

`:is()`

The matches-any pseudo-class matches any element that matches any of the selectors in the list provided. The list is forgiving.

`:not()`

The negation, or matches-none, pseudo-class represents any element that is not represented by its argument.

`:where()`

The specificity-adjustment pseudo-class matches any element that matches any of the selectors in the list provided without adding any specificity weight. The list is forgiving.

`:has()`

The relational pseudo-class represents an element if any of the relative selectors match when anchored against the attached element.

Syntax
------

```css
selector:pseudo-class {
  property: value;
}
```

Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

Alphabetical index
------------------

Pseudo-classes defined by a set of CSS specifications include the following:

A

* `:active`
* `:any-link`
* `:autofill`

B

* `:blank`
Experimental

C

* `:checked`
* `:current`
Experimental

D

* `:default`
* `:defined`
* `:dir()`
Experimental
* `:disabled`

E

* `:empty`
* `:enabled`

F

* `:first`
* `:first-child`
* `:first-of-type`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `:fullscreen`
* `:future`
Experimental

H

* `:has()`
Experimental
* `:host`
* `:host()`
* `:host-context()`
Experimental
* `:hover`

I

* `:indeterminate`
* `:in-range`
* `:invalid`
* `:is()`

L

* `:lang()`
* `:last-child`
* `:last-of-type`
* `:left`
* `:link`
* `:local-link`
Experimental

M

* `:modal`

N

* `:not()`
* `:nth-child()`
* `:nth-last-child()`
* `:nth-last-of-type()`
* `:nth-of-type()`

O

* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`

P

* `:past`
Experimental
* `:paused`
* `:picture-in-picture`
* `:placeholder-shown`
* `:playing`

R

* `:read-only`
* `:read-write`
* `:required`
* `:right`
* `:root`

S

* `:scope`
* `:state()`
Experimental

T

* `:target`
* `:target-within`
Experimental

U

* `:user-invalid`
Experimental

V

* `:valid`
* `:visited`

W

* `:where()`
Specifications
--------------

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

See also
--------

* Pseudo-elements


CSS ruby layout - CSS: Cascading Style Sheets

CSS ruby layout
===============

The **CSS ruby layout** module provides the rendering model and formatting controls related to the display of ruby annotation. Ruby annotation is a form of interlinear annotation, consisting of short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation.

Reference
---------

### Properties

* `ruby-align`
* `ruby-position`
Specifications
--------------

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

See Also
--------

* `<ruby>`


:host() - CSS: Cascading Style Sheets

:host()
=======

The **`:host()`** CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host. **`:host()`** has no effect when used outside a shadow DOM.

The most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of `:host-context()`.

**Note:** While other functional pseudo-classes such as `:is()` and `:not()` accept a list of selectors as their parameters, `:host()` takes a single compound selector as its parameter. In addition, while `:is()` and `:not()` only take into account the specificity of their argument, the specificity of `:host()` is both the specificity of the pseudo-class **and** the specificity of its argument.

Try it
------

```css
/\* Selects a shadow root host, only if it is
 matched by the selector argument \*/
:host(.special-custom-element) {
  font-weight: bold;
}
```

Syntax
------

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

Examples
--------

### Selectively styling shadow hosts

The following snippets are taken from our host-selectors example (see it live also).

In this example we have a simple custom element — `<context-span>` — that you can wrap around text:

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

Inside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:

```js
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

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

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
```

The `:host(.footer) { color : red; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document that have the `footer` class set on them — we've used it to give instances of the element inside the `<footer>` a special color.

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

See also
--------

* Web components
* `:host`
* `:host-context()`


text-indent - CSS: Cascading Style Sheets

text-indent
===========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`text-indent`** CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

Try it
------

Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.

Syntax
------

```css
/\* <length> values \*/
text-indent: 3mm;
text-indent: 40px;

/\* <percentage> value
 relative to the containing block width \*/
text-indent: 15%;

/\* Keyword values \*/
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

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

### Values

`<length>`

Indentation is specified as an absolute `<length>`. Negative values are allowed. See `<length>` values for possible units.

`<percentage>`

Indentation is a `<percentage>` of the containing block's width.

`each-line`

Indentation affects the first line of the block container as well as each line after a *forced line break*, but does not affect lines after a *soft wrap break*.

`hanging`

Inverts which lines are indented. All lines *except* the first line will be indented.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | block containers |
| Inherited | yes |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length, plus any keywords as specified |
| Animation type | a length, percentage or calc(); |

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

text-indent =
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?

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

```

Examples
--------

### Simple indent

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
```

#### CSS

```css
p {
  text-indent: 5em;
  background: powderblue;
}
```

#### Result

### Skipping indentation on the first paragraph

A common typographic practice when paragraph indentation is present is to skip the indentation for the first paragraph. As the *The Chicago Manual of Style* puts it, "the first line of text following a subhead may begin flush left or be indented by the usual paragraph indention."

Treating first paragraphs differently from subsequent paragraphs can be done using the next-sibling combinator, as in the following example:

#### HTML

```html
<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>
```

#### CSS

```css
p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}
```

#### Result

### Percentage indent

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
```

#### CSS

```css
p {
  text-indent: 30%;
  background: plum;
}
```

#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-indent-property |

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

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

See also
--------

* Learn to style HTML using CSS
* Related CSS properties:
    + `text-justify`
    + `text-orientation`
    + `text-overflow`
    + `text-rendering`
    + `text-transform`
    + `hanging-punctuation`
* CSS Text Decoration CSS module
* CSS Text module


view-transition-name - CSS: Cascading Style Sheets

view-transition-name
====================

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

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

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

The **`view-transition-name`** CSS property provides the selected element with a distinct identifying name (a `<custom-ident>`) and causes it to participate in a separate view transition from the root view transition — or no view transition if the `none` value is specified.

Syntax
------

```css
/\* <custom-ident> value examples \*/
view-transition-name: header;
view-transition-name: figure-caption;

/\* Keyword value \*/
view-transition-name: none;
```

### Values

`<custom-ident>`

A distinct identifying name that causes the selected element to participate in a separate view transition from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, `ViewTransition.ready` will reject and the transition will be skipped.

`none`

The selected element will not participate in a view transition.

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

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

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

view-transition-name =
  none            |
  auto            |
  <custom-ident>

```

Examples
--------

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

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

| Specification |
| --- |
| CSS View Transitions Module Level 1 # view-transition-name-prop |

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

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

See also
--------

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


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

::-webkit-progress-bar
======================

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

The **`::-webkit-progress-bar`** CSS pseudo-element represents the entire bar of a `<progress>` element. Normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the `::-webkit-progress-value` pseudo-element. It is a child of the `::-webkit-progress-inner-element` pseudo-element and the parent of the `::-webkit-progress-value` pseudo-element.

**Note:** For `::-webkit-progress-value` to take effect, `appearance` needs to be set to `none` on the `<progress>` element.

Syntax
------

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

Examples
--------

### CSS

```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}
```

### HTML

```html
<progress value="10" max="50"></progress>
```

### Result

### Result screenshot

The code above results in a progress bar that looks like this when using a WebKit or Blink browser:

![The progress bar is a horizontal bar about the height of a letter. The left 20% is green. The right 80% is orange.](/en-US/docs/Web/CSS/::-webkit-progress-bar/progress-bar.png)

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

* The pseudo-elements used by WebKit/Blink to style other parts of a `<progress>` element:
    + `::-webkit-progress-value`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`


font-variant - CSS: Cascading Style Sheets

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

The **`font-variant`** CSS shorthand property allows you to set all the font variants for a font.

You can also set the `<font-variant-css2>` values of `font-variant` defined in CSS Level 2.1, (that is, `normal` or `small-caps`), by using the `font` shorthand.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
Syntax
------

```css
font-variant: small-caps;
font-variant: common-ligatures small-caps;

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

### Values

`normal`

Specifies a normal font face. Each longhand property has an initial value of `normal`.

`none`

Sets the value of the `font-variant-ligatures` as `none` and the values of the other longhand properties as `normal`, their initial value.

`<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>`

Specifies the keywords related to the `font-variant-ligatures` longhand property. The possible values are `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual`, and `no-contextual`.

`stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`

Specifies the keywords and functions related to the `font-variant-ligatures` longhand property.

`small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`

Specifies the keywords and functions related to the `font-variant-caps` longhand property. The `small-caps` value is the only non-`normal` font variant valid within the `font` shorthand property.

`<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero`

Specifies the keywords related to the `font-variant-numeric` longhand property. The possible values are `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, and `slashed-zero`.

`<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby`

Specifies the keywords related to the `font-variant-east-asian` longhand property. The possible values are `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, and `ruby`.

`sub`, `super`

Specifies the keywords and functions related to the `font-variant-position` longhand property.

`text`, `emoji`, `unicode`

Specifies the keywords and functions related to the `font-variant-emoji` longhand property.

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 =
  normal                                              |
  none                                                |
  [ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ 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> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]

<common-lig-values> =
  common-ligatures     |
  no-common-ligatures

<discretionary-lig-values> =
  discretionary-ligatures     |
  no-discretionary-ligatures

<historical-lig-values> =
  historical-ligatures     |
  no-historical-ligatures

<contextual-alt-values> =
  contextual     |
  no-contextual

<feature-value-name> =
  <ident>

<numeric-figure-values> =
  lining-nums    |
  oldstyle-nums

<numeric-spacing-values> =
  proportional-nums  |
  tabular-nums

<numeric-fraction-values> =
  diagonal-fractions  |
  stacked-fractions

<east-asian-variant-values> =
  jis78        |
  jis83        |
  jis90        |
  jis04        |
  simplified   |
  traditional

<east-asian-width-values> =
  full-width          |
  proportional-width

```

Examples
--------

### Setting the small-caps font variant

#### HTML

```html
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>
```

#### CSS

```css
p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}
```

#### Result

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

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

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

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

See also
--------

* `text-transform`
* `text-combine-upright`
* `text-orientation`


pointer-events - CSS: Cascading Style Sheets

pointer-events
==============

The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /\* SVG only \*/
pointer-events: visibleFill; /\* SVG only \*/
pointer-events: visibleStroke; /\* SVG only \*/
pointer-events: visible; /\* SVG only \*/
pointer-events: painted; /\* SVG only \*/
pointer-events: fill; /\* SVG only \*/
pointer-events: stroke; /\* SVG only \*/
pointer-events: all; /\* SVG only \*/

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

The `pointer-events` property is specified as a single keyword chosen from the list of values below.

### Values

`auto`

The element behaves as it would if the `pointer-events` property were not specified. In SVG content, this value and the value `visiblePainted` have the same effect.

`none`

The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have `pointer-events` set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

#### SVG only (experimental for HTML)

`visiblePainted`

SVG only (experimental for HTML). The element can only be the target of a pointer event when the `visibility` property is set to `visible` and e.g. when a mouse cursor is over the interior (i.e., 'fill') of the element and the `fill` property is set to a value other than `none`, or when a mouse cursor is over the perimeter (i.e., 'stroke') of the element and the `stroke` property is set to a value other than `none`.

`visibleFill`

SVG only. The element can only be the target of a pointer event when the `visibility` property is set to `visible` and when e.g. a mouse cursor is over the interior (i.e., fill) of the element. The value of the `fill` property does not affect event processing.

`visibleStroke`

SVG only. The element can only be the target of a pointer event when the `visibility` property is set to `visible` and e.g. when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the `stroke` property does not affect event processing.

`visible`

SVG only (experimental for HTML). The element can be the target of a pointer event when the `visibility` property is set to `visible` and e.g. the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the `fill` and `stroke` do not affect event processing.

`painted`

SVG only (experimental for HTML). The element can only be the target of a pointer event when e.g. the mouse cursor is over the interior (i.e., 'fill') of the element and the `fill` property is set to a value other than `none`, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the `stroke` property is set to a value other than `none`. The value of the `visibility` property does not affect event processing.

`fill`

SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. The values of the `fill` and `visibility` properties do not affect event processing.

`stroke`

SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the `stroke` and `visibility` properties do not affect event processing.

`all`

SVG only (experimental for HTML). The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the `fill`, `stroke`, and `visibility` properties do not affect event processing.

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

When this property is unspecified, the same characteristics of the `visiblePainted` value apply to SVG content.

In addition to indicating that the element is not the target of pointer events, the value `none` instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.

Note that preventing an element from being the target of pointer events by using `pointer-events` does *not* necessarily mean that pointer event listeners on that element *cannot* or *will not* be triggered. If one of the element's children has `pointer-events` explicitly set to *allow* that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

Elements with `pointer-events: none` will still receive focus through sequential keyboard navigation using the `Tab` key.

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

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

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

pointer-events =
  auto            |
  bounding-box    |
  visiblePainted  |
  visibleFill     |
  visibleStroke   |
  visible         |
  painted         |
  fill            |
  stroke          |
  all             |
  none

```

Examples
--------

### Disabling pointer events on all images

This example disables pointer events (clicking, dragging, hovering, etc.) on all images.

```css
img {
  pointer-events: none;
}
```

### Disabling pointer events on a single link

This example disables pointer events on the link to `http://example.com`.

#### HTML

```html
<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
```

#### CSS

```css
a[href="http://example.com"]
{
  pointer-events: none;
}
```

#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # pointer-events-control |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |

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

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

See also
--------

* The SVG attribute `pointer-events`
* The SVG attribute `visibility`
* WebKit Specs PointerEventsProperty extended for use in (X)HTML content
* `user-select` - controls whether the user can select text


<absolute-size> - CSS: Cascading Style Sheets

<absolute-size>
===============

The **`<absolute-size>`** CSS data type describes the absolute size keywords. This data type is used in the `font` shorthand and `font-size` properties.

The font size keywords are mapped to the deprecated HTML `size` attribute. See the HTML size attribute section below).

Syntax
------
```

<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
```

### Values

The `<absolute-size>` data type is defined using a keyword value chosen from the list below.

`xx-small`

An absolute size 60% the size of `medium`. Mapped to the deprecated `size="1"`.

`x-small`

An absolute size 75% the size of `medium`.

`small`

An absolute size 89% the size of `medium`. Mapped to the deprecated `size="2"`.

`medium`

A user's preferred font size. This value is used as the reference middle value. Mapped to `size="3"`.

`large`

An absolute size 20% larger than `medium`. Mapped to the deprecated `size="4"`.

`x-large`

An absolute size 50% larger than `medium`. Mapped to the deprecated `size="5"`.

`xx-large`

An absolute size twice the size of `medium`. Mapped to the deprecated `size="6"`.

`xxx-large`

An absolute size three times the size of `medium`. Mapped to the deprecated `size="7"`.

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

Each `<absolute-size>` keyword value is sized relative to the `medium` size and the individual device's characteristics, such as device resolution. User agents maintain a table of font sizes for each font, with the `<absolute-size>` keywords being the index.

In CSS1 (1996), the scaling factor between adjacent keyword value indexes was 1.5, which was too large. In CSS2 (1998), the scaling factor between adjacent keyword value indexes was 1.2, which created issues for the small values. As a single fixed ratio between adjacent absolute-size keywords was found to be problematic, there is no longer a fixed ratio recommendation. The only recommendation to preserve readability is that the smallest font size should not be less than `9px`.

For each `<absolute-size>` keyword value, the following table lists the scaling factor, mapping to `<h1>` to `<h6>` headings, and mapping to the deprecated HTML `size` attribute.

| `<absolute-size>` | xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| scaling factor | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML headings | h6 |  | h5 | h4 | h3 | h2 | h1 |  |
| HTML `size` attribute | 1 |  | 2 | 3 | 4 | 5 | 6 | 7 |

### HTML size attribute

The `size` attribute to set a font's size in HTML is deprecated. The attribute value was either an integer between `1` and `7` or a relative value. Relative values were an integer preceded by `+` or `-` to increase or decrease the font size, respectively. A value of `+1` meant increasing the `size` by one and `-2` meant decreasing the size by two, with the computed value clamped at a minimum of `1` and a maximum computed value of `7`.

Examples
--------

### Comparing the keyword values

```html
<ul>
  <li class="xx-small">font-size: xx-small;</li>
  <li class="x-small">font-size: x-small;</li>
  <li class="small">font-size: small;</li>
  <li class="medium">font-size: medium;</li>
  <li class="large">font-size: large;</li>
  <li class="x-large">font-size: x-large;</li>
  <li class="xx-large">font-size: xx-large;</li>
  <li class="xxx-large">font-size: xxx-large;</li>
</ul>
```

```css
li {
  margin-bottom: 0.3em;
}
.xx-small {
  font-size: xx-small;
}
.x-small {
  font-size: x-small;
}
.small {
  font-size: small;
}
.medium {
  font-size: medium;
}
.large {
  font-size: large;
}
.x-large {
  font-size: x-large;
}
.xx-large {
  font-size: xx-large;
}
.xxx-large {
  font-size: xxx-large;
}
```

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # valdef-font-size-absolute-size |

See also
--------

* CSS `<relative-size>` data type
* CSS `font` and `font-size` properties
* CSS fonts module


view-timeline-axis - CSS: Cascading Style Sheets

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

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

The **`view-timeline-axis`** CSS property is used to specify the scrollbar direction that will be used to provide the timeline for a *named view progress timeline* animation, which is progressed through based on the change in visibility of an element (known as the *subject*) inside a scrollable element (*scroller*). `view-timeline-axis` is set on the subject. See CSS scroll-driven animations for more details.

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

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

Syntax
------

```css
/\* Logical property values \*/
view-timeline-axis: block;
view-timeline-axis: inline;
/\* Non-logical property values \*/
view-timeline-axis: y;
view-timeline-axis: x;
```

### Values

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

`block`

The scrollbar on the block axis of the scroller element, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `y`, while for vertical writing modes, it is the same as `x`. This is the default value.

`inline`

The scrollbar on the inline axis of the scroller element, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as `x`, while for vertical writing modes, this is the same as `y`.

`y`

The scrollbar on the vertical axis of the scroller element.

`x`

The scrollbar on the horizontal axis of the scroller element.

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

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

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

view-timeline-axis =
  [ block | inline | x | y ]#

```

Examples
--------

### Defining the axis of the view progress timeline

In this example, a view progress timeline named `--subjectReveal` is defined using the `view-timeline-name` property on a subject element with a class of "animation". This timeline is then applied to the animation on the same element, using `animation-timeline: --subjectReveal;`.

To demonstrate the effect of `view-timeline-axis`, a horizontal (non-default) scrollbar is used in this example to drive the animation.

#### HTML

The HTML for the example is shown below.

```html
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>

  <p>
    Risus quis varius quam quisque id. Et ligula ullamcorper malesuada proin
    libero nunc consequat interdum varius. Elit ullamcorper dignissim cras
    tincidunt lobortis feugiat vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras.
  </p>

  <p>
    A erat nam at lectus urna duis convallis convallis. Nibh ipsum consequat
    nisl vel pretium lectus.
  </p>

  <p>
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris.
  </p>
</div>
```

#### CSS

 In the CSS, we set the `subject` element as the source of a view progress timeline named `--subjectReveal` using the `view-timeline-name` property.
 The scroll axis is set using `view-timeline-axis: x;` (Chromium) and `view-timeline-axis: horizontal;` (Firefox) — this causes the *horizontal scrollbar* position of the scrolling ancestor element to determine the animation timeline.

The `content` ancestor element is made to overflow horizontally by laying out its contents using `display: flex;` and `flex-flow: column wrap;`.

Also worth noting is that the subject element has an `animation-duration` applied to it so that the example will work in Firefox.

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 50%;
  height: 400px;
  margin-top: 30px;
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
}

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

p {
  font-size: 1.3rem;
  line-height: 1.4;
}

.animation {
  view-timeline-name: --subjectReveal;
  /\* Chromium supports the new x/y syntax \*/
  view-timeline-axis: x;
  /\* Firefox still supports the old horizontal/vertical syntax \*/
  view-timeline-axis: horizontal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-timeline: --subjectReveal;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}
```

#### Result

Scroll the horizontal bar at the bottom to see the subject element animate as you scroll.

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

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

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

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

See also
--------

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


offset-rotate - CSS: Cascading Style Sheets

offset-rotate
=============

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-rotate`** CSS property defines the orientation/direction of the element as it is positioned along the `offset-path`.

Try it
------

**Note:** Early versions of the spec called this property `motion-rotation`.

Syntax
------

```css
/\* Follow the path direction, with optional additional angle \*/
offset-rotate: auto;
offset-rotate: auto 45deg;

/\* Follow the path direction but facing the opposite direction of `auto` \*/
offset-rotate: reverse;

/\* Keep a constant rotation regardless the position on the path \*/
offset-rotate: 90deg;
offset-rotate: 0.5turn;

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

`auto`

The element is rotated by the angle of the direction of the `offset-path`, relative to the positive x-axis. This is the default value.

``<angle>``

The element has a constant clockwise rotation transformation applied to it by the specified rotation angle.

`auto <angle>`

If `auto` is followed by an `<angle>`, the computed value of the angle is added to the computed value of `auto`.

`reverse`

The element is rotated similar to `auto`, except it faces the opposite direction. It is the same as specifying a value of `auto 180deg`.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | as <angle>, <basic-shape> or <path()> |

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

offset-rotate =
  [ auto | reverse ]  ||
  <angle>

```

Examples
--------

### Setting element orientation along its offset path

#### HTML

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

#### CSS

```css
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

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

#### Result

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

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

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

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

See also
--------

* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`


Computed value - CSS: Cascading Style Sheets

Computed value
==============

The **computed value** of a CSS property is the value that is transferred from parent to child during inheritance. It is calculated from the specified value by:

1. Handling the special values `inherit`, `initial`, `revert`, `revert-layer`, and `unset`.
2. Doing the computation needed to reach the value described in the "Computed value" line in the property's definition table.

The computation needed to reach a property's computed value typically involves converting relative values (such as those in `em` units or percentages) to absolute values. For example, if an element has specified values `font-size: 16px` and `padding-top: 2em`, then the computed value of `padding-top` is `32px` (double the font size).

However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage-specified values turn into percentage-computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. The relative values that remain in the computed value become absolute when the used value is determined.

**Note:** The `getComputedStyle()` DOM API returns the resolved value, which may either be the computed value or the used value, depending on the property.

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

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

See also
--------

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


@document - CSS: Cascading Style Sheets

@document
=========

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

**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 **`@document`** CSS at-rule restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.

```css
@document url("https://www.example.com/")
{
  h1 {
    color: green;
  }
}
```

Syntax
------

An `@document` rule can specify one or more matching functions. If any of the functions apply to a given URL, the rule will take effect on that URL. The functions available are:

`url()`

Matches an exact URL.

`url-prefix()`

Matches if the document URL starts with the value provided.

`domain()`

Matches if the document URL is on the domain provided (or a subdomain of it).

`media-document()`

Matches the media according to the string in parameter, one of `video`, `image`, `plugin` or `all`.

`regexp()`
Deprecated

Non-standard

Matches if the document URL is matched by the regular expression provided. The expression must match the entire URL.

The values provided to the `url()`, `url-prefix()`, `domain()`, and `media-document()` functions can be optionally enclosed by single or double quotes. The values provided to the `regexp()` function *must* be enclosed in quotes.

Escaped values provided to the `regexp()` function must additionally be escaped from the CSS. For example, a `.` (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to `\.`), then escape that string using CSS rules (to `\\.`).

`@document` is currently only supported in Firefox; if you wanted to replicate using such functionality in your own non-Firefox browser, you could try using this polyfill by @An-Error94, which uses a combination of a user script, data-\* attributes, and attribute selectors.

**Note:** There is a -moz-prefixed version of this property — `@-moz-document`. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks (See Firefox bug 1035091).

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

@document [ <url>                    |
            url-prefix(<string>)     |
            domain(<string>)         |
            media-document(<string>) |
            regexp(<string>)
          ]# {
  <group-rule-body>
}
```

Examples
--------

### Specifying document for CSS rule

```css
@document url("http://www.w3.org/"),
 url-prefix("http://www.w3.org/Style/"),
 domain("mozilla.org"),
 media-document("video"),
 regexp("https:.\*") {
  /\* CSS rules here apply to:
 - The page "http://www.w3.org/"
 - Any page whose URL begins with "http://www.w3.org/Style/"
 - Any page whose URL's host is "mozilla.org"
 or ends with ".mozilla.org"
 - Any standalone video
 - Any page whose URL starts with "https:" \*/

  /\* Make the above-mentioned pages really ugly \*/
  body {
    color: purple;
    background: yellow;
  }
}
```

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

Initially in Level 3, `@document` was postponed to Level 4, but then subsequently removed.

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

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

See also
--------

* Per-site user style sheet rules on the www-style mailing list.


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

::-moz-list-bullet
==================

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

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

Syntax
------

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

Examples
--------

### Styling list item markers

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

#### CSS

```css
::-moz-list-bullet {
  color: red;
  font-size: 1.5em;
}
```

#### Result

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

Not part of any standard.

See also
--------

* `::-moz-list-number`
* `::marker`


break-inside - CSS: Cascading Style Sheets

break-inside
============

The **`break-inside`** CSS property sets how page, column, or region breaks should behave inside a generated box. If there is no generated box, the property is ignored.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

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

Each possible break point (in other words, each element boundary) is affected by three properties: the `break-after` value of the previous element, the `break-before` value of the next element, and the `break-inside` value of the containing element.

To determine if a break must be done, the following rules are applied:

1. If any of the three concerned values is a *forced break value* (`always`, `left`, `right`, `page`, `column`, or `region`), it has precedence. If more than one of them are such a break, the value of the element that appears the latest in the flow is used. Thus, the `break-before` value has precedence over the `break-after` value, which in turn has precedence over the `break-inside` value.
2. If any of the three concerned values is an *avoid break value* (`avoid`, `avoid-page`, `avoid-region`, or `avoid-column`), no such break will be applied at that point.

Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding `avoid` value.

### Values

`auto`

Allows, but does not force, any break (page, column, or region) to be inserted within the principal box.

`avoid`

Avoids any break (page, column, or region) from being inserted within the principal box.

`avoid-page`

Avoids any page break within the principal box.

`avoid-column`

Avoids any column break within the principal box.

`avoid-region`
Experimental

Avoids any region break within the principal box.

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

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

| page-break-inside | break-inside |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |

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

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

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

break-inside =
  auto          |
  avoid         |
  avoid-page    |
  avoid-column  |
  avoid-region

```

Examples
--------

### Avoiding breaking inside a figure

In the following example we have a container that contains an `<h1>` spanning all columns (achieved using `column-span: all`) and a series of paragraphs laid out in multiple columns using `column-width: 200px`. We also have a `<figure>` containing an image and a caption.

By default, it is possible for you to get a break between the image and its caption, which is not what we want. To avoid this, we have set `break-inside: avoid` on the `<figure>`, which causes them to always stay together.

#### HTML

```html
<article>
  <h1>Main heading</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <figure>
    <img
 src="https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png" />
    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
  </figure>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
}

body {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h1 + p {
  margin-top: 0;
}

p {
  line-height: 1.5;
  break-after: column;
}

figure {
  break-inside: avoid;
}

img {
  max-width: 70%;
  display: block;
  margin: 0 auto;
}

figcaption {
  font-style: italic;
  font-size: 0.8rem;
  width: 70%;
}

article {
  column-width: 200px;
  gap: 20px;
}
```

### Result

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # break-within |
| CSS Regions Module Level 1 # region-flow-break |
| CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside |

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

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

See also
--------

* Multiple-column Layout
* Breaking Boxes With CSS Fragmentation


calc() - CSS: Cascading Style Sheets

calc()
======

The **`calc()`** CSS function lets you perform calculations when specifying CSS property values. It can be used with `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>` values.

Try it
------

Syntax
------

```css
/\* property: calc(expression) \*/
width: calc(100% - 80px);
```

The `calc()` function takes a single expression as its parameter, and the expression's result is used as the value for a CSS property. In this expression, the operands can be combined using the operators listed below. When the expression contains multiple operands,`calc()` uses the standard operator precedence rules:

`+`

Adds the specified operands.

`-`

Subtracts the second operand from the first operand.

`*`

Multiplies the specified operands.

`/`

Divides the left-side operand (dividend) by the right-side operand (divisor).

All operands, except those of type `<number>`, must be suffixed with an appropriate unit string, such as `px`, `em`, or `%`. You can use a different unit with each operand in your expression. You may also use parentheses to establish computation order when needed.

### Notes

 Serializing the arguments inside `calc()` follows the IEEE-754 standard for floating point math which means there's a few cases to be aware of regarding the `infinity` and `NaN` constants.
 For more details on how constants are serialized, see the `calc-constant` page.

In addition, the following notes apply:

* The `+` and `-` operators **must be surrounded by whitespace**. For instance, `calc(50% -8px)` will be parsed as "a percentage followed by a negative length" — which is an invalid expression — while `calc(50% - 8px)` is "a percentage followed by a subtraction operator and a length". Likewise, `calc(8px + -50%)` is treated as "a length followed by an addition operator and a negative percentage".
* The `*` and `/` operators do not require whitespace, but adding it for consistency is recommended.
* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `calc()` functions, in which case the inner ones are treated as simple parentheses.
* For lengths, you can't use `0` to mean `0px` (or another length unit); instead, you must use the version with the unit: `margin-top: calc(0px + 20px);` is valid, while `margin-top: calc(0 + 20px);` is invalid.
* The `calc()` function cannot directly substitute the numeric value for percentage types; for instance `calc(100 / 4)%` is invalid, while `calc(100% / 4)` is valid.
### Formal syntax
```

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

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

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

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

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

```

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

When `calc()` is used for controlling text size, be sure that one of the values includes a relative length unit, for example:

```css
h1 {
  font-size: calc(1.5rem + 3vw);
}
```

This ensures that text size will scale if the page is zoomed.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Usage with integers
-------------------

When **`calc()`** is used where an `<integer>` is expected, the value will be rounded to the nearest integer. For example:

```css
.modal {
  z-index: calc(3 / 2);
}
```

This will give `.modal` a final `z-index` value of 2.

Examples
--------

### Positioning an object on screen with a margin

`calc()` makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

```css
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
```

```html
<div class="banner">This is a banner!</div>
```

### Automatically sizing form fields to fit their container

Another use case for `calc()` is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

Let's look at some CSS:

```css
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
```

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use `calc()` again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

```html
<form>
  <div id="form-box">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>
```

### Nested `calc()` with CSS Variables

You can also use `calc()` with CSS variables. Consider the following code:

```css
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

After all variables are expanded, `widthC`'s value will be `calc(calc(100px / 2) / 2)`, then when it's assigned to `.foo`'s width property, all inner `calc()`s (no matter how deeply nested) will be flattened to just parentheses, so the `width` property's value will be eventually `calc((100px / 2) / 2)`, i.e. `25px`. In short: a `calc()` inside of a `calc()` is identical to just parentheses.

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-func |

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

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

See also
--------

* `<calc-constant>`
* CSS functions
* A Complete Guide to calc() in CSS (CSS-Tricks)


zoom - CSS: Cascading Style Sheets

zoom
====

**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 non-standard **`zoom`** CSS property can be used to control the magnification level of an element. `transform: scale()` should be used instead of this property, if possible. However, unlike CSS Transforms, `zoom` affects the layout size of the element.

Syntax
------

```css
/\* Keyword values \*/
zoom: normal;
zoom: reset;

/\* <percentage> values \*/
zoom: 50%;
zoom: 200%;

/\* <number> values \*/
zoom: 1.1;
zoom: 0.7;

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

### Values

`normal`

Render this element at its normal size.

`reset`
Non-standard

Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing `Ctrl` - `-` or `Ctrl` + `+` keyboard shortcuts) to the document. **Do not use** this value, *use the standard `unset` value instead*.

`<percentage>`

Zoom factor. `100%` is equivalent to `normal`. Values larger than `100%` zoom in. Values smaller than `100%` zoom out.

`<number>`

Zoom factor. Equivalent to the corresponding percentage (`1.0` = `100%` = `normal`). Values larger than `1.0` zoom in. Values smaller than `1.0` zoom out.

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

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

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

zoom =
  normal | reset | <number> | <percentage>
```

Examples
--------

### First example

#### HTML

```html
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
```

#### CSS
```

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}
```

```css
.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}
```

#### Result

### Second example

#### HTML

```html
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>
```

#### CSS

```css
div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  zoom: 1.5;
}
div#a {
  background-color: gold;
  zoom: normal;
}
div#b {
  background-color: green;
  zoom: 200%;
}
div#c {
  background-color: blue;
  zoom: 2.9;
}
```

#### Result

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

Not part of any standard. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub.

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

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

See also
--------

* `zoom` entry in CSS-Tricks' CSS Almanac
* Bug 390936: Implement Internet Explorer `zoom` property for CSS on the Firefox issue tracker Bugzilla


env() - CSS: Cascading Style Sheets

env()
=====

The **`env()`** CSS function can be used to insert the value of a user-agent defined environment variable into your CSS, in a similar fashion to the `var()` function and custom properties. The difference is that, as well as being user-agent defined rather than author-defined, environment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared.

In addition, unlike custom properties, which cannot be used outside of declarations, the `env()` function can be used in place of any part of a property value, or any part of a descriptor (e.g. in Media query rules). As the spec evolves, it may also be usable in other places such as selectors.

Originally provided by the iOS browser to allow developers to place their content in a safe area of the viewport, the `safe-area-inset-*` values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays.

For example, a common issue solved by `env()` is that of device notifications covering up some of the app user interface. By positioning fixed elements using `env()` you can ensure that they display in a safe area of the viewport.

Another use case for `env()` variables is for desktop Progressive web apps (PWAs) that use the Window Controls Overlay feature to take advantage of the full application window surface area. Using the `titlebar-area-*` values, they can position elements where the title bar would have been and ensure that content stays clear of the window control buttons.

Syntax
------

```css
/\* Using the four safe area inset values with no fallback values \*/
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/\* Using them with fallback values \*/
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
```

### Values

`safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left`

The `safe-area-inset-*` variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display. For rectangular viewports, like your average laptop monitor, their value is equal to zero. For non-rectangular displays — like a round watch face — the four values set by the user agent form a rectangle such that all content inside the rectangle is visible.

`titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, `titlebar-area-height`

The `titlebar-area-*` variables are useful for PWA installed on Desktop devices. When a desktop PWA uses the `window-controls-overlay` display\_override value, then it can use the `titlebar-area-*` variables to make sure content doesn't overlap with the window control buttons (i.e. minimize, maximize, and close).

`keyboard-inset-top`, `keyboard-inset-right`, `keyboard-inset-bottom`, `keyboard-inset-left`, `keyboard-inset-width`, `keyboard-inset-height`

The `keyboard-inset-*` variables provide information about the on-screen virtual keyboard's appearance. They define a rectangle by its top, right, bottom, and left insets from the edge of the viewport (the width and height insets are calculated from the other insets). To learn more, see the VirtualKeyboard API.

**Note:** Unlike other CSS properties, user agent-defined property names are case-sensitive.

### Formal syntax
```

<env()> =
  env( <custom-ident> <integer [0,∞]>\* , <declaration-value>? )

```

Usage
-----

To tell the browser to use the whole available space on the screen, and so enabling us to use the `env()` variables, we need to add a new viewport meta value:

```html
<meta name="viewport" content="viewport-fit=cover" />
```

You can then use `env()` in your CSS:

```css
body {
  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
      safe-area-inset-bottom,
      20px
    ) env(safe-area-inset-left, 20px);
}
```

Examples
--------

### Using env() to ensure buttons are not obscured by device UI

In the following example `env()` is used to ensure that fixed app toolbar buttons are not obscured by device notifications appearing at the bottom of the screen. On the desktop `safe-area-inset-bottom` is `0`. However, in devices that display notifications at the bottom of the screen, such as iOS, it contains a value that leaves space for the notification to display. This can then be used in the value for `padding-bottom` to create a gap that appears natural on that device.

```html
<main>Main content of app here</main>
<footer>
  <button>Go here</button>
  <button>Or here</button>
</footer>
```

```css
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 1em system-ui;
}

main {
  flex: 1;
  background-color: #eee;
  padding: 1em;
}

footer {
  flex: none;
  display: flex;
  gap: 1em;
  justify-content: space-evenly;
  background: black;
  padding: 1em 1em calc(1em + env(safe-area-inset-bottom));
  /\* adds the safe-area-inset-bottom value to the initial 1em of padding.
 a larger black area will display for a device that has a positive value for this variable. \*/
  position: sticky;
  bottom: 0;
}

button {
  padding: 1em;
  background: white;
  color: black;
  margin: 0;
  width: 100%;
  border: none;
  font: 1em system-ui;
}
```

### Using the fallback value

The below example makes use of the optional second parameter of `env()`, which allows you to provide a fallback value in case the environment variable is not available.

```html
<p>
  If the <code>env()</code> function is supported in your browser, this
  paragraph's text will have 50px of padding between it and the left border —
  but not the top, right and bottom. This is because the accompanying CSS is the
  equivalent of <code>padding: 0 0 0 50px</code>, because, unlike other CSS
  properties, user agent property names are case-sensitive.
</p>
```

```css
p {
  width: 300px;
  border: 2px solid red;
  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
      safe-area-inset-bottom,
      50px
    ) env(SAFE-AREA-INSET-LEFT, 50px);
}
```

### Example values

```css
/\* zero for all rectangular user agents \*/
padding: env(safe-area-inset-bottom, 50px);

/\* 50px because UA properties are case sensitive \*/
padding: env(Safe-area-inset-bottom, 50px);

/\* as if padding: '50px 20px' were set because x is not a valid environment variable \*/
padding: env(x, 50px 20px);

/\* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable \*/
padding: env(x, 50px, 20px);
```

The syntax of the fallback, like that of custom properties, allows commas. But, if the property value doesn't support commas, the value is not valid.

**Note:** User agent properties are not reset by the all property.

### Using env() to ensure content is not obscured by window control buttons in desktop PWAs

In the following example `env()` ensures that content displayed in a desktop Progressive Web App that uses the Window Controls Overlay API is not obscured by the operating system's window control buttons. The `titlebar-area-*` values define a rectangle where the title bar would normally have been displayed. On devices that do not support the Window Controls Overlay feature, such as mobile devices, the fallback values are used.

Here is what a PWA installed on a desktop device normally looks like:

![Illustration of what a PWA installed on desktop normally looks like, with window control buttons, a title bar, and web content below that](/en-US/docs/Web/CSS/env/desktop-pwa-window.png)

With the Window Controls Overlay feature, the web content covers the whole app window surface area, with the window controls and PWA buttons displayed as overlays:

![Illustration of what a PWA installed on desktop looks like with the Window Controls Overlay feature, with window control buttons, no title bar, and web content spanning the whole window](/en-US/docs/Web/CSS/env/desktop-pwa-window-wco.png)

```html
<header>Title of the app here</header>
<main>Main content of app here</main>
```

```css
header {
  position: fixed;
  left: env(titlebar-area-x);
  top: env(titlebar-area-y);
  width: env(titlebar-area-width);
  height: env(titlebar-area-height);
}

main {
  margin-top: env(titlebar-area-height);
}
```

**Note:** Using `position:fixed` makes sure the header does not scroll with the rest of the content, and instead stays aligned with the window control buttons, even on device/browsers that support elastic overscroll (also known as rubber banding).

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

| Specification |
| --- |
| CSS Environment Variables Module Level 1 # env-function |

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

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

See also
--------

* `var(…)`
* CSS custom properties for cascading variables module
* Custom properties (`--*`): CSS variables
* Using CSS custom properties (variables)
* Customize the window controls overlay of your PWA's title bar
* Display content in the title bar
* Breaking Out of the Box


<gradient> - CSS: Cascading Style Sheets

<gradient>
==========

The **`<gradient>`** CSS data type is a special type of `<image>` that consists of a progressive transition between two or more colors.

Try it
------

A CSS gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element to which it applies.

Syntax
------

The `<gradient>` data type is defined with one of the function types listed below.

### Linear gradient

Linear gradients transition colors progressively along an imaginary line. They are generated with the `linear-gradient()` function.

### Radial gradient

Radial gradients transition colors progressively from a center point (origin). They are generated with the `radial-gradient()` function.

### Conic gradient

Conic gradients transition colors progressively around a circle. They are generated with the `conic-gradient()` function.

### Repeating gradient

Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the `repeating-linear-gradient()`, `repeating-radial-gradient()`, and `repeating-conic-gradient()` functions.

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

As with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (Be aware that older browsers may not use this behavior when using the transparent keyword.)

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

<gradient> =
  <linear-gradient()>            |
  <repeating-linear-gradient()>  |
  <radial-gradient()>            |
  <repeating-radial-gradient()>

<linear-gradient()> =
  linear-gradient( [ <linear-gradient-syntax> ] )

<repeating-linear-gradient()> =
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )

<radial-gradient()> =
  radial-gradient( [ <radial-gradient-syntax> ] )

<repeating-radial-gradient()> =
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )

<linear-gradient-syntax> =
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>

<radial-gradient-syntax> =
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

<side-or-corner> =
  [ left | right ]  ||
  [ top | bottom ]

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<radial-shape> =
  circle   |
  ellipse

<radial-size> =
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}

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

<linear-color-stop> =
  <color> <length-percentage>?

<linear-color-hint> =
  <length-percentage>

<radial-extent> =
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side

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

```

Examples
--------

### Linear gradient example

A simple linear gradient.
```

<div class="linear-gradient">Linear gradient</div>
```

```
div {
  width: 240px;
  height: 80px;
}
```

```css
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}
```

### Radial gradient example

A simple radial gradient.
```

<div class="radial-gradient">Radial gradient</div>
```

```
div {
  width: 240px;
  height: 80px;
}
```

```css
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30 144 255));
}
```

### Conic gradient example

A simple conic gradient example. Note that this isn't supported widely across browser as of yet.
```

<div class="conic-gradient">Conic gradient</div>
```

```
div {
  width: 200px;
  height: 200px;
}
```

```css
.conic-gradient {
  background: conic-gradient(pink, coral, lime);
}
```

### Repeating gradient examples

Simple repeating linear and radial gradient examples.
```

<div class="linear-repeat"></div>
<span>Repeating linear gradient</span>
<hr />
<div class="radial-repeat"></div>
<span>Repeating radial gradient</span>
<hr />
<div class="conic-repeat"></div>
<span>Repeating conic gradient</span>
```

```
div {
  display: inline-block;
  width: 240px;
  height: 80px;
}

span {
  font-weight: bold;
  vertical-align: top;
}
```

```css
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    pink,
    pink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    lime,
    lime 15px,
    white 15px,
    white 30px
  );
}

.conic-repeat {
  background: repeating-conic-gradient(lime, pink 30deg);
}
```

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

| Specification |
| --- |
| CSS Images Module Level 4 # gradients |

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

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

See also
--------

* Using CSS gradients
* Gradient functions: `linear-gradient()`, `repeating-linear-gradient()`, `radial-gradient()`, `repeating-radial-gradient()`, `conic-gradient()`, `repeating-conic-gradient()`
* CSS Basic Data Types
* CSS Units and Values
* Introduction to CSS: Values and Units


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

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

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

Try it
------

Syntax
------

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

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

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

Examples
--------

### HTML

```html
<div>
  <span>This is a span.</span>
  <span>This is another span.</span>
  <em>This is emphasized.</em>
  <span>Wow, this span gets limed!!!</span>
  <del>This is struck through.</del>
  <span>Here is one last span.</span>
</div>
```

### CSS

```css
span:nth-last-of-type(2) {
  background-color: lime;
}
```

### Result

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

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

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

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

See also
--------

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


Pseudo-elements - CSS: Cascading Style Sheets

Pseudo-elements
===============

A CSS **pseudo-element** is a keyword added to a selector that lets you style a specific part of the selected element(s).

Syntax
------

```css
selector::pseudo-element {
  property: value;
}
```

For example, `::first-line` can be used to change the font of the first line of a paragraph.

```css
/\* The first line of every <p> element. \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```

Double colons (`::`) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use single colon (`:`) in their notation.

You can use only one pseudo-element in a selector. The pseudo-element must appear after all the other components in the complex or compound selector in which it appears. For example, you can select a paragraph's first line using `p::first-line` but not the first-line's children or a hovered first line. So both `p::first-line > *` and `p::first-line:hover` are invalid.

While it is not possible to select an element based on its *state* by using pseudo-elements, a pseudo-element can be used to select and style a part of an element that already has a state applied to it. For example, `p:hover::first-line` selects the first line (pseudo-element) of a paragraph when the paragraph itself is being hovered (pseudo-class).

**Note:** When a selector list contains an invalid selector, the entire style block is ignored.

List of pseudo-elements
-----------------------

Pseudo-elements defined by a set of CSS specifications include the following:

A

* `::after`

B

* `::backdrop`
* `::before`

C

* `::cue`
* `::cue-region`

F

* `::first-letter`
* `::first-line`
* `::file-selector-button`

G

* `::grammar-error`
Experimental

M

* `::marker`

P

* `::part()`
* `::placeholder`

S

* `::selection`
* `::slotted()`
* `::spelling-error`
Experimental

T

* `::target-text`
Experimental

**Note:** Browsers support the single colon syntax only for the original four pseudo-elements: `::before`, `::after`, `::first-line`, and `::first-letter`.

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |
| CSS Positioned Layout Module Level 4  |
| CSS Shadow Parts  |
| WebVTT: The Web Video Text Tracks Format  |

See also
--------

* CSS pseudo-element module
* Pseudo-classes
* CSS selectors module
* CSS building blocks: Pseudo-classes and pseudo-elements