animation-name - CSS: Cascading Style Sheets

animation-name
==============

The **`animation-name`** CSS property specifies the names of one or more `@keyframes` at-rules that describe the animation to apply to an element. Multiple `@keyframe` at-rules are specified as a comma-separated list of names. If the specified name does not match any `@keyframe` at-rule, no properties are animated.

Try it
------

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

Syntax
------

```css
/\* Single animation \*/
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/\* Multiple animations \*/
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

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

### Values

`none`

A special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade.

`<custom-ident>`

A name identifying the animation. This identifier is composed of a combination of case-sensitive letters `a` to `z`, numbers `0` to `9`, underscores (`_`), and/or dashes (`-`). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be `none`, `unset`, `initial`, or `inherit`.

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

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

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

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

animation-name =
  [ none | <keyframes-name> ]#

<keyframes-name> =
  <custom-ident>  |
  <string>

```

Examples
--------

### Naming an animation

This animation has an `animation-name` of `rotate`.

#### 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;
}

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

#### Result

Hover over the rectangle to start the animation.

See CSS animations for examples.

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

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

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-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-play-state`, `animation-timeline`, `animation-timing-function`


:indeterminate - CSS: Cascading Style Sheets

:indeterminate
==============

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

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

* Learn more
* See full compatibility
* Report feedback
The **`:indeterminate`** CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an `indeterminate` state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and `<progress>` elements with no `value` attribute.

```css
/\* Selects any <input> whose state is indeterminate \*/
input:indeterminate {
  background: lime;
}
```

Elements targeted by this selector are:

* `<input type="checkbox">` elements whose `indeterminate` property is set to `true` by JavaScript
* `<input type="radio">` elements, when all radio buttons with the same `name` value in the form are unchecked
* `<progress>` elements in an indeterminate state
Syntax
------
```

:indeterminate
```

Examples
--------

### Checkbox & radio button

This example applies special styles to the labels associated with indeterminate form fields.

#### HTML

```html
<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>
```

#### CSS

```css
input:indeterminate + label {
  background: lime;
}
```

```
fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}
```

#### JavaScript

```js
const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```

#### Result

### Progress bar

#### HTML

```html
<progress></progress>
```

#### CSS

```css
progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}
```

#### Result

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

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

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

See also
--------

* Web forms — Working with user data
* Styling web forms
* The `<input type="checkbox">` element's `indeterminate` property
* `<input>` and the `HTMLInputElement` interface which implements it.
* The `:checked` CSS selector lets you style checkboxes based on whether they're checked or not


::selection - CSS: Cascading Style Sheets

::selection
===========

The **`::selection`** CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

Try it
------

Allowable properties
--------------------

Only certain CSS properties can be used with `::selection`:

* `color`
* `background-color`
* `text-decoration` and its associated properties
* `text-shadow`
* `-webkit-text-stroke-color`, `-webkit-text-fill-color` and `-webkit-text-stroke-width`

In particular, `background-image` is ignored.

Syntax
------

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

Examples
--------

### HTML

```html
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
```

### CSS
```

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}
```

```css
/\* Make selected text gold on a red background \*/
::selection {
  color: gold;
  background-color: red;
}

/\* Make selected text in a paragraph white on a blue background \*/
p::selection {
  color: white;
  background-color: blue;
}
```

### Result

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

**Don't override selected text styles for purely aesthetic reasons** — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

If overridden, it is important to ensure that the **contrast ratio** between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.

Color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. To meet current Web Content Accessibility Guidelines (WCAG), text content must have a contrast ratio of **4.5:1**, or 3:1 for larger text such as headings. (WCAG defines large text as between `18.66px` and `24px` and bold, or `24px` or larger.)

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

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

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

See also
--------

* `pointer-events` - control which events are active on the element


:read-write - CSS: Cascading Style Sheets

:read-write
===========

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

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

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

Try it
------

Syntax
------

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

Examples
--------

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

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

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

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

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

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

### Styling read-write non-form controls

This selector doesn't just select `<input>`/`<textarea>` elements — it will select *any* element that can be edited by the user, such as a `<p>` element with `contenteditable` set on it.

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

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

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

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

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

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

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

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

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

See also
--------

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


tab-size - CSS: Cascading Style Sheets

tab-size
========

The **`tab-size`** CSS property is used to customize the width of tab characters (U+0009).

Try it
------

Syntax
------

```css
/\* <integer> values \*/
tab-size: 4;
tab-size: 0;

/\* <length> values \*/
tab-size: 10px;
tab-size: 2em;

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

### Values

`<integer>`

A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.

`<length>`

The width of tabs. Must be nonnegative.

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

|  |  |
| --- | --- |
| Initial value | `8` |
| Applies to | block containers |
| Inherited | yes |
| Computed value | the specified integer or an absolute length |
| Animation type | a length |

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

tab-size =
  <number [0,∞]>  |
  <length [0,∞]>

```

Examples
--------

### Expanding by character count

```css
pre {
  tab-size: 4; /\* Set tab size to 4 characters wide \*/
}
```

### Collapse tabs

```css
pre {
  tab-size: 0; /\* Remove indentation \*/
}
```

### Comparing to the default size

This example compares a default tab size with a custom tab size. Note that `white-space` is set to `pre` to prevent the tabs from collapsing.

#### HTML

```html
<p>no tab</p>
<p>	default tab size of 8 characters wide</p>
<p class="custom">	custom tab size of 3 characters wide</p>
<p>   3 spaces, equivalent to the custom tab size</p>
```

#### CSS

```css
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
}
```

#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

See also
--------

* `white-space`


CSS cascade and inheritance - CSS: Cascading Style Sheets

CSS cascade and inheritance
===========================

The **CSS cascade and inheritance** module defines the rules for assigning values to properties by way of cascading and inheritance. This module specifies the rules for finding the specified value for all properties on all elements.

One of the fundamental design principles of CSS is cascading of rules. It allows several style sheets to influence the presentation of a document. CSS property-value declarations define how a document is rendered. Multiple declarations may set different values for the same element and property combination, but only one value can be applied to any CSS property. The CSS cascade module defines how these conflicts are resolved.

The opposite also occurs. Sometimes there are no declarations defining the value of a property. The CSS cascade module defines how these missing values should be set via inheritance or from the property's initial value.

**Note:** The rules for finding the specified values in the page context and its margin boxes are described in the CSS page module.

Reference
---------

### Properties

* `all`
### At-rules

* `@import`
* `@layer`
### Keywords

* `initial`
* `inherit`
* `revert`
* `revert-layer`
Experimental
* `unset`
* `!important` flag
### Interfaces

* `CSSLayerBlockRule`
* `CSSGroupingRule`
* `CSSLayerStatementRule`
* `CSSRule`
### Key concepts and definitions

* `Specificity`
* Cascade origin and importance
* Values
    + actual value
    + computed value
    + initial value
    + resolved value
    + specified value
    + used value
* Origin types
    + user-agent origin
    + author origin
    + user origin
* Declaring layers
    + named layer
    + anonymous layer
* Glossary: style origin
Guides
------

Introducing the CSS Cascade

Guide to the cascade algorithm that defines how user agents combine property values originating from different sources.

Learn: Cascade, specificity, and inheritance

The most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.

Learn: Cascade layers

Introduction to cascade layers, a more advanced feature that builds on the fundamental concepts of the CSS cascade and CSS specificity.

CSS inheritance

A guide to CSS inheritance.

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

* Element-attached styles
* Inline styles and the cascade
* Conditional rules for @imports
Specifications
--------------

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4  |
| CSS Cascading and Inheritance Level 5  |

See also
--------

* CSS selectors module
* CSS pseudo-elements module
* CSS paged media module
* CSS conditional rules module
* CSS nesting module
* Shorthand properties


:blank - CSS: Cascading Style Sheets

:blank
======

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

**Note:** The `:blank` selector is considered at risk, as the CSSWG keeps changing it.

See CSSWG issue #1967.

The **`:blank`** CSS pseudo-class selects empty user input elements (e.g. `<input>` or `<textarea>`).

Syntax
------

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

Examples
--------

### Simple :blank example

In eventual supporting browsers, the `:blank` pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.

#### HTML

```html
<textarea></textarea>
```

#### CSS

```css
textarea:blank {
  border: 3px solid red;
}
```

#### Result

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

| Specification |
| --- |
| Selectors Level 4 # blank-pseudo |

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

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

See also
--------

* `:empty`


border - CSS: Cascading Style Sheets

border
======

The **`border`** shorthand CSS property sets an element's border. It sets the values of `border-width`, `border-style`, and `border-color`.

Try it
------

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

This property is a shorthand for the following CSS properties:

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

```css
/\* style \*/
border: solid;

/\* width | style \*/
border: 2px dotted;

/\* style | color \*/
border: outset #f33;

/\* width | style | color \*/
border: medium dashed green;

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

The `border` property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

**Note:** The border will be invisible if its style is not defined. This is because the style defaults to `none`.

### Values

`<line-width>`

Sets the thickness of the border. Defaults to `medium` if absent. See `border-width`.

`<line-style>`

Sets the style of the border. Defaults to `none` if absent. See `border-style`.

`<color>`

Sets the color of the border. Defaults to `currentcolor` if absent. See `border-color`.

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

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, `border` cannot be used to specify a custom value for `border-image`, but instead sets it to its initial value, i.e., `none`.

The `border` shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand `border-width`, `border-style`, and `border-color` properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., `border-top` ) and logical (e.g., `border-block-start`) border properties.

### Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

* Outlines never take up space, as they are drawn outside of an element's content.
* According to the spec, outlines don't have to be rectangular, although they usually are.
Formal definition
-----------------

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

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

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

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

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

```

Examples
--------

### Setting a pink outset border

#### HTML

```html
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
```

#### CSS

```css
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}
```

#### Result

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

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

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

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

See also
--------

* `border-width`
* `border-style`
* `border-color`
* `outline`
* Backgrounds and borders
* Learn CSS: Backgrounds and borders


grid-auto-flow - CSS: Cascading Style Sheets

grid-auto-flow
==============

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

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

* Learn more
* See full compatibility
* Report feedback
The **`grid-auto-flow`** CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/\* Global values \*/
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: revert;
grid-auto-flow: revert-layer;
grid-auto-flow: unset;
```

This property may take one of two forms:

* a single keyword: one of `row`, `column`, or `dense`.
* two keywords: `row dense` or `column dense`.
### Values

`row`

Items are placed by filling each row in turn, adding new rows as necessary. If neither `row` nor `column` is provided, `row` is assumed.

`column`

Items are placed by filling each column in turn, adding new columns as necessary.

`dense`

"dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

If it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items.

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

|  |  |
| --- | --- |
| Initial value | `row` |
| Applies to | grid containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

grid-auto-flow =
  [ row | column ]  ||
  dense

```

Examples
--------

### Setting grid auto-placement

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" />
<label for="dense">dense</label>
```

#### CSS

```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /\* or 'row', 'row dense', 'column dense' \*/
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
```

```
function changeGridAutoFlow() {
  const grid = document.getElementById("grid");
  const direction = document.getElementById("direction");
  const dense = document.getElementById("dense");
  let gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}

const selectElem = document.querySelector("select");
const inputElem = document.querySelector("input");
selectElem.addEventListener("change", changeGridAutoFlow);
inputElem.addEventListener("change", changeGridAutoFlow);
```

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |

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

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

See also
--------

* Related CSS properties: `grid-auto-rows`, `grid-auto-columns`, `grid`
* Grid Layout Guide: *Auto-placement in grid layout*
* Video tutorial: *Introducing Grid auto-placement and order*


<length> - CSS: Cascading Style Sheets

<length>
========

The **`<length>`** CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as `width`, `height`, `margin`, `padding`, `border-width`, `font-size`, and `text-shadow`.

**Note:** Although `<percentage>` values are usable in some of the same properties that accept `<length>` values, they are not themselves `<length>` values. See `<length-percentage>`.

Syntax
------

The `<length>` data type consists of a `<number>` followed by one of the units listed below. As with all CSS dimensions, there is no space between the number and the unit literal. Specifying the length unit is optional if the number is `0`.

**Note:** Some properties allow negative `<length>` values, while others do not.

The specified value of a length (*specified length*) is represented by its quantity and unit. The computed value of a length (*computed length*) is the specified length resolved to an absolute length, and its unit is not distinguished.

The `<length>` units can be relative or absolute. Relative lengths represent a measurement in terms of some other distance. Depending on the unit, this distance can be the size of a specific character, the line height, or the size of the viewport. Style sheets that use relative length units can more easily scale from one output environment to another.

**Note:** Child elements do not inherit the relative values as specified for their parent; they inherit the computed values.

The relative length units listed here are based on font and viewport.

### Relative length units based on font

Font lengths define the `<length>` value in terms of the size of a particular character or font attribute in the font currently in effect in an element or its parent.

**Note:** These units, especially `em` and `rem`, are often used to create scalable layouts, which maintain the vertical rhythm of the page even when the user changes the font size.

`cap`

Represents the "cap height" (nominal height of capital letters) of the element's `font`.

`ch`

 Represents the width or more precisely the advance measure of the glyph `0` (zero, the Unicode character U+0030) in the element's `font`.
 In cases where it is impossible or impractical to determine the measure of the `0` glyph, it must be assumed to be `0.5em` wide by `1em` tall.

`em`

Represents the calculated `font-size` of the element. If used on the `font-size` property itself, it represents the *inherited* font-size of the element.

`ex`

Represents the x-height of the element's `font`. In fonts with the `x` letter, this is generally the height of lowercase letters in the font; `1ex ≈ 0.5em` in many fonts.

`ic`

Equal to the used advance measure of the "水" glyph (CJK water ideograph, U+6C34), found in the font used to render it.

`lh`

Equal to the computed value of the `line-height` property of the element on which it is used, converted to an absolute length.

`rem`

Represents the `font-size` of the root element (typically `<html>`). When used within the root element `font-size`, it represents its initial value (a common browser default is `16px`, but user-defined preferences may modify this).

`rlh`

Equal to the computed value of the `line-height` property on the root element (typically `<html>`), converted to an absolute length. When used on the `font-size` or `line-height` properties of the root element, it refers to the properties' initial value.

### Relative length units based on viewport

The viewport-percentage length units are based on four different viewport sizes: small, large, dynamic, and default. The allowance for the different viewport sizes is in response to browser interfaces expanding and retracting dynamically and hiding and showing the content underneath.

**Small**

When you want the smallest possible viewport in response to browser interfaces expanding dynamically, you should use the small viewport size. The small viewport size allows the content you design to fill the entire viewport when browser interfaces are expanded. Choosing this size might also possibly leave empty spaces when browser interfaces retract.

For example, an element that is sized using viewport-percentage units based on the small viewport size, the element will fill the screen perfectly without any of its content being obscured when all the dynamic browser interfaces are shown. When those browser interfaces are hidden, however, there might be extra space visible around the element. Therefore, the small viewport-percentage units are "safer" to use in general, but might not produce the most attractive layout after a user starts interacting with the page.

The small viewport size is represented by the `sv` prefix and results in the `sv*` viewport-percentage length units. The sizes of the small viewport-percentage units are fixed, and therefore stable, unless the viewport itself is resized.

**Large**

When you want the largest possible viewport in response to browser interfaces retracting dynamically, you should use the large viewport size. The large viewport size allows the content you design to fill the entire viewport when browser interfaces are retracting. You need to be aware though that the content might get hidden when browser interfaces expand.

For example, on mobile phones where the screen real-estate is at a premium, browsers often hide part or all of the title and address bar after a user starts scrolling the page. When an element is sized using a viewport-percentage unit based on the large viewport size, the content of the element will fill the entire visible page when these browser interfaces are hidden. However, when these retractable browser interfaces are shown, they can hide the content that is sized or positioned using the *large* viewport-percentage units.

The large viewport unit is represented by the `lv` prefix and results in the `lv*` viewport-percentage units. The sizes of the large viewport-percentage units are fixed, and therefore stable, unless the viewport itself is resized.

**Dynamic**

When you want the viewport to be automatically sized in response to browser interfaces dynamically expanding or retracting, you can use the dynamic viewport size. The dynamic viewport size allows the content you design to fit exactly within the viewport, irrespective of the presence of dynamic browser interfaces.

The dynamic viewport unit is represented by the `dv` prefix and results in the `dv*` viewport-percentage units. The sizes of the dynamic viewport-percentage units are not stable, even when the viewport itself is unchanged.

**Note:** While the dynamic viewport size can give you more control and flexibility, using viewport-percentage units based on the dynamic viewport size can cause the content to resize while a user is scrolling a page. This can lead to degradation of the user interface and cause a performance hit.

**Default**

The default viewport size is defined by the browser. The behavior of the resulting viewport-percentage unit could be equivalent to the viewport-percentage unit based on the small viewport size, the large viewport size, an intermediate size between the two, or the dynamic viewport size.

**Note:** For example, a browser might implement the default viewport-percentage unit for height (`vh`) that is equivalent to the large viewport-percentage height unit (`lvh`). If so, this could obscure content on a full-page display while the browser interface is expanded.

Viewport-percentage lengths define `<length>` values in percentage relative to the size of the initial containing block, which in turn is based on either the size of the viewport or the page area, i.e., the visible portion of the document. When the height or width of the initial containing block is changed, the elements that are sized based on them are scaled accordingly. There is a viewport-percentage length unit variant corresponding to each of the viewport sizes, as described below.

**Note:** Viewport lengths are invalid in `@page` declaration blocks.

`vh`

Represents a percentage of the height of the viewport's initial containing block. `1vh` is 1% of the viewport height. For example, if the viewport height is `300px`, then a value of `70vh` on a property will be `210px`.

For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svh`, `lvh`, and `dvh`. `vh` represents the viewport-percentage length unit based on the browser default viewport size.

`vw`

Represents a percentage of the width of the viewport's initial containing block. `1vw` is 1% of the viewport width. For example, if the viewport width is `800px`, then a value of `50vw` on a property will be `400px`.

 For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svw`, `lvw`, and `dvw`.
 `vw` represents the viewport-percentage length unit based on the browser default viewport size.

`vmax`

Represents in percentage the largest of `vw` and `vh`.

 For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svmax`, `lvmax`, and `dvmax`.
 `vmax` represents the viewport-percentage length unit based on the browser default viewport size.

`vmin`

Represents in percentage the smallest of `vw` and `vh`.

 For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svmin`, `lvmin`, and `dvmin`.
 `vmin` represents the viewport-percentage length unit based on the browser default viewport size.

`vb`

Represents percentage of the size of the initial containing block, in the direction of the root element's block axis.

 For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svb`, `lvb`, and `dvb`, respectively.
 `vb` represents the viewport-percentage length unit based on the browser default viewport size.

`vi`

Represents a percentage of the size of the initial containing block, in the direction of the root element's inline axis.

 For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svi`, `lvi`, and `dvi`.
 `vi` represents the viewport-percentage length unit based on the browser default viewport size.

### Container query length units

 When applying styles to a container using container queries, you can use container query length units.
 These units specify a length relative to the dimensions of a query container.
 Components that use units of length relative to their container are more flexible to use in different containers without having to recalculate concrete length values.
 For more information, see Container queries.

`cqw`

Represents a percentage of the width of the query container. `1cqw` is 1% of the query container's width. For example, if the query container's width is `800px`, then a value of `50cqw` on a property will be `400px`.

`cqh`

Represents a percentage of the height of the query container. `1cqh` is 1% of the query container's height. For example, if the query container's height is `300px`, then a value of `10cqh` on a property will be `30px`.

`cqi`

Represents a percentage of the inline size of the query container. `1cqi` is 1% of the query container's inline size. For example, if the query container's inline size is `800px`, then a value of `50cqi` on a property will be `400px`.

`cqb`

Represents a percentage of the block size of the query container. `1cqb` is 1% of the query container's block size. For example, if the query container's block size is `300px`, then a value of `10cqb` on a property will be `30px`.

`cqmin`

Represents a percentage of the smaller value of either the query container's inline size or block size. `1cqmin` is 1% of the smaller value of either the query container's inline size or block size. For example, if the query container's inline size is `800px` and its block size is `300px`, then a value of `50cqmin` on a property will be `150px`.

`cqmax`

Represents a percentage of the larger value of either the query container's inline size or block size. `1cqmax` is 1% of the larger value of either the query container's inline size or block size. For example, if the query container's inline size is `800px` and its block size is `300px`, then a value of `50cqmax` on a property will be `400px`.

### Absolute length units

Absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. This is done by anchoring one of the units to a physical unit and then defining the others relative to it. The anchoring is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers.

For low-dpi devices, the unit `px` represents the physical *reference pixel*; other units are defined relative to it. Thus, `1in` is defined as `96px`, which equals `72pt`. The consequence of this definition is that on such devices, dimensions described in inches (`in`), centimeters (`cm`), or millimeters (`mm`) don't necessarily match the size of the physical unit with the same name.

For high-dpi devices, inches (`in`), centimeters (`cm`), and millimeters (`mm`) are the same as their physical counterparts. Therefore, the `px` unit is defined relative to them (1/96 of `1in`).

**Note:** Many users increase their user agent's default font size to make text more legible. Absolute lengths can cause accessibility problems because they are fixed and do not scale according to user settings. For this reason, prefer relative lengths (such as `em` or `rem`) when setting `font-size`.

`px`

One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for *printers* and *high-resolution screens*, one CSS pixel implies multiple device pixels. `1px` = `1in / 96`.

`cm`

One centimeter. `1cm` = `96px / 2.54`.

`mm`

One millimeter. `1mm` = `1cm / 10`.

`Q`

One quarter of a millimeter. `1Q` = `1cm / 40`.

`in`

One inch. `1in` = `2.54cm` = `96px`.

`pc`

One pica. `1pc` = `12pt` = `1in / 6`.

`pt`

One point. `1pt` = `1in / 72`.

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

When animated, values of the `<length>` data type are interpolated as real, floating-point numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the easing function associated with the animation.

Examples
--------

### Comparing different length units

The following example provides you with an input field in which you can enter a `<length>` value (e.g. `300px`, `50%`, `30vw`) to set the width of a result bar that will appear below it once you've pressed the `Enter` or the `Return` key.

This allows you to compare and contrast the effect of different length units.

#### HTML

```html
<div class="outer">
  <div class="input-container">
    <label for="length">Enter width:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>
```

#### CSS

```css
html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
}

.result {
  height: 20px;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}
```

#### JavaScript

```js
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});
```

#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # lengths |

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

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

See also
--------

* CSS values & units tutorial
* CSS values & units reference
* Box Model


line-height - CSS: Cascading Style Sheets

line-height
===========

The **`line-height`** CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

Try it
------

Syntax
------

```css
/\* Keyword value \*/
line-height: normal;

/\* Unitless values: use this number multiplied
by the element's font size \*/
line-height: 3.5;

/\* <length> values \*/
line-height: 3em;

/\* <percentage> values \*/
line-height: 34%;

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

The `line-height` property is specified as any one of the following:

* a `<number>`
* a `<length>`
* a `<percentage>`
* the keyword `normal`.
### Values

`normal`

Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly **`1.2`**, depending on the element's `font-family`.

`<number>` (unitless)

The used value is this unitless `<number>` multiplied by the element's own font size. The computed value is the same as the specified `<number>`. In most cases, **this is the preferred way** to set `line-height` and avoid unexpected results due to inheritance.

`<length>`

The specified `<length>` is used in the calculation of the line box height. Values given in **em** units may produce unexpected results (see example below).

`<percentage>`

Relative to the font size of the element itself. The computed value is this `<percentage>` multiplied by the element's computed font size. **Percentage** values may produce unexpected results (see the second example below).

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

Use a minimum value of `1.5` for `line-height` for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

W3C Understanding WCAG 2.1

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | refer to the font size of the element itself |
| Computed value | for percentage and length values, the absolute length, otherwise as specified |
| Animation type | either number or length |

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

line-height =
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>

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

```

Examples
--------

### Basic example

```css
/\* All rules below have the same resultant line height \*/

/\* number/unitless \*/
div {
  line-height: 1.2;
  font-size: 10pt;
}

/\* length \*/
div {
  line-height: 1.2em;
  font-size: 10pt;
}

/\* percentage \*/
div {
  line-height: 120%;
  font-size: 10pt;
}

/\* font shorthand \*/
div {
  font:
    10pt/1.2 Georgia,
    "Bitstream Charter",
    serif;
}
```

It is often more convenient to set `line-height` by using the `font` shorthand as shown above, but this requires the `font-family` property to be specified as well.

### Prefer unitless numbers for line-height values

This example shows why it is better to use `<number>` values instead of `<length>` values. We will use two `<div>` elements. The first, with the green border, uses a unitless `line-height` value. The second, with the red border, uses a `line-height` value defined in `em`s.

#### HTML

```html
<div class="box green">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  Length and percentage line-heights have poor inheritance behavior.
</div>

<div class="box red">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  Length and percentage line-heights have poor inheritance behavior
</div>

<!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
```

#### CSS

```css
.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # line-height-property |

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

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

See also
--------

* `font`, `font-size`


font-variant-ligatures - CSS: Cascading Style Sheets

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

The **`font-variant-ligatures`** CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: no-common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: no-discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: no-historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: contextual; /\* <contextual-alt-values> \*/
font-variant-ligatures: no-contextual; /\* <contextual-alt-values> \*/

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

The `font-variant-ligatures` property is specified as one of the keyword values listed below.

### Values

`normal`

This keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. The ligatures and forms activated depend on the font, language and kind of script. This is the default value.

`none`

This keyword specifies that all ligatures and contextual forms are disabled, even common ones.

*`<common-lig-values>`*

These values control the most common ligatures, like for `fi`, `ffi`, `th` or similar. They correspond to the OpenType values `liga` and `clig`. Two values are possible:

* `common-ligatures` activating these ligatures. Note that the keyword `normal` activates these ligatures.
* `no-common-ligatures` deactivating these ligatures.

*`<discretionary-lig-values>`*

These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values `dlig`. Two values are possible:

* `discretionary-ligatures` activating these ligatures.
* `no-discretionary-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.

*`<historical-lig-values>`*

These values control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values `hlig`. Two values are possible:

* `historical-ligatures` activating these ligatures.
* `no-historical-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.

*`<contextual-alt-values>`*

These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values `calt`. Two values are possible:

* `contextual` specifies that the contextual alternates are to be used. Note that the keyword `normal` usually activates these ligatures too.
* `no-contextual` prevents their use.

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-ligatures =
  normal                                              |
  none                                                |
  [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

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

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

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

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

```

Examples
--------

### Setting font ligatures and contextual forms

#### HTML

```html
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>
```

#### CSS

```css
p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}
```

#### Result

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

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

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

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

See also
--------

* `font-variant`
* `font-variant-caps`
* `font-variant-emoji`
* `font-variant-east-asian`
* `font-variant-numeric`
* `font-variant-position`
* CSS fonts module


-webkit-mask-position-y - CSS: Cascading Style Sheets

-webkit-mask-position-y
=======================

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

The `-webkit-mask-position-y` CSS property sets the initial vertical position of a mask image.

Syntax
------

```css
/\* Keyword values \*/
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

/\* <percentage> values \*/
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;

/\* <length> values \*/
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;

/\* Multiple values \*/
-webkit-mask-position-y:
  50px,
  25%,
  -3em;

/\* Global values \*/
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: revert;
-webkit-mask-position-y: revert-layer;
-webkit-mask-position-y: unset;
```

### Values

`<length-percentage>`

A length indicating the position of the top side of the image relative to the box's top padding edge. Percentages are calculated against the vertical dimension of the box padding area. A value of `0%` means the top edge of the image is aligned with the box's top padding edge and a value of `100%` means the bottom edge of the image is aligned with the box's bottom padding edge.

`top`

Equivalent to `0%`.

`bottom`

Equivalent to `100%`.

`center`

Equivalent to `50%`.

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

|  |  |
| --- | --- |
| Initial value | `0%` |
| Applies to | all elements |
| Inherited | no |
| Percentages | refer to the size of the box itself |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | discrete |

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

-webkit-mask-position-y =
  [ <length-percentage> | top | center | bottom ]#
```

Examples
--------

### Vertically positioning a mask image

```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 25%;
}
```

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

`-webkit-mask-position`, `-webkit-mask-position-x`, `-webkit-mask-origin`, `-webkit-mask-attachment`


-moz-image-region - CSS: Cascading Style Sheets

-moz-image-region
=================

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

For certain XUL elements and pseudo-elements that use an image from the `list-style-image` property, this property specifies a region of the image that is used in place of the whole image. This allows elements to use different pieces of the same image to improve performance.

The syntax is similar to the `clip` property. All four values are relative to the upper left corner of the image.

Syntax
------

```css
/\* Keyword value \*/
-moz-image-region: auto;

/\* <shape> value \*/
-moz-image-region: rect(0, 8px, 4px, 4px);

/\* Global values \*/
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;
```

### Values

`auto`

Automatically defines the region of the image to use.

`<shape>`

A shape defining the part of the image to use. The `rect()` function defines a rectangle to use as shape. Its parameters define the top, right, bottom, and left offsets of the edges of the image, in this order.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | XUL `<image>` elements and `:-moz-tree-image`, `:-moz-tree-twisty`, and `:-moz-tree-checkbox` pseudo-elements. **Note:** `-moz-image-region` only works with `<image>` elements where the icon is specified using `list-style-image`. It will not work with XUL `<image src="url" />`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

 -moz-image-region =
   <shape> | auto
```

Examples
--------

### Clipping an image

```css
#example-button {
  /\* display only the 4x4 area from the top left of this image \*/
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /\* use the 4x4 area to the right of the first for the hovered button \*/
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}
```

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-image-rect()`


:first-of-type - CSS: Cascading Style Sheets

:first-of-type
==============

The **`:first-of-type`** CSS pseudo-class represents the first element of its type among a group of sibling elements.

Try it
------

Syntax
------

```css
:first-of-type {
  /\* ... \*/
}
```

Examples
--------

### Styling the first paragraph

#### HTML

```html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
```

#### CSS

```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```

#### Result

### Nested elements

This example shows how nested elements can also be targeted. Note that the universal selector (`*`) is implied when no type selector is written.

#### HTML

```html
<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`.</div>
</article>
```

#### CSS

```css
article :first-of-type {
  background-color: pink;
}
```

#### Result

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

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

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

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

See also
--------

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


<angle-percentage> - CSS: Cascading Style Sheets

<angle-percentage>
==================

The **`<angle-percentage>`** CSS data type represents a value that can be either a `<angle>` or a `<percentage>`.

Where an `<angle-percentage>` is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a `calc()` expression.

Syntax
------

Refer to the documentation for `<angle>` and `<percentage>` for details of the individual syntaxes allowed by this type.

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

<angle-percentage> =
  <angle>       |
  <percentage>

```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

See also
--------

* CSS data types
* Using CSS gradients
* `conic-gradient()` and `repeating-conic-gradient()`


unicode-bidi - CSS: Cascading Style Sheets

unicode-bidi
============

The **`unicode-bidi`** CSS property, together with the `direction` property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The `unicode-bidi` property overrides this algorithm and allows the developer to control the text embedding.

Try it
------

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

**Warning:** This property is intended for Document Type Definition (DTD) designers. Web designers and similar authors **should not** override it.

Syntax
------

```css
/\* Keyword values \*/
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

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

### Values

`normal`

The element does not offer an additional level of embedding with respect to the bidirectional algorithm. For inline elements, implicit reordering works across element boundaries.

`embed`

If the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the `direction` property.

`bidi-override`

For inline elements this creates an override. For block container elements this creates an override for inline-level descendants not within another block container element. This means that inside the element, reordering is strictly in sequence according to the `direction` property; the implicit part of the bidirectional algorithm is ignored.

`isolate`

This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore *isolated* from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several `U+FFFC Object Replacement Character`, i.e. like an image.

`isolate-override`

This keyword applies the isolation behavior of the `isolate` keyword to the surrounding content and the override behavior of the `bidi-override` keyword to the inner content.

`plaintext`

 This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the `direction` property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.
 This value allows the display of data that is already formatted using a tool following the Unicode Bidirectional Algorithm.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements, though some values have no effect on non-inline elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

unicode-bidi =
  normal            |
  embed             |
  isolate           |
  bidi-override     |
  isolate-override  |
  plaintext

```

Examples
--------

### CSS

```css
.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}
```

### HTML

```html
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>
```

### Result

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # unicode-bidi |

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

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

See also
--------

* `direction`


<frequency-percentage> - CSS: Cascading Style Sheets

<frequency-percentage>
======================

The **`<frequency-percentage>`** CSS data type represents a value that can be either a `<frequency>` or a `<percentage>`. Frequency values, e.g. the pitch of a speaking voice, are not currently used in any CSS properties.

Syntax
------

The value of a `<frequency-percentage>` is either a `<frequency>` or a `<percentage>`; see their individual reference pages for details about their syntaxes.

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

### Use in calc()

Where a `<frequency-percentage>` is specified as an allowable type, this means that the percentage resolves to a frequency and therefore can be used in a `calc()` expression.

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

<frequency-percentage> =
  <frequency>   |
  <percentage>

```

Examples
--------

### Valid percentage values
```

90% Positive percentage
+90% Positive percentage with leading +
-90% Negative percentage — not valid for all properties that use percentages
```

### Invalid percentage values
```

90 % No space is allowed between the number and the unit
```

### Valid frequency values
```

12Hz     Positive integer
4.3Hz    Non-integer
14KhZ    The unit is case-insensitive, though non-SI capitalization is not recommended.
+0Hz     Zero, with a leading + and a unit
-0kHz    Zero, with a leading - and a unit
```

### Invalid frequency values
```

12.0     This is a <number>, not an <frequency>, because it is missing a unit.
7 Hz     No space is allowed between the number and the unit.
0        Although unitless zero is an allowable <length>, it's an invalid <frequency>.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

See also
--------

* CSS data types
* CSS Values and Units
* Related CSS data types:
    + `<frequency>`
    + `<percentage>`


border-bottom - CSS: Cascading Style Sheets

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

The **`border-bottom`** shorthand CSS property sets an element's bottom border. It sets the values of `border-bottom-width`, `border-bottom-style` and `border-bottom-color`.

Try it
------

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

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

It is actually the same as this one:

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

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

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

This property is a shorthand for the following CSS properties:

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

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

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

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

### Values

`<br-width>`

See `border-bottom-width`.

`<br-style>`

See `border-bottom-style`.

`<color>`

See `border-bottom-color`.

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

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

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

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

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

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

```

Examples
--------

### Applying a bottom border

#### HTML

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

#### CSS

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

#### Results

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

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

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

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

See also
--------

* `border`
* `border-block`
* `outline`


& nesting selector - CSS: Cascading Style Sheets

& nesting selector
==================

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

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

* Learn more
* See full compatibility
* Report feedback
The CSS **`&` nesting selector** explicitly states the relationship between parent and child rules when using CSS nesting. It makes the nested child rule selectors *relative to the parent element*. Without the `&` nesting selector, the child rule selector selects child elements. The child rule selectors have the same specificity weight as if they were within `:is()`.

**Note:** *Child rule* does not mean *child element selector*. A child rule can target parent element or child elements depending on use of the `&` nesting selector.

If not used in nested style rule, the `&` nesting selector represents the scoping root.

Syntax
------

```css
parentRule {
  /\* parent rule style properties \*/
  & childRule {
    /\* child rule style properties \*/
  }
}
```

### `&` nesting selector and whitespace

Consider the following code where nesting is done *without* the `&` nesting selector.

```css
.parent-rule {
  /\* parent rule properties \*/
  .child-rule {
    /\* child rule properties \*/
  }
}
```

When the browser parses the nested selectors, it automatically adds whitespace between the selectors to create a new CSS selector rule. The following code shows the equivalent non-nested rules:

```css
.parent-rule {
  /\* parent rule style properties \*/
}

.parent-rule .child-rule {
  /\* style properties for .child-rule descendants for .parent-rule ancestors \*/
}
```

When the nested rule needs to be attached (with no whitespace) to the parent rule, such as when using a `pseudo-class` or creating compound selectors, the `&` nesting selector must be immediately prepended to achieve the desired effect.

Consider an example where we want to style an element, providing styles to be applied at all times, and also nesting some styles to be applied only on hover. If the `&` nesting selector is not included, whitespace is added and we end up with a ruleset that applies the nested styles to any *hovered descendant of the parent rule selector*. This is, however, not what we want.

```css
.parent-rule {
  /\* parent rule properties \*/
  :hover {
    /\* child rule properties \*/
  }
}

/\* the browser parses the above nested rules as shown below \*/
.parent-rule {
  /\* parent rule properties \*/
}

.parent-rule \*:hover {
  /\* child rule properties \*/
}
```

With the `&` nesting selector added with no whitespace, the elements matched by the parent rule will be styled when hovered.

```css
.parent-rule {
  /\* parent rule properties \*/
  &:hover {
    /\* child rule properties \*/
  }
}

/\* the browser parses the above nested rules as shown below \*/
.parent-rule {
  /\* parent rule properties \*/
}

.parent-rule:hover {
  /\* child rule properties \*/
}
```

Appending the `&` nesting selector
----------------------------------

The `&` nesting selector can also be appended to reverse the context of the rules.

```css
.card {
  /\* .card styles \*/
  .featured & {
    /\* .featured .card styles \*/
  }
}

/\* the browser parses above nested rules as \*/

.card {
  /\* .card styles \*/
}

.featured .card {
  /\* .featured .card styles \*/
}
```

The `&` nesting selector can be placed multiple times:

```css
.card {
  /\* .card styles \*/
  .featured & & & {
    /\* .featured .card .card .card styles \*/
  }
}

/\* the browser parses above nested rules as \*/

.card {
  /\* .card styles \*/
}

.featured .card .card .card {
  /\* .featured .card .card .card styles \*/
}
```

Examples
--------

Both of the following examples produce the same output. The first one uses normal CSS styles and the second one uses the `&` nesting selector.

### Using normal CSS styles

This example uses normal CSS styling.

#### HTML

```html
<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>
```

#### CSS

```css
.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}
```

#### Result

### Using `&` in nested CSS styles

This example uses nested CSS styling.

#### HTML

```html
<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>
```

#### CSS

```css
.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
 &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}
```

#### Result

### Using `&` outside nested rule

If not used in nested style rule, the `&` nesting selector represents the scoping root.

```html
<p>Hover over the output box to change document's background color.</p>
```

```css
& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}
```

#### Result

In this case, all the styles apply to document.

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

| Specification |
| --- |
| CSS Nesting Module # nest-selector |

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

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

See also
--------

* Using CSS nesting
* CSS nesting module
* CSS selectors module


Privacy and the :visited selector - CSS: Cascading Style Sheets

Privacy and the :visited selector
=================================

Before about 2010, the CSS `:visited` selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through `window.getComputedStyle` and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.

To mitigate this problem, browsers have limited the amount of information that can be obtained from visited links.

Little white lies
-----------------

To preserve users' privacy, Firefox and other browsers will lie to web applications under certain circumstances:

* The `window.getComputedStyle` method, and similar functions such as `element.querySelector`, will always return values indicating that a user has never visited any of the links on a page.
* If you use a sibling selector such as `:visited + span`, the adjacent element (`span` in this example) will be styled as if the link were unvisited.
* In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.
Limits to visited link styles
-----------------------------

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

* `color`
* `background-color`
* `border-color` (and its sub-properties)
* `column-rule-color`
* `outline-color`
* `text-decoration-color`
* `text-emphasis-color`
* The color parts of the `fill` and `stroke` attributes

In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using the `alpha` parameter to `rgb()` or `hsl()`, or the `transparent` keyword.

Here is an example of how to use styles with the aforementioned restrictions:

```css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /\* The default value of background-color is `transparent`. You need to
 specify a different value, otherwise changes on :visited won't apply. \*/
}

:visited {
  outline-color: orange; /\* Visited links have an orange outline \*/
  background-color: green; /\* Visited links have a green background \*/
  color: yellow; /\* Visited links have yellow colored text \*/
}
```

Impact on web developers
------------------------

Overall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:

* Using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.
* Colors that are otherwise transparent will fail to appear if styled in a `:visited` selector.
See also
--------

* privacy-related changes coming to CSS :visited on Mozilla Hacks
* Plugging the CSS History Leak on the Mozilla Security Blog
* Preventing attacks on a user's history through CSS :visited selectors


image-rendering - CSS: Cascading Style Sheets

image-rendering
===============

The **`image-rendering`** CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

Try it
------

The user agent will scale an image when the page author specifies dimensions other than its natural size. Scaling may also occur due to user interaction (zooming). For example, if the natural size of an image is `100×100px`*,* but its actual dimensions are `200×200px` (or `50×50px`), then the image will be upscaled (or downscaled) using the algorithm specified by `image-rendering`. This property has no effect on non-scaled images.

Syntax
------

```css
/\* Keyword values \*/
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

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

### Values

`auto`

The scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses *bilinear* resampling (high quality).

`smooth`
Experimental

The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.

`high-quality`
Experimental

Identical to `smooth`, but with a preference for higher-quality scaling. If system resources are constrained, images with `high-quality` should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.

`crisp-edges`

The image is scaled with an algorithm that preserves contrast and edges in the image. Generally intended for images such as pixel art or line drawings, no blurring or color smoothing occurs.

`pixelated`

The image is scaled with the "nearest neighbor" or similar algorithm, preserving a "pixelated" look as the image changes in size.

**Note:** The values `optimizeQuality` and `optimizeSpeed` present in an early draft (and coming from its SVG counterpart `image-rendering`) are defined as synonyms for the `smooth` and `pixelated` values respectively.

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

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

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

image-rendering =
  auto          |
  smooth        |
  high-quality  |
  pixelated     |
  crisp-edges

```

Examples
--------

### Setting image scaling algorithms

In practical use, the `pixelated` and `crisp-edges` rules can be combined to provide some fallback for each other. (Just prepend the actual rules with the fallback.) The Canvas API can provide a fallback solution for `pixelated` through manual image data manipulation or with `imageSmoothingEnabled`.
```

<div>
  <img
 class="auto"
 alt="A small photo of some white and yellow flower against a leafy green background. The image is about 33% smaller than the size it is being displayed at. This upscaling causes the image to appear blurry, with notable soft edges between objects."
 src="blumen.jpg" />
  <img
 class="pixelated"
 alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the pixelated value for the image-rendering property display the image as very pixelated. Individual pixels are clearly visible and edges appear much sharper."
 src="blumen.jpg" />
  <img
 class="crisp-edges"
 alt="The same photo as the previous images, which is also being upscaled the same amount. Browsers that support the crisp-edges value for the image-rendering property display the image as very pixelated. In these examples, there is virtually no perceivable difference between the pixelated and crisp-edges versions."
 src="blumen.jpg" />
</div>
```

```
img {
  height: 200px;
}
```

#### CSS

```css
.auto {
  image-rendering: auto;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
```

#### Result

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |

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

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

**Note:** Although `crisp-edges` is supposed to use a pixel-art scaler like in the specification example, in practice no browsers (as of January 2020) do so. In Firefox, `crisp-edges` or `pixelated` is interpreted as nearest-neighbor, and `auto` is interpolated as trilinear or linear.

For behavior on Chromium and Safari (WebKit), see the `GetInterpolationQuality` function and `CSSPrimitiveValue::operator ImageRendering()` respectively.

See also
--------

* Other image-related CSS properties: `object-fit`, `object-position`, `image-orientation`, `image-rendering`, `image-resolution`.


background-position-y - CSS: Cascading Style Sheets

background-position-y
=====================

The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.

Try it
------

The value of this property is overridden by any declaration of the `background` or `background-position` shorthand properties applied to the element after it.

Syntax
------

```css
/\* Keyword values \*/
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/\* <percentage> values \*/
background-position-y: 25%;

/\* <length> values \*/
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/\* Side-relative values \*/
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/\* Multiple values \*/
background-position-y: 0px, center;

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

The `background-position-y` property is specified as one or more values, separated by commas.

### Values

`top`

Aligns the top edge of the background image with the top edge of the background position layer.

`center`

Aligns the vertical center of the background image with the vertical center of the background position layer.

`bottom`

Aligns the bottom edge of the background image with the bottom edge of the background position layer.

`<length>`

The offset of the given background image's horizontal edge from the corresponding background position layer's top horizontal edge. (Some browsers allow assigning the bottom edge for offset).

`<percentage>`

The offset of the given background image's vertical position relative to the container. A value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the *bottom* edge of the background image is aligned with the *bottom* edge of the container, thus a value of 50% vertically centers the background image.

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

|  |  |
| --- | --- |
| Initial value | `0%` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to height of background positioning area minus height of background image |
| Computed value | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | a repeatable list |

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

background-position-y =
  [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#

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

```

Examples
--------

### Basic example

The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.

#### HTML

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

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}
```

#### Result

### Side-relative values

The following example shows support for side-relative offset syntax, which allows the developer to offset the background from any edge.

#### HTML

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

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

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

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

See also
--------

* `background-position`
* `background-position-x`
* Using multiple backgrounds


::-webkit-meter-inner-element - CSS: Cascading Style Sheets

::-webkit-meter-inner-element
=============================

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

**`::-webkit-meter-inner-element`** is a proprietary WebKit CSS pseudo-element for selecting and applying styles to the outer containing element of a `<meter>` element. Additional markup to render the meter element as read-only.

Syntax
------

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

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

Not part of any standard.

Examples
--------

This will only work in WebKit and Blink-based browsers, such as Safari, Chrome, and Chromium-based versions of Edge.

### HTML

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

### CSS

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

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

#styled::-webkit-meter-inner-element {
  -webkit-appearance: inherit;
  box-sizing: inherit;
  border: 1px dashed #aaa;
}
```

### JavaScript

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

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

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

### Result

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

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

See also
--------

The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:

* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`