abs() - CSS: Cascading Style Sheets

abs()
=====

The **`abs()`** CSS function returns the absolute value of the argument, as the same type as the input.

Syntax
------

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

### Parameters

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

`x`

A calculation which resolves to a number.

### Return value

The absolute value of `x`.

* if `x`'s numeric value is positive or `0⁺`, return `x`.
* Otherwise, returns `-1 * x`.
### Formal syntax
```

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

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

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

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

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

```

Examples
--------

### Positive variables

The `abs()` function can be used to ensure that a value is always positive. In the following example a CSS custom property `--font-size` is used as the value of `font-size`. Wrapping this custom property in `abs()` will convert a negative value to a positive one.

```css
h1 {
  font-size: abs(var(--font-size));
}
```

### Control gradient angle of direction

You can also control the gradient direction using `abs()` function. In the following example, with an angle of -45deg the gradient would start red and transition to blue. By using `abs()` to make the value positive, the gradient will start blue and transition to red.

```css
div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}
```

### Backwards compatible fallback

In older browsers that lack the support for CSS `abs()` function, you can use the CSS `max()` function to achieve the same result, as shown below:

```css
p {
  line-height: max(var(--lh), -1 * var(--lh));
}
```

We use the `max()` function to return the largest (most positive) value from a list of two values: `var(--lh)` or `-1 * var(--lh)`. Irrespective of whether `--lh` is positive or negative, the calculated return value will always be positive, that is, an absolute number.

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

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

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

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

See also
--------

* `sign()`


box-direction - CSS: Cascading Style Sheets

box-direction
=============

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

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

**Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. The `-moz-box-direction` will only be used for XUL while the previous standard `box-direction` has been replaced by `flex-direction`. See flexbox for information about the current standard.

The **`box-direction`** CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).

Syntax
------

```css
/\* Keyword values \*/
box-direction: normal;
box-direction: reverse;

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

The `box-direction` property is specified as one of the keyword values listed below.

### Values

`normal`

The box lays out its contents from the start (the left or top edge).

`reverse`

The box lays out its contents from the end (the right or bottom edge).

Notes
-----

The edge of the box designated the *start* for layout purposes depends on the box's orientation:

* For horizontal elements, the *start* is the top edge.
* For vertical elements, the *start* is the left edge.

The edge opposite to the start is designated the *end*.

If the direction is set using the element's `dir` attribute, then the style is ignored.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | elements with a CSS `display` value of `box` or `inline-box` |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

box-direction =
  normal | reverse | inherit
```

Examples
--------

### Setting box direction

```css
.example {
  /\* bottom-to-top layout \*/
  -moz-box-direction: reverse; /\* Mozilla \*/
  -webkit-box-direction: reverse; /\* WebKit \*/
  box-direction: reverse; /\* As specified \*/
}
```

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

* `box-orient`
* `box-pack`
* `box-align`
* `flex-direction`


font-synthesis - CSS: Cascading Style Sheets

font-synthesis
==============

The **`font-synthesis`** shorthand CSS property lets you specify whether or not the browser may synthesize the bold, italic, small-caps, and/or subscript and superscript typefaces when they are missing in the specified font-family.

Try it
------

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

This property is a shorthand for the following CSS properties:

* font-synthesis-weight
* font-synthesis-style
* font-synthesis-small-caps
* font-synthesis-position
Syntax
------

```css
/\* none or one or more of the other keyword values \*/
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: position;
font-synthesis: small-caps style; /\* property values can be in any order \*/
font-synthesis: style small-caps weight position; /\* property values can be in any order \*/

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

### Values

`none`

Indicates that no bold, italic, or small-caps typeface may be synthesized by the browser.

`weight`

Indicates that the missing bold typeface may be synthesized by the browser if needed.

`style`

Indicates that the italic typeface may be synthesized by the browser if needed.

`small-caps`

Indicates that the small-caps typeface may be synthesized by the browser if needed.

`position`

Indicates that the subscript and superscript typeface may be synthesized by the browser, if needed, when using `font-variant-position`.

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

Most standard Western fonts include italic and bold variants, and some fonts include a small-caps and subscript/superscript variants. However, many fonts do not. Fonts used for Chinese, Japanese, Korean and other logographic scripts tend not to include these variants and synthesizing them might impede the legibility or change the meaning of the text. In these cases, it may be desirable to switch off the browser's default font-synthesis.

For example, using the :lang() pseudo-class, you can disable the browser from synthesizing bold and oblique characters for a language, in this case Arabic:

```css
\*:lang(ar) {
  font-synthesis: none;
}
```

The table below shows how a value of the shorthand `font-synthesis` property maps to the constituent longhand properties.

| font-synthesis value | font-synthesis-weight value | font-synthesis-style value | font-synthesis-small-caps value | font-synthesis-position value |
| --- | --- | --- | --- | --- |
| `none` | `none` | `none` | `none` | `none` |
| `weight` | `auto` | `none` | `none` | `none` |
| `style` | `none` | `auto` | `none` | `none` |
| `small-caps` | `none` | `none` | `auto` | `none` |
| `position` | `none` | `none` | `none` | `auto` |
| `weight style` | `auto` | `auto` | `none` | `none` |
| `weight small-caps` | `auto` | `none` | `auto` | `none` |
| `weight position` | `auto` | `none` | `none` | `auto` |
| `style small-caps` | `none` | `auto` | `auto` | `none` |
| `style position` | `none` | `auto` | `none` | `auto` |
| `weight style small-caps` | `auto` | `auto` | `auto` | `none` |
| `weight style position` | `auto` | `auto` | `none` | `auto` |
| `weight small-caps position` | `auto` | `none` | `auto` | `auto` |
| `style small-caps position` | `none` | `auto` | `auto` | `auto` |
| `weight style small-caps position` | `auto` | `auto` | `auto` | `auto` |

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

|  |  |
| --- | --- |
| Initial value | `weight style small-caps position`  |
| 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-synthesis =
  none                                           |
  [ weight || style || small-caps || position ]

```

Examples
--------

### Disabling font synthesis

This example shows the browser's default font-synthesis behavior and compares it with when the synthesis behavior is turned off. Notice that the example uses two imported fonts to demonstrate this behavior. You might not be able to replicate turning off of font-synthesis on fonts available on your operating system by default.

#### HTML

```html
<pre> DEFAULT </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS DISABLED </pre>
<p class="english no-syn">
  This font supports <strong>bold</strong> and <em>italic.</em>
</p>
<p class="chinese no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS ENABLED </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
```

#### CSS

```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.chinese {
  font-family: "Ma Shan Zheng";
}
.no-syn {
  font-synthesis: none;
}
.syn {
  font-synthesis: style weight;
}
```

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis |

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

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

See also
--------

* `font-style`
* `font-weight`
* `font-variant-caps`
* `font-variant-position`


border-right-width - CSS: Cascading Style Sheets

border-right-width
==================

The **`border-right-width`** CSS property sets the width of the right border of an element.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/\* <length> values \*/
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

/\* Global keywords \*/
border-right-width: inherit;
border-right-width: initial;
border-right-width: revert;
border-right-width: revert-layer;
border-right-width: unset;
```

### Values

`<line-width>`

Defines the width of the border, either as an explicit nonnegative `<length>` or a keyword. If it's a keyword, it must be one of the following values:

* `thin`
* `medium`
* `thick`

**Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | the absolute length or `0` if `border-right-style` is `none` or `hidden` |
| Animation type | a length |

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

border-right-width =
  <line-width>

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

```

Examples
--------

### Comparing border widths

#### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

#### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}
```

#### Result

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

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

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

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

See also
--------

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


CSS reference - CSS: Cascading Style Sheets

CSS reference
=============

Use this **CSS reference** to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Also included is a brief DOM-CSS / CSSOM reference.

Basic rule syntax
-----------------

### Style rule syntax

```css
style-rule ::=
 selectors-list {
      properties-list
    }
```

Where:

```css
selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]
```

See the index of *selectors*, *pseudo-classes*, and *pseudo-elements* below. The syntax for each specified *value* depends on the data type defined for each specified *property*.

#### Style rule examples

```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```

For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. Be aware that any syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

### At-rule syntax

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

Index
-----

**Note:** This index does not include SVG-exclusive presentation attributes, which can be used as CSS properties on SVG elements.

**Note:** The property names in this index do **not** include the JavaScript names which do differ from the CSS standard names.

### -

* `--*`
* `-webkit-line-clamp`

### A

* `abs()`
* `accent-color`
* `acos()`
* `:active`
* `additive-symbols (@counter-style)`
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks`
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-range`
* `animation-range-end`
* `animation-range-start`
* `animation-timeline`
* `animation-timing-function`
* `@annotation`
* `:any-link`
* `appearance`
* `ascent-override (@font-face)`
* `asin()`
* `aspect-ratio`
* `atan()`
* `atan2()`
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `base-palette (@font-palette-values)`
* `<basic-shape>`
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>`
* `block-size`
* `blur()`
* `border`
* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-end-end-radius`
* `border-end-start-radius`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius`
* `border-start-start-radius`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom`
* `@bottom-center`
* `box-decoration-break`
* `box-shadow`
* `box-sizing`
* `break-after`
* `break-before`
* `break-inside`
* `brightness()`

### C

* `calc()`
* `caption-side`
* `caret`
* `caret-color`
* `caret-shape`
* `@character-variant`
* `@charset`
* `:checked`
* `circle()`
* `clamp()`
* `clear`
* `clip`
* `clip-path`
* `<color>`
* `color`
* `color-scheme`
* `column-count`
* `column-fill`
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width`
* `columns`
* `conic-gradient()`
* `contain`
* `contain-intrinsic-block-size`
* `contain-intrinsic-height`
* `contain-intrinsic-inline-size`
* `contain-intrinsic-size`
* `contain-intrinsic-width`
* `container`
* `container-name`
* `container-type`
* `content`
* `content-visibility`
* `contrast()`
* `cos()`
* `<counter>`
* `counter-increment`
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counters()`
* `cross-fade()`
* `cubic-bezier()`
* `::cue`
* `::cue-region`
* `:current`
* `cursor`
* `<custom-ident>`
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>`
* `:default`
* `:defined`
* `descent-override (@font-face)`
* `<dimension>`
* `:dir`
* `direction`
* `:disabled`
* `display`
* `<display-box>`
* `<display-inside>`
* `<display-internal>`
* `<display-legacy>`
* `<display-listitem>`
* `<display-outside>`
* `drop-shadow()`
* `resolution#dpcm`
* `resolution#dpi`
* `resolution#dppx`

### E

* `<easing-function>`
* `element()`
* `ellipse()`
* `:empty`
* `empty-cells`
* `:enabled`
* `env()`
* `exp()`
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)`
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()`
* `<flex>`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr`
* `float`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family`
* `font-family (@font-face)`
* `font-family (@font-palette-values)`
* `font-feature-settings`
* `font-feature-settings (@font-face)`
* `@font-feature-values`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing`
* `font-palette`
* `@font-palette-values`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-stretch (@font-face)`
* `font-style`
* `font-style (@font-face)`
* `font-synthesis`
* `font-synthesis-position`
* `font-synthesis-small-caps`
* `font-synthesis-style`
* `font-synthesis-weight`
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-variation-settings (@font-face)`
* `font-weight`
* `font-weight (@font-face)`
* `forced-color-adjust`
* `format()`
* `<frequency>`
* `<frequency-percentage>`
* `:fullscreen`
* `:future`

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error`
* `grayscale()`
* `grid`
* `grid-area`
* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-column`
* `grid-column-end`
* `grid-column-start`
* `grid-row`
* `grid-row-end`
* `grid-row-start`
* `grid-template`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz`
* `hanging-punctuation`
* `:has`
* `height`
* `@historical-forms`
* `:host()`
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()`
* `hwb()`
* `hyphenate-character`
* `hyphenate-limit-chars`
* `hyphens`
* `hypot()`

### I

* `<ident>`
* `<image>`
* `image()`
* `image-orientation`
* `image-rendering`
* `image-resolution`
* `image-set()`
* `@import`
* `:in-range`
* `:indeterminate`
* `inherit`
* `inherits (@property)`
* `initial`
* `initial-letter`
* `initial-letter-align`
* `initial-value (@property)`
* `inline-size`
* `input-security`
* `inset`
* `inset()`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
* `<integer>`
* `:invalid`
* `invert()`
* `:is`
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items`
* `justify-self`
* `justify-tracks`

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang`
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left`
* `left`
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)`
* `line-height`
* `line-height-step`
* `<line-style>`
* `linear-gradient()`
* `:link`
* `list-style`
* `list-style-image`
* `list-style-position`
* `list-style-type`
* `local()`
* `:local-link`
* `log()`

### M

* `length#mm`
* `margin`
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-bottom`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim`
* `::marker`
* `marks (@page)`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
* `masonry-auto-flow`
* `math-depth`
* `math-shift`
* `math-style`
* `matrix()`
* `matrix3d()`
* `max()`
* `max-block-size`
* `max-height`
* `max-inline-size`
* `max-lines`
* `max-width`
* `@media`
* `min()`
* `min-block-size`
* `min-height`
* `min-inline-size`
* `min-width`
* `minmax()`
* `mix-blend-mode`
* `mod()`
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)`
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type`
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()`
* `:optional`
* `order`
* `@ornaments`
* `orphans`
* `:out-of-range`
* `outline`
* `outline-color`
* `outline-offset`
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor`
* `overflow-block`
* `overflow-clip-margin`
* `overflow-inline`
* `overflow-wrap`
* `overflow-x`
* `overflow-y`
* `overlay`
* `override-colors (@font-palette-values)`
* `overscroll-behavior`
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
* `overscroll-behavior-x`
* `overscroll-behavior-y`

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)`
* `padding`
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-bottom`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
* `padding-left`
* `padding-right`
* `padding-top`
* `@page`
* `page`
* `page-break-after`
* `page-break-before`
* `page-break-inside`
* `page-orientation (@page)`
* `paint()`
* `paint-order`
* `::part`
* `:past`
* `path()`
* `:paused`
* `<percentage>`
* `perspective`
* `perspective()`
* `perspective-origin`
* `:picture-in-picture`
* `place-content`
* `place-items`
* `place-self`
* `::placeholder`
* `:placeholder-shown`
* `:playing`
* `pointer-events`
* `polygon()`
* `<position>`
* `position`
* `pow()`
* `prefix (@counter-style)`
* `print-color-adjust`
* `@property`

### Q

* `length#Q`
* `quotes`

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()`
* `range (@counter-style)`
* `<ratio>`
* `ray()`
* `:read-only`
* `:read-write`
* `rect()`
* `rem()`
* `repeat()`
* `repeating-conic-gradient()`
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `:required`
* `resize`
* `<resolution>`
* `reversed()`
* `revert`
* `rgb()`
* `rgba()`
* `:right`
* `right`
* `@right-bottom`
* `:root`
* `rotate`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `round()`
* `row-gap`
* `ruby-align`
* `ruby-merge`
* `ruby-position`

### S

* `saturate()`
* `scale`
* `scale()`
* `scale3d()`
* `scaleX()`
* `scaleY()`
* `scaleZ()`
* `:scope`
* `@scope`
* `scroll()`
* `scroll-behavior`
* `scroll-margin`
* `scroll-margin-block`
* `scroll-margin-block-end`
* `scroll-margin-block-start`
* `scroll-margin-bottom`
* `scroll-margin-inline`
* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
* `scroll-padding`
* `scroll-padding-block`
* `scroll-padding-block-end`
* `scroll-padding-block-start`
* `scroll-padding-bottom`
* `scroll-padding-inline`
* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
* `scroll-snap-align`
* `scroll-snap-stop`
* `scroll-snap-type`
* `scroll-timeline`
* `scroll-timeline-axis`
* `scroll-timeline-name`
* `scrollbar-color`
* `scrollbar-gutter`
* `scrollbar-width`
* `::selection`
* `selector()`
* `sepia()`
* `<shape>`
* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
* `sign()`
* `sin()`
* `size (@page)`
* `size-adjust (@font-face)`
* `skew()`
* `skewX()`
* `skewY()`
* `::slotted`
* `speak-as (@counter-style)`
* `::spelling-error`
* `sqrt()`
* `src (@font-face)`
* `@starting-style`
* `steps()`
* `<string>`
* `@styleset`
* `@stylistic`
* `suffix (@counter-style)`
* `@supports`
* `supports() (@import)`
* `@swash`
* `symbols (@counter-style)`
* `symbols()`
* `syntax (@property)`
* `system (@counter-style)`
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout`
* `tan()`
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text`
* `target-text()`
* `:target-within`
* `text-align`
* `text-align-last`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip`
* `text-decoration-skip-ink`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis`
* `text-emphasis-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-indent`
* `text-justify`
* `text-orientation`
* `text-overflow`
* `text-rendering`
* `text-shadow`
* `text-size-adjust`
* `text-transform`
* `text-underline-offset`
* `text-underline-position`
* `text-wrap`
* `<time>`
* `<time-percentage>`
* `timeline-scope`
* `top`
* `@top-center`
* `touch-action`
* `transform`
* `transform-box`
* `<transform-function>`
* `transform-origin`
* `transform-style`
* `transition`
* `transition-behavior`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
* `translate`
* `translate()`
* `translate3d()`
* `translateX()`
* `translateY()`
* `translateZ()`
* `type()`

### U

* `unicode-bidi`
* `unicode-range (@font-face)`
* `unset`
* `<url>`
* `url()`
* `:user-invalid`
* `user-select`
* `:user-valid`

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline`
* `view-timeline-axis`
* `view-timeline-inset`
* `view-timeline-name`
* `::view-transition`
* `::view-transition-group`
* `::view-transition-image-pair`
* `view-transition-name`
* `::view-transition-new`
* `::view-transition-old`
* `visibility`
* `:visited`

### W

* `:where`
* `white-space`
* `white-space-collapse`
* `widows`
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap`
* `writing-mode`

### X

* `resolution#x`

### Z

* `z-index`

### Others

* `--*`

Selectors
---------

The following are the various selectors, which allow styles to be conditional based on various features of elements within the DOM.

### Basic selectors

**Basic selectors** are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

* Universal selector `*`
* Type selector `elementname`
* Class selector `.classname`
* ID selector `#idname`
* Attribute selector `[attr=value]`
### Grouping selectors

Selector list `A, B`

Specifies that both `A` and `B` elements are selected. This is a grouping method to select several matching elements.

### Combinators

Combinators are selectors that establish a relationship between two or more simple selectors, such as "`A` is a child of `B`" or "`A` is adjacent to `B`", creating a complex selector.

Next-sibling combinator `A + B`

Specifies that the elements selected by both `A` and `B` have the same parent and that the element selected by `B` immediately follows the element selected by `A` horizontally.

Subsequent-sibling combinator `A ~ B`

Specifies that the elements selected by both `A` and `B` share the same parent and that the element selected by `A` comes before—but not necessarily immediately before—the element selected by `B`.

Child combinator `A > B`

Specifies that the element selected by `B` is the direct child of the element selected by `A`.

Descendant combinator `A B`

Specifies that the element selected by `B` is a descendant of the element selected by `A`, but is not necessarily a direct child.

Column combinator `A || B`
Experimental

Specifies that the element selected by `B` is located within the table column specified by `A`. Elements which span multiple columns are considered to be a member of all of those columns.

### Pseudo

Pseudo classes `:`

Specifies a special state of the selected element(s).

Pseudo elements `::`

Represents entities that are not included in HTML.

See also selectors in the Selectors specification and the pseudo-element specification.

Concepts
--------

### Syntax and semantics

* CSS syntax
* At-rules
* Cascade
* Comments
* Descriptor
* Inheritance
* Shorthand properties
* Specificity
* Value definition syntax
* CSS unit and value types
* CSS functional notations
### Values

* Actual value
* Computed value
* Initial value
* Resolved value
* Specified value
* Used value
### Layout

* Block formatting context
* Box model
* Containing block
* Layout mode
* Margin collapsing
* Replaced elements
* Stacking context
* Visual formatting model
DOM-CSS / CSSOM
---------------

### Major object types

* `Document.styleSheets`
* `styleSheets[i].cssRules`
* `cssRules[i].cssText` (selector & style)
* `cssRules[i].selectorText`
* `HTMLElement.style`
* `HTMLElement.style.cssText` (just style)
* `Element.className`
* `Element.classList`
### Important methods

* `CSSStyleSheet.insertRule()`
* `CSSStyleSheet.deleteRule()`
See also
--------

* Mozilla CSS extensions (prefixed with `-moz-`)
* WebKit CSS extensions (mostly prefixed with `-webkit-`)
External Links
--------------

* CSS Indices (w3.org)


border-inline-start-style - CSS: Cascading Style Sheets

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

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

Try it
------

Syntax
------

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

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

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

### Values

`<'border-style'>`

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

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

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

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

border-inline-start-style =
  <line-style>

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

```

Examples
--------

### HTML

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

### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-start-style: dashed;
}
```

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

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

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

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

See also
--------

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


mask-type - CSS: Cascading Style Sheets

mask-type
=========

The **`mask-type`** CSS property sets whether an SVG `<mask>` element is used as a *luminance* or an *alpha* mask. It applies to the `<mask>` element itself.

This property may be overridden by the `mask-mode` property, which has the same effect but applies to the element where the mask is used. Alpha masks will generally be faster to render.

Syntax
------

```css
/\* Keyword values \*/
mask-type: luminance;
mask-type: alpha;

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

The `mask-type` property is specified as one of the keyword values listed below.

### Values

`luminance`

Is a keyword indicating that the associated mask image is a luminance mask, i.e., that its relative luminance values must be used when applying it.

`alpha`

Is a keyword indicating that the associated mask image is an alpha mask, i.e., that its alpha channel values must be used when applying it.

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

|  |  |
| --- | --- |
| Initial value | `luminance` |
| Applies to | `<mask>` elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

mask-type =
  luminance  |
  alpha

```

Examples
--------

### Setting an alpha mask

#### HTML

```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```

#### CSS

```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128 128 128);
  border: solid 1px black;
  mask: url("#m");
}
```

#### Result

### Setting a luminance mask

#### HTML

```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask
 id="m"
 maskContentUnits="objectBoundingBox"
 style="mask-type:luminance">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```

#### CSS

```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128 128 128);
  border: solid 1px black;
  mask: url("#m");
}
```

#### Result

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

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

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

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

See also
--------

* Other mask-related properties: `mask`, `mask-mode`


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

-moz-user-focus
===============

**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-user-focus`** CSS property is used to indicate whether an element can have the focus.

By setting its value to `ignore`, you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence.

Syntax
------

```css
/\* Keyword values \*/
-moz-user-focus: normal;
-moz-user-focus: ignore;

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

### Values

`ignore`

The element does not accept keyboard focus and will be skipped in the tab order.

`normal`

The element can accept keyboard focus.

`none`

?

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

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

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

-moz-user-focus =
  ignore | normal | none
```

Examples
--------

### HTML

```html
<input class="ignored" value="The user cannot focus on this element." />
```

### CSS

```css
.ignored {
  -moz-user-focus: ignore;
}
```

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

Not part of any standard.

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

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

See also
--------

* `-moz-user-input`
* `user-modify`
* `-moz-user-select`


caption-side - CSS: Cascading Style Sheets

caption-side
============

The **`caption-side`** CSS property puts the content of a table's `<caption>` on the specified side. The values are relative to the `writing-mode` of the table.

Try it
------

Syntax
------

```css
/\* Directional values \*/
caption-side: top;
caption-side: bottom;

/\* Logical values \*/
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

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

The `caption-side` property is specified as one of the keyword values listed below.

### Values

`top`

The caption box should be positioned above the table.

`bottom`

The caption box should be positioned below the table.

`block-start`

The caption box should be positioned at the block start edge of the table.

`block-end`

The caption box should be positioned at the block end edge of the table.

`inline-start`

The caption box should be positioned at the inline start edge of the table.

`inline-end`

The caption box should be positioned at the inline end edge of the table.

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

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

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

caption-side =
  top     |
  bottom

```

Examples
--------

### Setting captions above and below

#### HTML

```html
<table class="top">
  <caption>
    Caption ABOVE the table
  </caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    Caption BELOW the table
  </caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>
```

#### CSS

```css
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}
```

#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-caption-side |
| CSS Logical Properties and Values Level 1 # caption-side |

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

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


min-inline-size - CSS: Cascading Style Sheets

min-inline-size
===============

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

Try it
------

Syntax
------

```css
/\* <length> values \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* <percentage> values \*/
min-inline-size: 10%;

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

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

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

### Values

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

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

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

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

min-inline-size =
  <'min-width'>

```

Examples
--------

### Setting minimum inline size for vertical text

#### HTML

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

#### CSS

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

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-inline-size |
| 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: `min-width` and `min-height`
* `writing-mode`


border-left-style - CSS: Cascading Style Sheets

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

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

Try it
------

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

Syntax
------

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

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

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

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

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

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

border-left-style =
  <line-style>

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

```

Examples
--------

### Setting border-left-style

#### HTML

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

#### CSS

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

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

#### Result

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

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

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

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

See also
--------

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


animation-direction - CSS: Cascading Style Sheets

animation-direction
===================

The **`animation-direction`** CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

Try it
------

It is often convenient to use the shorthand property `animation` to set all animation properties at once.

Syntax
------

```css
/\* Single animation \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* Multiple animations \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

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

### Values

`normal`

The animation plays *forwards* each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again. This is the default value.

`reverse`

The animation plays *backwards* each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and easing functions are also reversed. For example, an `ease-in` easing function becomes `ease-out`.

`alternate`

The animation reverses direction each cycle, with the first iteration being played *forwards*. The count to determine if a cycle is even or odd starts at one.

`alternate-reverse`

The animation reverses direction each cycle, with the first iteration being played *backwards*. The count to determine if a cycle is even or odd starts at one.

**Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the `animation-name`s appear. For situations where the number of animations and `animation-*` property values do not match, see Setting multiple animation property values.

**Note:** When creating CSS scroll-driven animations, specifying an `animation-direction` works as expected, for example `reverse` causes the animation to run in reverse over the course of the timeline's progression. A value of `alternate` (combined with an `animation-iteration-count`) causes the animation to run forwards and backwards as the timeline is progressed.

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

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

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

animation-direction =
  <single-animation-direction>#

<single-animation-direction> =
  normal             |
  reverse            |
  alternate          |
  alternate-reverse

```

Examples
--------

### Reversing the animation direction

#### HTML

```html
<div class="box"></div>
```

#### CSS

```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

#### Result

See CSS animations for examples.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-direction |

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

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

See also
--------

* Using CSS animations
* JavaScript `AnimationEvent` API
* Other related animation properties: `animation`, `animation-composition`, `animation-delay`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`, `animation-timing-function`


:invalid - CSS: Cascading Style Sheets

:invalid
========

The **`:invalid`** CSS pseudo-class represents any `<form>`, `<fieldset>`, `<input>` or other `<form>` element whose contents fail to validate.

Try it
------

This pseudo-class is useful for highlighting field errors for the user.

Syntax
------

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

Examples
--------

### Coloring elements to show validation

#### HTML

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

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

#### CSS

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

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

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

#### Result

### Showing sections in stages

In this example we use `:invalid` along with `~`, the subsequent-sibling combinator, to make a form appear in stages, so the form initially shows the first item to complete, and when the user completes each item the form displays the next one. When the whole form is complete the user can submit it.

#### HTML

```html
<form>
  <fieldset>
    <label for="form-name">Name</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <label for="form-email">Email Address</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <label for="form-message">Message</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">Submit</button>
</form>
```

#### CSS

```css
/\* Hide the fieldset after an invalid fieldset \*/
fieldset:invalid ~ fieldset {
  display: none;
}

/\* Dim and disable the button while the form is invalid \*/
form:invalid button {
  opacity: 0.3;
  pointer-events: none;
}

input,
textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
  padding: 0.25em 0.5em;
}

button {
  width: 100%;
  border: thin solid darkgrey;
  font-size: 1.25em;
  background-color: darkgrey;
  color: white;
}
```

#### Result

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

The color red is commonly used to indicate invalid input. People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0
Notes
-----

### Radio buttons

If any one of the radio buttons in a group is `required`, the `:invalid` pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their `name` attribute.)

### Gecko defaults

By default, Gecko does not apply a style to the `:invalid` pseudo-class. However, it does apply a style (a red "glow" using the `box-shadow` property) to the `:user-invalid` pseudo-class, which applies in a subset of cases for `:invalid`.

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

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

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

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

See also
--------

* Other validation-related pseudo-classes: `:required`, `:optional`, `:valid`
* Related Mozilla pseudo-classes: `:user-invalid`, `:-moz-submit-invalid`
* Form data validation
* Accessing the validity state from JavaScript


var() - CSS: Cascading Style Sheets

var()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
The **`var()`** CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.

Try it
------

The `var()` function cannot be used in property names, selectors or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

Syntax
------

```css
/\* Simple usage \*/
var(--custom-prop);

/\* With fallback \*/
var(--custom-prop,);  /\* empty value as fallback \*/
var(--custom-prop, initial); /\* initial value of the property as fallback \*/
var(--custom-prop, #FF0000);
var(--custom-prop, var(--default-value));
var(--custom-prop, var(--default-value, red));
```

The first argument to the function is the name of the custom property to be substituted. An optional second argument to the function serves as a fallback value. If the custom property referenced by the first argument is invalid, the function uses the second value.

The syntax of the fallback, like that of custom properties, allows commas. For example, `var(--foo, red, blue)` defines a fallback of `red, blue`; that is, anything between the first comma and the end of the function is considered a fallback value.

### Values

`<custom-property-name>`

A custom property's name represented by an identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.

`<declaration-value>`

The custom property's fallback value, which is used in case the custom property is invalid in the used context. This value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e. `)`, `]`, or `}`, top-level semicolons, or exclamation marks. The fallback value can itself be a custom property using the `var()` syntax.

**Note:** `var(--a,)` is valid, specifying that if the `--a` custom property is invalid or missing, the `var()` should be replaced with nothing.

### Formal syntax
```

<var()> =
  var( <custom-property-name> , <declaration-value>? )

```

Examples
--------

### Using a custom property set on :root

#### CSS

```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```

#### Result

Here, the value of the `background-color` property has been set via the custom property `--main-bg-color`. So the background color of the HTML body will be pink.

### Using a custom property before it is set

#### CSS

```css
body {
  background-color: var(--main-bg-color);
}

:root {
  --main-bg-color: pink;
}
```

#### Result

In this example, the background color of the HTML body will be pink even though the custom property is set later.

### Using a custom property set in another file

#### HTML

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="1.css" />
    <link rel="stylesheet" href="2.css" />
  </head>
  <body></body>
</html>
```

#### CSS

```css
/\* 1.css \*/
body {
  background-color: var(--main-bg-color);
}
```

```css
/\* 2.css \*/
:root {
  --main-bg-color: pink;
}
```

#### Result

The background color of the HTML body will be pink in this case even though the custom property is declared in another file.

### Custom properties with fallbacks for use when the property has not been set

#### HTML

```html
<div class="component">
  <h1 class="header">Header</h1>
  <p class="text">Text</p>
</div>
```

#### CSS

```css
/\* In the component's style: \*/
.component .header {
  /\* header-color isn't set, and so remains blue, the fallback value \*/
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/\* In the larger application's style: \*/
.component {
  --text-color: #080;
}
```

#### Result

Since `--header-color` isn't set, the text "Header" will be blue, the fallback value.

### Using a custom property as a fallback

#### CSS

```css
:root {
  --backup-bg-color: teal;
}

body {
  background-color: var(--main-bg-color, var(--backup-bg-color, white));
}
```

#### Result

Since `--main-bg-color` isn't set, the body's `background-color` will fall back to `--backup-bg-color`, which is teal.

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

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |

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

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

See also
--------

* `env(…)` – read‑only environment variables controlled by the user‑agent.
* Using CSS custom properties (variables)
* `@property` at-rule
* CSS custom properties for cascading variables module


border-inline-end-style - CSS: Cascading Style Sheets

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

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

Try it
------

Syntax
------

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

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

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

### Values

`<'border-style'>`

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

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

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

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

border-inline-end-style =
  <line-style>

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

```

Examples
--------

### Setting inline-end-style

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-end-style: dashed;
}
```

#### Results

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

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

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

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

See also
--------

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


text-transform - CSS: Cascading Style Sheets

text-transform
==============

The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.

Try it
------

The `text-transform` property takes into account language-specific case mapping rules such as the following:

* In Turkic languages, like Turkish (`tr`), Azerbaijani (`az`), Crimean Tatar (`crh`), Volga Tatar (`tt`), and Bashkir (`ba`), there are two kinds of `i`, with and without the dot, and two case pairings: `i`/`İ` and `ı`/`I`.
* In German (`de`), the `ß` becomes `SS` in uppercase.
* In Dutch (`nl`), the `ij` digraph becomes `IJ`, even with `text-transform: capitalize`, which only puts the first letter of a word in uppercase.
* In Greek (`el`), vowels lose their accent when the whole word is in uppercase (`ά`/`Α`), except for the disjunctive eta (`ή`/`Ή`). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (`άι`/`ΑΪ`).
* In Greek (`el`), the lowercase sigma character has two forms: `σ` and `ς`. `ς` is used only when sigma terminates a word. When applying `text-transform: lowercase` to an uppercase sigma (`Σ`), the browser needs to choose the right lowercase form based on context.
* in Irish (`ga`), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example `text-transform: uppercase` will change `ar aon tslí` to `AR AON tSLÍ` and not, as one might expect, `AR AON TSLÍ` (Firefox only). In some cases, a hyphen is also removed upon uppercasing: `an t-uisce` transforms to `AN tUISCE` (and the hyphen is correctly reinserted by `text-transform: lowercase`).

The language is defined by the `lang` HTML attribute or the `xml:lang` XML attribute.

**Note:** Support for language-specific cases varies between browsers, so check the browser compatibility table.

Syntax
------

```css
/\* Keyword values \*/
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

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

`capitalize`

Is a keyword that converts the first *letter* of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text). A letter is defined as a character that is part of Unicode's Letter or Number general categories
Experimental
; thus, any punctuation marks or symbols at the beginning of a word are ignored.

**Note:** Authors should not expect `capitalize` to follow language-specific title casing conventions (such as skipping articles in English).

**Note:** The `capitalize` keyword was under-specified in CSS 1 and CSS 2.1. This resulted in differences between browsers in the way the first letter was calculated (Firefox considered `-` and `_` as letters, but other browsers did not. Both Webkit and Gecko incorrectly considered letter-based symbols like `ⓐ` to be real letters.) By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The `capitalize` line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior.

`uppercase`

Is a keyword that converts all characters to uppercase.

`lowercase`

Is a keyword that converts all characters to lowercase.

`none`

Is a keyword that prevents the case of all characters from being changed.

`full-width`

Is a keyword that forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

`full-size-kana`

Generally used for `<ruby>` annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.

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

Large sections of text set with a `text-transform` value of `uppercase` may be difficult for people with cognitive concerns such as Dyslexia to read.

* MDN Understanding WCAG, Guideline 1.4 explanations
* W3C Understanding WCAG 2.1
Formal definition
-----------------

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

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

text-transform =
  none                                                |
  [ capitalize | uppercase | lowercase ] || full-width || full-size-kana  |
  math-auto

```

Examples
--------

### Example using "none"

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: none;
}
strong {
  float: right;
}
```

This demonstrates no text transformation.

### Example using "capitalize" (general)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

This demonstrates text capitalization.

### Example using "capitalize" (punctuation)

```html
<p>
  Initial String
  <strong
 >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
 >
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

This demonstrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

### Example using "capitalize" (Symbols)

```html
<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

### Example using "capitalize" (Dutch ij digraph)

```html
<p>
  Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span lang="nl"
 >The Dutch word: "ijsland" starts with a digraph.</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

This demonstrates how the Dutch *ij* digraph must be handled like one single letter.

### Example using "uppercase" (general)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}
```

This demonstrates transforming the text to uppercase.

### Example using "uppercase" (Greek vowels)

```html
<p>
  Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
 >
</p>
```

```css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}
```

This demonstrates how Greek vowels except disjunctive *eta* should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.

### Example using "lowercase" (general)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

This demonstrates transforming the text to lowercase.

### Example using "lowercase" (Greek Σ)

```html
<p>
  Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

This demonstrates how the Greek character sigma (`Σ`) is transformed into the regular lowercase sigma (`σ`) or the word-final variant (`ς`), according the context.

### Example using "lowercase" (Lithuanian)

```html
<p>
  Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

This demonstrates how the Lithuanian letters `Ĩ` and `J́` retain their dot when transformed to lowercase.

### Example using "full-width" (general)

```html
<p>
  Initial String
  <strong
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
 >
</p>
<p>
  text-transform: full-width
  <strong
 ><span
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}
```

Some characters exist in two formats: normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.

### Example using "full-width" (Japanese half-width katakana)

```html
<p>
  Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>
```

```css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}
```

The Japanese half-width katakana was used to represent katakana in 8-bit character codes. Unlike regular (full-width) katakana characters, a letter with dakuten (voiced sound mark) is represented as two code points, the body of letter and dakuten. The `full-width` combines these into a single code point when converting these characters into full-width.

### Example using "full-size-kana"

```html
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
</p>
```

```css
p:nth-of-type(2) {
  text-transform: full-size-kana;
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-transform |

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

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

See also
--------

* `font-variant`


font-variant-caps - CSS: Cascading Style Sheets

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

The **`font-variant-caps`** CSS property controls the use of alternate glyphs used for small or petite capitals or for titling.

Try it
------

When a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. If petite capital glyphs are not available, they are rendered using small capital glyphs. If these are not present, the browser synthesizes them from the uppercase glyphs.

Fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. However, small capital glyphs are never synthesized for caseless characters.

### Language-specific rules

This property accounts for language-specific case mapping rules. For example:

* In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of `i` (one with the dot, one without) and two case pairings: `i`/`İ` and `ı`/`I`.
* In German (de), the `ß` may become `ẞ` (U+1E9E) in uppercase.
* In Greek (el), vowels lose their accent when the whole word is in uppercase (`ά`/`Α`), except for the disjunctive eta (`ή`/`Ή`). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (`άι`/`ΑΪ`).
Syntax
------

```css
/\* Keyword values \*/
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

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

The `font-variant-caps` property is specified using a single keyword value from the list below. In each case, if the font doesn't support the OpenType value, then it synthesizes the glyphs.

### Values

`normal`

Deactivates of the use of alternate glyphs.

`small-caps`

Enables display of small capitals (OpenType feature: `smcp`). Small-caps glyphs typically use the form of uppercase letters but are displayed using the same size as lowercase letters.

`all-small-caps`

Enables display of small capitals for both upper and lowercase letters (OpenType features: `c2sc`, `smcp`).

`petite-caps`

Enables display of petite capitals (OpenType feature: `pcap`).

`all-petite-caps`

Enables display of petite capitals for both upper and lowercase letters (OpenType features: `c2pc`, `pcap`).

`unicase`

Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: `unic`).

`titling-caps`

Enables display of titling capitals (OpenType feature: `titl`). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

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

Large sections of text set with a `font-variant` value of `all-small-caps` or `all-petite-caps` may be difficult for people with cognitive concerns such as Dyslexia to read.

* MDN Understanding WCAG, Guideline 1.4 explanations
* W3C Understanding WCAG 2.1
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-caps =
  normal           |
  small-caps       |
  all-small-caps   |
  petite-caps      |
  all-petite-caps  |
  unicase          |
  titling-caps

```

Examples
--------

### Setting the small-caps font variant

#### HTML

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

#### CSS

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

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-caps-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-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`


mod() - CSS: Cascading Style Sheets

mod()
=====

The **`mod()`** CSS function returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (`%`). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor.

>
> For example, the CSS `mod(21, -4)` function returns the remainder of `-1`. When dividing 21 by -4, the result is 5 with a remainder of -1. The full calculation is `21 / -4 = -4 * 5 - 1`.
>
>
>

Syntax
------

```css
/\* Unitless <number> \*/
line-height: mod(7, 2); /\* 1 \*/
line-height: mod(14, 5); /\* 4 \*/
line-height: mod(3.5, 2); /\* 1.5 \*/

/\* Unit based <percentage> and <dimension> \*/
margin: mod(15%, 2%); /\* 1% \*/
margin: mod(18px, 4px); /\* 2px \*/
margin: mod(19rem, 5rem); /\* 4rem \*/
margin: mod(29vmin, 6vmin); /\* 5vmin \*/
margin: mod(1000px, 29rem); /\* 72px - if root font-size is 16px \*/

/\* Negative/positive values \*/
rotate: mod(100deg, 30deg); /\* 10deg \*/
rotate: mod(135deg, -90deg); /\* -45deg \*/
rotate: mod(-70deg, 20deg); /\* 10deg \*/
rotate: mod(-70deg, -15deg); /\* -10deg \*/

/\* Calculations \*/
scale: mod(10 * 2, 1.7); /\* 1.3 \*/
rotate: mod(10turn, 18turn / 3); /\* 4turn \*/
transition-duration: mod(20s / 2, 3000ms * 2); /\* 4s \*/
```

### Parameter

The `mod(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, number, dimension, or `<percentage>`, for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as `<length>`, `<angle>`, `<time>`, or `<frequency>` to be valid.

`dividend`

A calculation that resolves to a `<number>`, `<dimension>`, or `<percentage>` representing the dividend.

`divisor`

A calculation that resolves to a `<number>`, `<dimension>`, or `<percentage>` representing the divisor.

### Return value

Returns a `<number>`, `<dimension>`, or `<percentage>` (corresponds to the parameters' type) representing the modulus, that is, the operation left over.

* If `divisor` is `0`, the result is `NaN`.
* If `dividend` is `infinite`, the result is `NaN`.
* If `divisor` is positive the result is positive (`0⁺`), and if `divisor` is negative the result is negative (`0⁻`).
### Formal syntax
```

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

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

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

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

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

```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # funcdef-mod |

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

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

See also
--------

* `round()`
* `rem()`


direction - CSS: Cascading Style Sheets

direction
=========

**Warning:** Where possible, authors are encouraged to avoid using the `direction` CSS property and use the HTML `dir` global attribute instead.

The **`direction`** CSS property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).

Try it
------

Note that text direction is usually defined within a document (e.g., with HTML's `dir` attribute) rather than through direct use of the `direction` property.

The property sets the base text direction of block-level elements and the direction of embeddings created by the `unicode-bidi` property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.

Unlike the `dir` attribute in HTML, the `direction` property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

The `direction` and `unicode-bidi` properties are the two only properties which are not affected by the `all` shorthand property.

Syntax
------

```css
/\* Keyword values \*/
direction: ltr;
direction: rtl;

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

### Values

`ltr`

Text and other elements go from left to right. This is the default value.

`rtl`

Text and other elements go from right to left.

For the `direction` property to have any effect on inline-level elements, the `unicode-bidi` property's value must be `embed` or `override`.

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

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

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

direction =
  ltr  |
  rtl

```

Examples
--------

### Setting right-to-left direction

In the example below are two strings of text, both which are displaying using `direction: rtl`. While the Arabic text is displayed correctly with this setting, the English text now has a full stop in an unusual location.

```css
blockquote {
  direction: rtl;
  width: 300px;
}
```

```html
<blockquote>
  <p>This paragraph is in English but incorrectly goes right to left.</p>
  <p></p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
  <p></p>
</blockquote>
```

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

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

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

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

See also
--------

* `unicode-bidi`
* `writing-mode`
* The HTML `dir` global attribute


@page - CSS: Cascading Style Sheets

@page
=====

The **`@page`** at-rule is a CSS at-rule used to modify different aspects of printed pages. It targets and modifies the page's dimensions, orientation, and margins. The `@page` at-rule can be used to target all pages in a print-out or a subset using its various pseudo-classes.

Syntax
------

```css
/\* Targets all the pages \*/
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/\* Targets all even-numbered pages \*/
@page :left {
  margin-top: 4in;
}

/\* Targets all odd-numbered pages \*/
@page :right {
  size: 11in;
  margin-top: 4in;
}

/\* Targets all selectors with `page: wide;` set \*/
@page wide {
  size: a4 landscape;
}

@page {
  /\* margin box at top right showing page number \*/
  @top-right {
    content: "Page " counter(pageNumber);
  }
}
```

### Page properties

The `@page` at-rule can contain only page descriptors and margin at-rules. The following descriptors have been implemented by at least one browser:

`margin`

Specifies the page margins. Individual margin properties `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` can also be used.

`page-orientation`

Specifies the orientation of the page. This does not affect the layout of the page; the rotation is applied after the layout in the output medium.

`size`

Specifies the target size and orientation of the page box's containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.

The specification mentions following CSS properties to be applicable to page boxes via @page at-rule. But these have *not been supported* by any user agent yet.

Remaining page properties

| Feature | CSS properties |
| --- | --- |
| bidi properties | direction |
| background properties | background-color |
|  | background-image |
|  | background-repeat |
|  | background-attachment |
|  | background-position |
|  | background |
| border properties | border-top-width |
|  | border-right-width |
|  | border-bottom-width |
|  | border-left-width |
|  | border-width |
|  | border-top-color |
|  | border-right-color |
|  | border-bottom-color |
|  | border-left-color |
|  | border-color |
|  | border-top-style |
|  | border-right-style |
|  | border-bottom-style |
|  | border-left-style |
|  | border-short-style |
|  | border-top |
|  | border-right |
|  | border-bottom |
|  | border-left |
|  | border |
| counter properties | counter-reset |
|  | counter-increment |
| color | color |
| font properties | font-family |
|  | font-size |
|  | font-style |
|  | font-variant |
|  | font-weight |
|  | font |
| height properties | height |
|  | min-height |
|  | max-height |
| line height | line-height |
| margin properties | margin-top |
|  | margin-right |
|  | margin-bottom |
|  | margin-left |
|  | margin |
| outline properties | outline-width |
|  | outline-style |
|  | outline-color |
|  | outline |
| padding properties | padding-top |
|  | padding-right |
|  | padding-bottom |
|  | padding-left |
|  | padding |
| quotes | quotes |
| text properties | letter-spacing |
|  | text-align |
|  | text-decoration |
|  | text-indent |
|  | text-transform |
|  | white-space |
|  | word-spacing |
| visibility | visibility |
| width properties | width |
|  | min-width |
|  | max-width |

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

The @page rule defines properties of the page box. The `@page` at-rule can be accessed via the CSS object model interface `CSSPageRule`.

**Note:** The W3C is discussing how to handle viewport-related `<length>` units, `vh`, `vw`, `vmin`, and `vmax`. Meanwhile do not use them within a `@page` at-rule.

### Related properties

The `@page` at-rule, allows the user to assign a name to the rule, which is then called in a declaration using the `page` property.

`page`

Allows a selector to use a user defined **named page**

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

@page =
  @page <page-selector-list>? { <declaration-rule-list> }

<page-selector-list> =
  <page-selector>#

<page-selector> =
  [ <ident-token>? <pseudo-page>\* ]!

<pseudo-page> =
  ':' [ left | right | first | blank ]

```

Where the `<page-body>` includes:

* page-properties
* page-margin properties

and `<pseudo-selector>` represents these pseudo-classes:

* `:blank`
* `:first`
* `:left`
* `:right`
Margin at-rules
---------------

**Warning:** The margin at-rules have not been implemented by any user agent (updated: August 2023).

The margin at-rules are used inside of the `@page` at-rule. They each target a different section of the document printed page, styling the area of the printed page based on the property values set in the style block:

```css
@page {
  @top-left {
    /\* page-margin-properties \*/
  }
}
```

**`@top-left`** targets the top-left of the document and applies the changes based on the page-margin-properties set.

Other margin-at rules include:

```css
@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom
```

### Page-margin properties

The page-margin properties are the set of CSS properties can be set in any individual margin at-rule. They include:

Page-margin properties

| Feature | CSS properties |
| --- | --- |
| bidi properties | direction |
| background properties | background-color |
|  | background-image |
|  | background-repeat |
|  | background-attachment |
|  | background-position |
|  | background |
| border properties | border-top-width |
|  | border-right-width |
|  | border-bottom-width |
|  | border-left-width |
|  | border-width |
|  | border-top-color |
|  | border-right-color |
|  | border-bottom-color |
|  | border-left-color |
|  | border-color |
|  | border-top-style |
|  | border-right-style |
|  | border-bottom-style |
|  | border-left-style |
|  | border-short-style |
|  | border-top |
|  | border-right |
|  | border-bottom |
|  | border-left |
|  | border |
| counter properties | counter-reset |
|  | counter-increment |
| content | content |
| color | color |
| font properties | font-family |
|  | font-size |
|  | font-style |
|  | font-variant |
|  | font-weight |
|  | font |
| height properties | height |
|  | min-height |
|  | max-height |
| line height | line-height |
| margin properties | margin-top |
|  | margin-right |
|  | margin-bottom |
|  | margin-left |
|  | margin |
| outline properties | outline-width |
|  | outline-style |
|  | outline-color |
|  | outline |
| padding properties | padding-top |
|  | padding-right |
|  | padding-bottom |
|  | padding-left |
|  | padding |
| quotes | quotes |
| text properties | letter-spacing |
|  | text-align |
|  | text-decoration |
|  | text-indent |
|  | text-transform |
|  | white-space |
|  | word-spacing |
| vertical alignment | vertical-align |
| visibility | visibility |
| width properties | width |
|  | min-width |
|  | max-width |
| z-index | z-index |

Named pages
-----------

Named pages enable performing per-page layout and adding page-breaks in a declarative manner when printing.

Named pages can be applied using the `page` property. This allows the user to create different page configurations for use in print layouts.

An example of this can be found on the `page` examples.

Examples
--------

### Using the size property to change the page orientation

This example shows how to split the `<section>`s into individual pages in `landscape` format with each page having a 20% margin when printed.

#### HTML

```html
<button>Print Webpage</button>
<article>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
</article>
```

#### CSS

```css
@page {
  size: landscape;
  margin: 20%;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}
```

```
body {
  font-family: "Helvetica", sans-serif;
  background-color: silver;
}

article {
  width: 100%;
}

section {
  display: grid;
  background-color: white;
  border-radius: 0.6rem;
  justify-items: center;
  padding: 1rem;
  width: 50%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 0 auto;
  margin-block-end: 1.5rem;
  border: 1px dashed;
}
```

#### JavaScript

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

button.addEventListener("click", () => {
  window.print();
});
```

#### Result

 Clicking the print button will launch a print dialog with the html sections split into individual pages.

### @page pseudo-class examples

Please refer to the various pseudo-classes of `@page` for examples.

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

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

See also
--------

* The `@page` `size` descriptor
* The `page` property
* See the [META] CSS Paged Media Module Level 3 ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)
* CSS paged media module
* Paged.js: W3C paged media polyfill