Class selectors - CSS: Cascading Style Sheets

Class selectors
===============

The CSS **class selector** matches elements based on the contents of their `class` attribute.

```css
/\* All elements with class="spacious" \*/
.spacious {
  margin: 2em;
}

/\* All <li> elements with class="spacious" \*/
li.spacious {
  margin: 2em;
}

/\* All <li> elements with a class list that includes both "spacious" and "elegant" \*/
/\* For example, class="elegant retro spacious" \*/
li.spacious.elegant {
  margin: 2em;
}
```

Syntax
------

```css
.class\_name { style properties }
```

Note that this is equivalent to the following `attribute selector`:

```css
[class~=class\_name] { style properties }
```

Examples
--------

### CSS

```css
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
```

### HTML

```html
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">
  This paragraph has red text and a yellow background.
</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

See also
--------

* CSS Selectors
* Learn CSS: Selectors


contain-intrinsic-width - CSS: Cascading Style Sheets

contain-intrinsic-width
=======================

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

Syntax
------

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

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

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

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

### Values

The following values may be specified for an element.

`none`

The element has no intrinsic width.

`<length>`

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

`auto <length>`

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

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

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

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

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

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

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

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

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

```

Examples
--------

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

### Setting the intrinsic width

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

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

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

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

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

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

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

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

See also
--------

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


CSS images - CSS: Cascading Style Sheets

CSS images
==========

The **CSS images** module defines the types of images that can be used (the `<image>` type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

Reference
---------

### Properties

* `image-orientation`
* `image-rendering`
* `image-resolution`
* `object-fit`
* `object-position`
### Functions

* `linear-gradient()`
* `radial-gradient()`
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `conic-gradient()`
* `repeating-conic-gradient()`
* `url()`
* `element()`
* `image()`
* `cross-fade()`
### Data types

* `<gradient>`
* `<image>`
Guides
------

Using CSS gradients

Presents a specific type of CSS images, *gradients*, and how to create and use these.

Implementing image sprites in CSS

Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.

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

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |


CSS transforms - CSS: Cascading Style Sheets

CSS transforms
==============

The **CSS transforms** module defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

CSS transforms in action
------------------------

Use the sliders in the frame below to modify the translation, rotation, scale, and skew CSS transform properties of the cube in 3D space. As you move the cube through 3D space, notice the way it interacts with the element labelled `z:0px`, which is located at the 3D position `(0, 0, 0)`.

You can also use the `perspective` slider to modify the `perspective` property of the cube's container, which determines the distance between you and the `z=0` plane.

The `perspective-origin` sliders determine where you, the viewer, are looking into the 3D space for purposes of determining the view's *vanishing point*. This vanishing point is indicated by a small red dot. You can imagine modifying these sliders as physically moving your head up, down, left, and right to see different parts of the cube without moving the cube itself.

The `backface-visibility` checkbox determines whether the cube's back faces are set to `visible` or `hidden`.

The cube in the above example is comprised of six `<div>` elements, all of which are styled with CSS to create the cube's faces. The cube is not drawn using a 2D or 3D canvas context, so **you can inspect the faces of the cube with your browser's developer tools as you would inspect any other DOM element**. Try using your browser's developer tools element picker to inspect different faces of the cube as you transform its position and rotation.

**Note:** The order in which transformations, including 3D rotations, are applied affects the resultant transformation. In the above example, transforms are translated, scaled, rotated, then skewed. The rotations are applied in the order X → Y → Z.

You can view this example's source on GitHub.

Reference
---------

### Properties

* `backface-visibility`
* `perspective`
* `perspective-origin`
* `rotate`
* `scale`
* `transform`
* `transform-box`
* `transform-origin`
* `transform-style`
* `translate`
### Functions

* `matrix()`
* `matrix3d()`
* `perspective()`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `scale()`
* `scale3d()`
* `scaleX()`
* `scaleY()`
* `scaleZ()`
* `skew()`
* `skewX()`
* `skewY()`
* `translate()`
* `translate()`
* `translateX()`
* `translateY()`
* `translateZ()`
### Data types

* `<transform-function>`
Guides
------

Using CSS transforms

Step-by-step tutorial about how to transform elements styled with CSS.

Coordinate systems

Describes the way pixel locations are defined in the CSS object model.

Performance fundamentals: Use CSS transforms

An overview of web performance fundamentals, including how CSS transforms can improve performance.

Matrix math for the web

Describes how object transformations can be represented by mathematical matrices.

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

* CSS Properties:
    + `animation`
    + `background-position`
    + `clip`
    + `clip-path`
    + `contain`
    + `content-visibility`
    + `isolation`
    + `mask`
    + `mask-border-source`
    + `mask-image`
    + `mix-blend-mode`
    + `opacity`
    + `overflow`
    + `transition`
    + `visibility`
* Data types:
    + `<angle>`
    + `<length-percentage>`
    + `<length>`
    + `<number>`
    + `<percentage>`
    + `<position>`
* Glossary terms:
    + Interpolation
    + Stacking context
* SVG concepts:
    + `<animate>` element
    + `<animateTransform>` element
    + `<set>` element
    + `transform` element
Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |

See also
--------

* Basic SVG transformations tutorial
* CSS animations module
* CSS transitions module


CSS font loading - CSS: Cascading Style Sheets

CSS font loading
================

The **CSS font loading** module describes events and interfaces used for dynamically loading font resources.

Reference
---------

### Interfaces

* `fontFace` interface
    + `FontFace()` constructor
    + `fontFace.family` property
    + `fontFace.style` property
    + `fontFace.weight` property
    + `fontFace.stretch` property
    + `fontFace.unicodeRange` property
    + `fontFace.variant` property
    + `fontFace.featureSettings` property
    + `fontFace.variationSettings` property
    + `fontFace.display` property
    + `fontFace.ascentOverride` property
    + `fontFace.descentOverride` property
    + `fontFace.lineGapOverride` property
    + `fontFace.load()` method (returns a promise)
* `fontFaceSet` interface
* `fontFaceSetLoadEvent` event
Guides
------

CSS font loading API

Overview of the CSS Font Loading API, which provide events and interfaces for dynamically loading font resources.

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

* CSS `@font-face` at-rule
* CSS `@font-feature-values` at-rule
* `CSSFontFaceRule` interface
* Document `fonts` property (returns the `FontFaceSet` object instance)
* WorkerGlobalScope `fonts` property (returns the `FontFaceSet` object instance)
* JavaScript `Promise` object
Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3  |

See also
--------

* CSS fonts module


margin-block - CSS: Cascading Style Sheets

margin-block
============

The **`margin-block`** CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `margin-block-start`
* `margin-block-end`
Syntax
------

```css
/\* <length> values \*/
margin-block: 10px 20px; /\* An absolute length \*/
margin-block: 1em 2em; /\* relative to the text size \*/
margin-block: 5% 2%; /\* relative to the nearest block container's width \*/
margin-block: 10px; /\* sets both start and end values \*/

/\* Keyword values \*/
margin-block: auto;

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

This property corresponds to the `margin-top` and `margin-bottom`, or the `margin-right` and `margin-left` properties, depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

The `margin-block` property may be specified using one or two values.

* When **one** value is specified, it applies the same margin to **both start and end**.
* When **two** values are specified, the first margin applies to the **start**, the second to the **end**.
### Values

The `margin-block` property takes the same values as the `margin` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `margin-block-start`: `0`
* `margin-block-end`: `0`
 |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | as each of the properties of the shorthand:* `margin-block-start`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `margin-block-end`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length |

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

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

```

Examples
--------

### Setting block start and end margins

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-block: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```

#### HTML

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

#### Result

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

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

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation`


<image> - CSS: Cascading Style Sheets

<image>
=======

The **`<image>`** CSS data type represents a two-dimensional image.

Syntax
------

The `<image>` data type can be represented with any of the following:

* An image denoted by the `url()` data type
* A `<gradient>` data type
* A part of the webpage, defined by the `element()` function
* An image, image fragment or solid patch of color, defined by the `image()` function
* A blending of two or more images defined by the `cross-fade()` function.
* A selection of images chosen based on resolution defined by the `image-set()` function.
Description
-----------

CSS can handle the following kinds of images:

* Images with *intrinsic dimensions* (a natural size), like a JPEG, PNG, or other raster format.
* Images with *multiple intrinsic dimensions*, existing in multiple versions inside a single file, like some .ico formats. (In this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.)
* Images with no intrinsic dimensions but with *an intrinsic aspect ratio* between its width and height, like an SVG or other vector format.
* Images with *neither intrinsic dimensions, nor an intrinsic aspect ratio*, like a CSS gradient.

CSS determines an object's *concrete size* using (1) its *intrinsic dimensions*; (2) its *specified size*, defined by CSS properties like `width`, `height`, or `background-size`; and (3) its *default size*, determined by the kind of property the image is used with:

| Kind of Object (CSS Property) | Default object size |
| --- | --- |
| `background-image` | The size of the element's background positioning area |
| `list-style-image` | The size of a `1em` character |
| `border-image-source` | The size of the element's border image area |
| `cursor` | The browser-defined size matching the usual cursor size on the client's system |
| `mask-image` | ? |
| `shape-outside` | ? |
| `mask-border-source` | ? |
| `symbols()` for @counter-style | At risk feature. If supported, the browser-defined size matching the usual cursor size on the client's system |
| `content` for a pseudo-element (`::after`/`::before`) | A 300px × 150px rectangle |

The concrete object size is calculated using the following algorithm:

* If the specified size defines *both the width and the height*, these values are used as the concrete object size.
* If the specified size defines *only the width or only the height*, the missing value is determined using the intrinsic ratio, if there is any, the intrinsic dimensions if the specified value matches, or the default object size for that missing value.
* If the specified size defines *neither the width nor the height*, the concrete object size is calculated so that it matches the intrinsic aspect ratio of the image but without exceeding the default object size in any dimension. If the image has no intrinsic aspect ratio, the intrinsic aspect ratio of the object it applies to is used; if this object has none, the missing width or height are taken from the default object size.

**Note:** Not all browsers support every type of image on every property. See the browser compatibility section for details.

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

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

* MDN Understanding WCAG, Guideline 1.1 explanations
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
Formal syntax
-------------
```

<image> =
  <url>       |
  <gradient>

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

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

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

```

Examples
--------

### Valid images

```css
url(test.jpg)               /\* A <url>, as long as test.jpg is an actual image \*/
linear-gradient(blue, red)  /\* A <gradient> \*/
element(#realid)            /\* A part of the webpage, referenced with the element() function,
 if "realid" is an existing ID on the page \*/
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /\* A section 16x16 section of <url>, starting from the top, left of the original
 image as long as arrow.png is a supported image, otherwise a solid
 red swatch. If language is rtl, the image will be horizontally flipped. \*/
cross-fade(20% url(twenty.png), url(eighty.png))
                            /\* cross faded images, with twenty being 20% opaque
 and eighty being 80% opaque. \*/
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /\* a selection of images with varying resolutions \*/
```

### Invalid images

```css
nourl.jpg            /\* An image file must be defined using the url() function. \*/
url(report.pdf)      /\* A file pointed to by the url() function must be an image. \*/
element(#fakeid)     /\* An element ID must be an existing ID on the page. \*/
image(z.jpg#xy=0,0)  /\* The spatial fragment must be written in the format of xywh=#,#,#,# \*/
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /\* every image in an image set must have a different resolutions \*/
```

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

| Specification |
| --- |
| CSS Images Module Level 3 # image-values |

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

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

See also
--------

* `<gradient>`
* `element()`
Experimental
* `image()`
* `image-set()`
* `cross-fade()`


border-bottom-right-radius - CSS: Cascading Style Sheets

border-bottom-right-radius
==========================

The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

Try it
------

The rounding can be a circle or an ellipse, or if one of the value is `0` no rounding is done and the corner is square.

![border-bottom-right-radius.png](/en-US/docs/Web/CSS/border-bottom-right-radius/border-bottom-right-radius.png)

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the `background-clip` property.

**Note:** If the value of this property is not set in a `border-radius` shorthand property that is applied to the element after the `border-bottom-right-radius` CSS property, the value of this property is then reset to its initial value by the shorthand property.

Syntax
------

```css
/\* The corner is a circle \*/
/\* border-bottom-right-radius: radius \*/
border-bottom-right-radius: 3px;

/\* Percentage values \*/
border-bottom-right-radius: 20%; /\* corner of a circle if box is a square or else corner of a rectangle \*/
border-bottom-right-radius: 20% 20%; /\* same as above \*/ /\* 20% of horizontal(width) and vertical(height) \*/
border-bottom-right-radius: 20% 10%; /\* 20% of horizontal(width) and 10% of vertical(height) \*/

/\*The corner is an ellipse \*/
/\* border-bottom-right-radius: horizontal vertical \*/
border-bottom-right-radius: 0.5em 1em;

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

With one value:

* the value is a `<length>` or a `<percentage>` denoting the radius of the circle to use for the border in that corner.

With two values:

* the first value is a `<length>` or a `<percentage>` denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
* the second value is a `<length>` or a `<percentage>` denoting the vertical semi-major axis of the ellipse to use for the border in that corner.
### Values

`<length-percentage>`

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS `<length>` data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | two absolute `<length>`s or `<percentage>`s |
| Animation type | a length, percentage or calc(); |

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

border-bottom-right-radius =
  <length-percentage [0,∞]>{1,2}

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

```

Examples
--------

### Arc of a circle

A single `<length>` value produces an arc of a circle.
```

<div></div>
```

```css
div {
  border-bottom-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### Arc of an ellipse

Two different `<length>` values produce an arc of an ellipse.
```

<div></div>
```

```css
div {
  border-bottom-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### Square element with percentage radius

A square element with a single `<percentage>` value produces an arc of a circle.
```

<div></div>
```

```css
div {
  border-bottom-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### Non-square element with percentage radius

A non-square element with a single `<percentage>` value produces an arc of an ellipse.
```

<div></div>
```

```css
div {
  border-bottom-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}
```

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

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

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

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

See also
--------

* `border-radius` shorthand property
* `border-top-right-radius`, `border-bottom-left-radius`, and `border-top-left-radius`


<calc-constant> - CSS: Cascading Style Sheets

<calc-constant>
===============

The **`<calc-constant>`** CSS data type represents well-defined constants such as `e` and `pi`. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.

Syntax
------

The `<calc-constant>` type defines numeric constants that can be used in CSS math functions.

### Values

`e`

The base of the natural logarithm, approximately equal to `2.7182818284590452354`.

`pi`

The ratio of a circle's circumference to its diameter, approximately equal to `3.1415926535897932`.

`infinity` & `-infinity`

An infinite value, used to indicate the largest/smallest possible value.

`NaN`

A value representing "Not a Number" canonical casing.

### Notes

Serializing the arguments inside `calc()` follows the IEEE-754 standard for floating point math which means there's a few cases to be aware of regarding constants like `infinity` and `NaN`:

* Dividing by zero will return positive or negative `infinity` depending on the sign of the numerator.
* Adding, subtracting or multiplying `infinity` to anything will return `infinity` unless it produces `NaN` (see below).
* Any operation with at least one `NaN` argument will return `NaN`.
 This means `0 / 0`, `infinity / infinity`, `0 * infinity`, `infinity + (-infinity)`, and `infinity - infinity` will all return `NaN`.
* Positive and negative zero are possible values (`0⁺` and `0⁻`).
 This has the following effects:
    + Multiplication or division that produces zero with exactly one negative argument (`-5 * 0` or `1 / (-infinity)`) or negative result from combinations in the other math functions will return `0⁻`.
    + `0⁻ + 0⁻` or `0⁻ - 0` will return `0⁻`.
     All other additions or subtractions that would produce a zero will return `0⁺`.
    + Multiplying or dividing `0⁻` with a positive number (including `0⁺`) will return a negative result (either `0⁻` or `-infinity`), while multiplying or dividing `0⁻` with a negative number will return a positive result.

Examples of how these rules apply are shown in the Infinity, NaN, and division by zero section.

**Note:** It's rare to need to use `infinity` as an argument in `calc()`, but it can be used to avoid hardcoded "magic numbers" or making sure a certain value is always larger than another value.
 It may be useful if you need to make it obvious that a property has "the largest possible value" for that data type.

### Formal syntax

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

 Mathematical constants can only be used inside CSS math functions for calculations. Math constants are not CSS keywords, but if they are used outside of a calculation, they're treated like any other keyword.
 For example:

* `animation-name: pi;` refers to an animation named "pi", not the `pi` numeric constant.
* `line-height: e;` is invalid, but `line-height: calc(e);` is valid.
* `rotate(1rad * pi);` won't work because `rotate()` is not a math function. Use `rotate(calc(1rad * pi));`

In math functions, `<calc-constant>` values are evaluated as `<number>` values, therefore `e` and `pi` act as numeric constants.

 Both `infinity` and `NaN` are slightly different, they are considered as degenerate numeric constants.
 While not technically numbers, they act as `<number>` values, so to get an infinite `<length>`, for example, requires an expression like `calc(infinity * 1px)`.

 The `infinity` and `NaN` values are included mostly to make serialization simpler and more obvious, but can be used to indicate a "largest possible value", since an infinite value is clamped to the allowed range.
 It's rare for this to be reasonable, but when using infinity its much simpler than just putting an enormous number in a stylesheet or hardcoding magic numbers.

All constants are case-insensitive except for `NaN`, which makes `calc(Pi)`, `calc(E)` and `calc(InFiNiTy)` valid:
```

e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN
```

The following are all invalid:
```

nan
Nan
NAN
```

Examples
--------

### Using e and pi in `calc()`

 The following example shows how to use `e` inside `calc()` to rotate an element with an exponentially-increasing angle.
 The second box shows how to use `pi` inside a `sin()` function.
```

#wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 200px;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: 10px;
}

span {
  font-family: monospace;
  font-size: 0.8em;
}

#e {
  background-color: blue;
}

#pi {
  background-color: blue;
}
```

```html
<div id="wrapper">
  <div class="container">
    <div id="e"></div>
    <input type="range" min="0" max="7" step="0.01" value="0" id="e-slider" />
    <label for="e-slider">e:</label>
    <span id="e-value"></span>
  </div>
  <div class="container">
    <div id="pi"></div>
    <input type="range" min="0" max="1" step="0.01" value="0" id="pi-slider" />
    <label for="pi-slider">pi:</label>
    <span id="pi-value"></span>
  </div>
</div>
```

```js
// sliders
const eInput = document.querySelector("#e-slider");
const piInput = document.querySelector("#pi-slider");
// spans for displaying values
const eValue = document.querySelector("#e-value");
const piValue = document.querySelector("#pi-value");

eInput.addEventListener("input", function () {
  e.style.transform = "rotate(calc(1deg \* pow(" + this.value + ", e)))";
  eValue.textContent = e.style.transform;
});

piInput.addEventListener("input", function () {
  pi.style.rotate = "calc(sin(" + this.value + " \* pi) \* 100deg)";
  piValue.textContent = pi.style.rotate;
});
```

### Infinity, NaN, and division by zero

The following example shows the computed value of the `width` property when dividing by zero, followed by how serialization with different `calc()` constants look when viewed in the console:

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

```css
div {
  height: 50px;
  background-color: red;
  width: calc(1px / 0);
}
```

```js
const div = document.querySelector("div");
console.log(div.offsetWidth); // 17895698 (infinity clamped to largest value for width)

function logSerializedWidth(value) {
  div.style.width = value;
  console.log(div.style.width);
}

logSerializedWidth("calc(1px / 0)"); // calc(infinity \* 1px)
logSerializedWidth("calc(1px / -0)"); // calc(-infinity \* 1px)

logSerializedWidth("calc(1px \* -infinity \* -infinity)"); // calc(infinity \* 1px)
logSerializedWidth("calc(1px \* -infinity \* infinity)"); // calc(-infinity \* 1px)

logSerializedWidth("calc(1px \* (NaN + 1))"); // calc(NaN \* 1px)
```

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

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

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

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

See also
--------

* `<calc-sum>`
* `<calc-product>`
* `<calc-value>`


<generic-family> - CSS: Cascading Style Sheets

<generic-family>
================

The **`<generic-family>`** CSS data type represents the keyword values for generic font families used in the `font` shorthand and `font-family` longhand properties. The `<generic-family>` represents one or more locally-installed fonts belonging to that category of fonts.

Syntax
------

```css
<generic-family> = serif | sans-serif | monospace | cursive | fantasy | system-ui |
   ui-serif | ui-sans-serif | ui-monospace | ui-rounded | emoji | math | fangsong
```

Values
------

The `<generic-family>` enumerated type is specified using one of the values listed below:

`serif`

A serif is a small line or stroke attached to the end of a larger stroke in a letter. In serif fonts, glyphs have finishing strokes, flared or tapering ends. Examples include Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, and URW Palladio.

`sans-serif`

A font without serifs; glyphs have plain stroke endings, without ornamentation. Example sans-serif fonts include Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, and Nimbus Sans L.

`monospace`

All glyphs have the same fixed width. Example monospace fonts include Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, and Lucida Console.

`cursive`

Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work. Example cursive fonts include Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, and Apple Chancery.

`fantasy`

Fantasy fonts are primarily decorative fonts that contain playful representations of characters. Example fantasy fonts include Papyrus, Herculanum, Party LET, Curlz MT, and Harrington.

`system-ui`

Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic family is provided for typefaces that don't map cleanly into the others.

`ui-serif`

The default user interface serif font. See the definition of `serif` above.

`ui-sans-serif`

The default user interface sans-serif font. See the definition of `sans-serif` above.

`ui-monospace`

The default user interface monospace font. See the definition of `monospace` above.

`ui-rounded`

The default user interface font that has rounded features.

`math`

Fonts for displaying mathematical expressions, for example superscript and subscript, brackets that cross several lines, nesting expressions, and double-struck glyphs with distinct meanings.

`emoji`

Fonts that are specifically designed to render emoji.

`fangsong`

A particular style of Chinese characters that are between serif-style Song and cursive-style Kai forms. This style is often used for government documents.

Examples
--------

This example demos several of the `<generic-family>` enumerated values for the `font-family` property.

### HTML

```html
<ul>
  <li class="serif">serif</li>
  <li class="sans-serif">sans-serif</li>
  <li class="monospace">monospace</li>
  <li class="cursive">cursive</li>
  <li class="fantasy">fantasy</li>
  <li class="system-ui">system-ui</li>
</ul>
```

### CSS

```css
ul {
  font-size: 1.5rem;
  line-height: 2;
}
.serif {
  font-family: serif;
}
.sans-serif {
  font-family: sans-serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}
.fantasy {
  font-family: fantasy;
}
.system-ui {
  font-family: system-ui;
}
```

### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |

See also
--------

* Properties that use this data type: `font-family` and `font`
* CSS fonts module


-moz-force-broken-image-icon - CSS: Cascading Style Sheets

-moz-force-broken-image-icon
============================

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

The **`-moz-force-broken-image-icon`** extended CSS property can be used to force the broken image icon to be shown even when a broken image has an `alt` attribute.

Syntax
------

### Values

`<integer>`

A value of `1` means that the broken image icon is shown even if the image has an `alt` attribute. When the value `0` is used, the image will act as usual and only display the `alt` attribute.

**Note:** Even if the value is set to `1` the `alt` attribute will still be displayed, alongside the broken image icon.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | images |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

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

### HTML

```html
<img src="/broken/image/link.png" alt="Broken image link" />
```

### CSS

```css
img {
  -moz-force-broken-image-icon: 1;
  height: 100px;
  width: 100px;
}
```

### Result

**Note:** Unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if `-moz-force-broken-image-icon` is set to `1`.

Notes
-----

* This property will only work in Gecko-based browsers.
* The use of this property is not recommended. A proper `alt` attribute should be used instead.
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
--------

* Firefox bug 58646


<number> - CSS: Cascading Style Sheets

<number>
========

The **`<number>`** CSS data type represents a number, being either an integer or a number with a fractional component.

Syntax
------

The syntax of `<number>` extends the syntax of `<integer>`. A fractional value is represented by a `.` followed by one or more decimal digits, and may be appended to an integer. There is no unit associated with numbers.

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

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

Examples
--------

### Valid numbers
```

12          A raw <integer> is also a <number>.
4.01        Positive fraction
-456.8      Negative fraction
0.0         Zero
+0.0        Zero, with a leading +
-0.0        Zero, with a leading -
.60         Fractional number without a leading zero
10e3        Scientific notation
-3.4e-2     Complicated scientific notation
```

### Invalid numbers
```

12.         Decimal points must be followed by at least one digit.
+-12.2      Only one leading +/- is allowed.
12.1.1      Only one decimal point is allowed.
```

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

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

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

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

See also
--------

* `<integer>`


math-style - CSS: Cascading Style Sheets

math-style
==========

The `math-style` property indicates whether MathML equations should render with normal or compact height.

Syntax
------

```css
/\* Keyword values \*/
math-style: normal;
math-style: compact;

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

### Values

`normal`

The initial value, indicates normal rendering.

`compact`

The math layout on descendants tries to minimize the logical height.

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

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

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

math-style =
  normal   |
  compact

```

Examples
--------

### Changing the style of a formula to compact

#### CSS

```css
math {
  math-style: normal;
}
.compact {
  math-style: compact;
}
```

#### HTML

```html
<p>
  Normal height
  <math>
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  and compact height
  <math class="compact">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  equations.
</p>
```

#### Result

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

| Specification |
| --- |
| MathML Core # the-math-style-property |

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

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

See also
--------

* `math-depth`
* `font-size`


Selector list - CSS: Cascading Style Sheets

Selector list
=============

The CSS **selector list** (`,`) selects all the matching nodes. A selector list is a comma-separated list of selectors.

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

When multiple selectors share the same declarations, they can be grouped together into a comma-separated list. Selector lists can also be passed as parameters to some functional CSS pseudo-classes. White space may appear before and/or after the comma.

The following three declarations are equivalent:

```css
span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}
```

```css
span,
div {
  border: red 2px solid;
}
```

```css
:is(span, div) {
  border: red 2px solid;
}
```

Examples
--------

When applying the same styles to elements matching different criteria, grouping the selectors in a comma-separated list can improve consistency while reducing the size of style sheets.

### Single line grouping

This example shows grouping selectors in a single line using a comma-separated list.

```css
h1, h2, h3, h4, h5, h6 {
  font-family: helvetica;
}
```

### Multi line grouping

This example shows grouping selectors in multiple lines using a comma-separated list.

```css
#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}
```

Valid and invalid selector lists
--------------------------------

An invalid selector represents, and therefore matches, nothing. When a selector list contains an invalid selector, the entire style block is ignored, except for the `:is()` and `:where()` pseudo-classes that accept forgiving selector lists.

### Invalid selector list

A downside to using a selector list is that a single unsupported selector in the selector list invalidates the entire rule.

Consider the following two CSS rule sets:

```css
h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```

```css
h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}
```

They are not equivalent. In the first rule set, styles will be applied on the `h1` and `h3` elements, but the `h2:invalid-pseudo` rule will not be parsed. In the second rule set, because one selector in the list is invalid, the entire rule will not be parsed. Because of this, no style will be applied to the `h1` and `h3` elements as when any selector in a list of selectors in invalid, the entire style block will be ignored.

### Forgiving selector list

A way to remedy the invalid selector list problem is to use the `:is()` or the `:where()` pseudo-class, which accept a forgiving selector list. Each selector in a forgiving selector list is parsed individually. So any invalid selectors in the list are ignored and the valid ones are used.

Carrying on from the previous example, the following two CSS rule sets are now equivalent:

```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```

```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```

The difference between the two is that the specificity of `:is()` is its most specific argument, whereas the `:where()` selector and the forgiving selector list parameter do not add any specificity weight.

### Relative selector list

A relative selector list is a comma-separated selector list parsed as relative selectors, which begin with an explicit or implied combinator.

```css
h2:has(+ p, + ul.red) {
  font-style: italic;
}
```

In the above example, the italic style will be applied to any `h2` heading that is immediately followed by `<p>` or `<ul class="red">`. Note that pseudo-elements and the `:has()` selector are not valid within the `:has()` relative selector list.

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

| Specification |
| --- |
| Selectors Level 4 # grouping |

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

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

See also
--------

* The `:is()` and `:where()` pseudo-classes accept forgiving selector lists.
* The `:not()` pseudo-class accepts a regular selector list
* The `:has()` pseudo-class accepts a relative selector list.
* CSS selectors


animation-range-end - CSS: Cascading Style Sheets

animation-range-end
===================

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

The **`animation-range-end`** CSS property is used to set the end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will end.

The `animation-range-end` and `animation-range-start` properties can also be set using the `animation-range` shorthand property.

**Note:** `animation-range-end` is included in the `animation` shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-end` value to `normal`, but a specific value cannot be set via `animation`. When creating CSS scroll-driven animations, you need to declare `animation-range-end` after declaring any `animation` shorthand for it to take effect.

Syntax
------

```css
/\* Keyword or length percentage value \*/
animation-range-end: normal;
animation-range-end: 80%;
animation-range-end: 700px;

/\* Named timeline range value \*/
animation-range-end: cover;
animation-range-end: contain;
animation-range-end: cover 80%;
animation-range-end: contain 700px;
```

### Values

Allowed values for `animation-range-end` are `normal`, a `<length-percentage>`, a `<timeline-range-name>`, or a `<timeline-range-name>` with a `<length-percentage>` following it. See `animation-range` for a detailed description of the available values.

Also check out the View Timeline Ranges Visualizer, which shows exactly what the different values mean in an easy visual format.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements |
| Inherited | no |
| Percentages | Relative to the specified named timeline range if specified, otherwise relative to the entire timeline |
| Computed value | A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage |
| Animation type | Not animatable |

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

animation-range-end =
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

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

```

Examples
--------

### Creating a named view progress timeline with range end

 A view progress timeline named `--subjectReveal` is defined using the `view-timeline` property on a subject element with a `class` of `animation`.
 This is then set as the timeline for the same element using `animation-timeline: --subjectReveal;`. The result is that the subject element animates as it moves upwards through the document as it is scrolled.

An `animation-range-end` declaration is also set to make the animation end earlier than expected.

#### HTML

The HTML for the example is shown below.

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

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

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:

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

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

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

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

The `<div>` with the class of `subject` is also given a class of `animation` — this is where `view-timeline` is set to define a named view progress timeline. It is also given an `animation-timeline` name with the same value to declare that this will be the element animated as the view progress timeline is progressed. We also give it an `animation-range-end` declaration to make the animation end earlier than expected.

Last, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller.

```css
.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range-end: contain 50%;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
}

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

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

#### Result

Scroll to see the subject element being animated.

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

| Specification |
| --- |
| Scroll-driven Animations # animation-range-end |

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

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

See also
--------

* `animation-timeline`
* `animation-range`, `animation-range-start`
* `scroll-timeline`, `scroll-timeline-axis`, `scroll-timeline-name`
* `timeline-scope`
* `view-timeline-inset`
* The JavaScript equivalent: The `rangeEnd` property available in `Element.animate()` calls
* CSS scroll-driven animations


gap - CSS: Cascading Style Sheets

gap
===

The **`gap`** CSS shorthand property sets the gaps (gutters) between rows and columns.

Early versions of the specification called this property `grid-gap`, and to maintain compatibility with legacy websites, browsers will still accept `grid-gap` as an alias for `gap`.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `column-gap`
* `row-gap`
Syntax
------

```css
/\* One <length> value \*/
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/\* One <percentage> value \*/
gap: 16%;
gap: 100%;

/\* Two <length> values \*/
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/\* One or two <percentage> values \*/
gap: 16% 100%;
gap: 21px 82%;

/\* calc() values \*/
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

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

This property is specified as a value for `<'row-gap'>` followed optionally by a value for `<'column-gap'>`. If `<'column-gap'>` is omitted, it's set to the same value as `<'row-gap'>`.

`<'row-gap'>` and `<'column-gap'>` are each specified as a `<length>` or a `<percentage>`.

### Values

`<length>`

Is the width of the gutter separating the grid lines.

`<percentage>`

Is the width of the gutter separating the grid lines, relative to the dimension of the element.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `row-gap`: `normal`
* `column-gap`: `normal`
 |
| Applies to | multi-column elements, flex containers, grid containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `row-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* `row-gap`: a length, percentage or calc();
* `column-gap`: a length, percentage or calc();
 |

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

gap =
  <'row-gap'> <'column-gap'>?

```

Examples
--------

### Flex layout

#### HTML

```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```

#### Result

### Grid layout

#### HTML

```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

#### Result

### Multi-column layout

#### HTML

```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>
```

#### CSS

```css
.content-box {
  column-count: 3;
  gap: 40px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # gap-shorthand |

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

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

See also
--------

* Related CSS properties: `row-gap`, `column-gap`
* Grid Layout Guide: *Basic concepts of grid layout - Gutters*


font-synthesis-style - CSS: Cascading Style Sheets

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

The **`font-synthesis-style`** CSS property lets you specify whether or not the browser may synthesize the oblique typeface when it is missing in a font family.

It is often convenient to use the shorthand property `font-synthesis` to control all typeface synthesis values.

Syntax
------

```css
/\* Keyword values \*/
font-synthesis-style: auto;
font-synthesis-style: none;

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

### Values

`auto`

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

`none`

Indicates that the synthesis of the missing oblique typeface by the browser is not allowed.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| 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-style =
  auto  |
  none

```

Examples
--------

### Disabling synthesis of oblique typeface

This example shows turning off synthesis of the oblique typeface by the browser in the `Montserrat` font.

#### HTML

```html
<p class="english">
  This is the default <em>oblique typeface</em> and
  <strong>bold typeface</strong>.
</p>

<p class="english no-syn">
  The <em>oblique typeface</em> is turned off here but not the
  <strong>bold typeface</strong>.
</p>
```

#### CSS

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

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

#### Result

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

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

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

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

See also
--------

* font-synthesis shorthand, font-synthesis-small-caps, font-synthesis-weight
* `font-style`, `font-variant`, `font-weight`


image-resolution - CSS: Cascading Style Sheets

image-resolution
================

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

The **`image-resolution`** CSS property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as `background-image` images.

The image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the `image-resolution` property allows a different resolution to be specified.

Syntax
------

```css
image-resolution: from-image;
image-resolution: 300dpi;
image-resolution: from-image 300dpi;
image-resolution: 300dpi snap;

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

### Values

``<resolution>``

Specifies the intrinsic resolution explicitly.

`from-image`

Uses the intrinsic resolution as specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to `1dppx` (1 image pixel per CSS px unit).

`snap`

If the `snap` keyword is provided, the computed resolution is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image's native resolution similarly adjusted.

**Note:** As vector formats such as SVG do not have an intrinsic resolution, this property has no effect on vector images.

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

|  |  |
| --- | --- |
| Initial value | `1dppx` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified, except with <resolution> possibly altered by computed for 'snap' value |
| Animation type | discrete |

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

image-resolution =
  [ from-image || <resolution> ]  &&
  snap?

```

Examples
--------

### Setting a high dpi for print

When printing the document, use a higher resolution.

```css
@media print {
  .myimage {
    image-resolution: 300dpi;
  }
}
```

### Use image resolution with fallback

Uses the resolution from the image. If the image does not have a resolution, use 300dpi rather than the default 1dppx.

```css
.myimage {
  image-resolution: from-image 300dpi;
}
```

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

| Specification |
| --- |
| CSS Images Module Level 4 # the-image-resolution |

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

No browser currently supports this property.

See also
--------

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


border-block - CSS: Cascading Style Sheets

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

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

Try it
------

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

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

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

This property is a shorthand for the following CSS properties:

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

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

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

### Values

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

`<'border-width'>`

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

`<'border-style'>`

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

`<color>`

The color of the border.

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

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

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

border-block =
  <'border-block-start'>

```

Examples
--------

### Border with vertical text

#### HTML

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

#### CSS

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

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

#### Results

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

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

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

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

See also
--------

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


text-rendering - CSS: Cascading Style Sheets

text-rendering
==============

The **`text-rendering`** CSS property provides information to the rendering engine about what to optimize for when rendering text.

The browser makes trade-offs among speed, legibility, and geometric precision.

**Note:** The `text-rendering` property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux.

One very visible effect is `optimizeLegibility`, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, Microsoft's *Calibri*, *Candara*, *Constantia*, and *Corbel*, or the *DejaVu* font family).

Syntax
------

```css
/\* Keyword values \*/
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

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

### Values

`auto`
Non-standard

The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.

`optimizeSpeed`

The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

`optimizeLegibility`

The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

`geometricPrecision`
Non-standard

The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don't scale linearly. So this value can make text using those fonts look good.

In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

But the `geometricPrecision` property — when fully supported by the rendering engine — lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

**Note:** WebKit precisely applies the specified value, but Gecko treats the value the same as `optimizeLegibility`.

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

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

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

text-rendering =
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision

```

Examples
--------

### Automatic application of optimizeLegibility

This demonstrates how `optimizeLegibility` is used by browsers automatically when the `font-size` is smaller than `20px`.

#### HTML

```html
<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>
```

#### CSS

```css
.small {
  font:
    19.9px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
.big {
  font:
    20px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
```

#### Result

### optimizeSpeed vs. optimizeLegibility

This example shows the difference between the appearance of `optimizeSpeed` and `optimizeLegibility` (in your browser; other browsers may vary).

#### HTML

```html
<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>
```

#### CSS

```css
p {
  font:
    1.5em "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

.speed {
  text-rendering: optimizeSpeed;
}
.legibility {
  text-rendering: optimizeLegibility;
}
```

#### Result

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

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

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

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

See also
--------

* Drawing text in a `<canvas>`
* CSS Text Decoration CSS module
* Related CSS properties
    + `text-decoration` (and its longhand properties, such as `text-decoration-line`, `text-decoration-style`, and `text-decoration-thickness`)
    + `text-emphasis` (and its longhand properties, including `text-emphasis-color`, `text-emphasis-position`, and `text-emphasis-style`)
    + `text-shadow`
    + `text-transform`
* The SVG `text-rendering` attribute
* SVG and CSS


<position> - CSS: Cascading Style Sheets

<position>
==========

The **`<position>`** CSS data type denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the `background-position`, `object-position`, `mask-position` `offset-position`, `offset-anchor` and `transform-origin` properties.

**Note:** The final position described by the `<position>` value does not need to be inside the element's box.

Syntax
------

![Grid showing placement of various values. 0 0 is the top left corner. The four values, right, right center, center left 100%, and top 50% left 100%, are all equivalent, being on the right edge in the middle vertically. The two values, top 75px left 100px and left 100px top 75px, are the same. Bottom left 25% is the same as top 100% left 25%.](/en-US/docs/Web/CSS/position_value/position_type.png)

The `<position>` data type is specified with one or two keywords, with optional offsets.

The keyword values are `center`, `top`, `right`, `bottom`, and `left`. Each keyword represents either an edge of the element's box or the center line between two edges. Depending on the context, `center` represents either the center between the left and right edges, or the center between the top and bottom edges.

If specified, an offset can be either a relative `<percentage>` value or an absolute `<length>` value. Positive values are offset towards the right or the bottom, whichever is appropriate. Negative values are offset in the opposite directions.

If only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to `center`.

```css
/\* 1-value syntax \*/
keyword                  /\* Either the horizontal or vertical position; the other axis defaults to center \*/
value                    /\* The position on the x-axis; the y-axis defaults to 50% \*/

/\* 2-value syntax \*/
keyword keyword          /\* A keyword for each direction (the order is irrelevant) \*/
keyword value            /\* A keyword for horizontal position, value for vertical position \*/
value keyword            /\* A value for horizontal position, keyword for vertical position \*/
value value              /\* A value for each direction (horizontal then vertical) \*/

/\* 4-value syntax \*/
keyword value keyword value /\* Each value is an offset from the keyword that precedes it \*/
```

**Note:** The `background-position` property also accepts a three-value syntax. This is not allowed in other properties that use `<position>`.

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

When animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single easing function for both coordinates, the point will move in a straight line.

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

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

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

```

Examples
--------

### Valid positions
```

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px
```

### Invalid positions
```

left right
bottom top
10px 15px 20px 15px
```

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

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

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

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

See also
--------

* CSS Values and Units
* CSS Values and Units introduction
* `background-position`
* `radial-gradient()`
* `conic-gradient()`


::placeholder - CSS: Cascading Style Sheets

::placeholder
=============

The **`::placeholder`** CSS pseudo-element represents the placeholder text in an `<input>` or `<textarea>` element.

Try it
------

Only the subset of CSS properties that apply to the `::first-line` pseudo-element can be used in a rule using `::placeholder` in its selector.

**Note:** In most browsers, the appearance of placeholder text is a translucent or light gray color by default.

Syntax
------

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

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

### Color contrast

#### Contrast Ratio

Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.

It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputted data.

Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, 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

#### Usability

Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an `<input>` element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.

An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use `aria-describedby` to programmatically associate the `<input>` with its hint.

With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use `aria-describedby` to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.

```html
<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
 id="user-email"
 aria-describedby="user-email-hint"
 name="email"
 type="email" />
```

* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
### Windows High Contrast Mode

Placeholder text will appear with the same styling as user-entered text content when rendered in Windows High Contrast Mode). This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.

### Labels

Placeholders are not a replacement for the `<label>` element. Without a label that has been programmatically associated with an input using a combination of the `for` and `id` attributes, assistive technology such as screen readers cannot parse `<input>` elements.

* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
Examples
--------

### Change placeholder appearance

This example shows some of the adjustments that you can make to the styles of placeholder text.

#### HTML

```html
<input placeholder="Type here" />
```

#### CSS

```css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
```

#### Result

### Opaque text

Some browsers (such as Firefox) set the default `opacity` of placeholders to something less than 100%. If you want fully opaque placeholder text, set `opacity` to `1`.

#### HTML

```html
<input placeholder="Default opacity" />
<input placeholder="Full opacity" class="force-opaque" />
```

#### CSS

```css
::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}
```

#### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # placeholder-pseudo |

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

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

See also
--------

* The `:placeholder-shown` pseudo-class styles an element that *has* an active placeholder.
* Related HTML elements: `<input>`, `<textarea>`
* HTML forms


font-style - CSS: Cascading Style Sheets

font-style
==========

The **`font-style`** CSS property sets whether a font should be styled with a normal, italic, or oblique face from its `font-family`.

Try it
------

**Italic** font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while **oblique** faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use `font-synthesis` to control this behavior).

Syntax
------

```css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

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

The `font-style` property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is `oblique`.

### Values

`normal`

Selects a font that is classified as `normal` within a `font-family`.

`italic`

Selects a font that is classified as `italic`. If no italic version of the face is available, one classified as `oblique` is used instead. If neither is available, the style is artificially simulated.

`oblique`

Selects a font that is classified as `oblique`. If no oblique version of the face is available, one classified as `italic` is used instead. If neither is available, the style is artificially simulated.

`oblique` `<angle>`

Selects a font classified as `oblique`, and additionally specifies an angle for the slant of the text. If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of `-90deg` to `90deg` inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.

In general, for a requested angle of 14 degrees or greater, larger angles are preferred; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).

### Variable fonts

Variable fonts can offer a fine control over the degree to which an oblique face is slanted. You can select this using the `<angle>` modifier for the `oblique` keyword.

For TrueType or OpenType variable fonts, the `"slnt"` variation is used to implement varying slant angles for oblique, and the `"ital"` variation with a value of 1 is used to implement italic values. See `font-variation-settings`.

**Note:** For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which `font-style: oblique` can accept an `<angle>`. The demo loads with `font-style: oblique 23deg;`. Change the value to see the slant of the text change.

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

Large sections of text set with a `font-style` value of `italic` 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 | by computed value type; `normal` animates as `oblique 0deg` |

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

font-style =
  normal                           |
  italic                           |
  oblique <angle [-90deg,90deg]>?

```

Examples
--------

### Font styles
```

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
```

```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```

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

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

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

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

See also
--------

* `font-family`
* `font-weight`
* Fundamental text and font styling


CSS custom properties for cascading variables - CSS: Cascading Style Sheets

CSS custom properties for cascading variables
=============================================

The **CSS custom properties for cascading variables** module adds support for cascading variables in CSS properties and lets you create custom properties to define these variables along with the mechanisms to use custom properties as the values for other CSS properties.

 When working with CSS, you often end up reusing common project-specific values such as widths that work well with your layout, or a set of colors for your color scheme.
 One way of managing repetition in stylesheets is to define a value once and use it many times in other places.
 Custom properties let you create and define custom variables that can be reused, simplifying complex or repetitive rules and making them easier to read and maintain.
 For example, `--dark-grey-text` and `--dark-background` are easier to understand than hexadecimal colors such as `#323831`, and the context of how you use them is more obvious, too.

Custom properties in action
---------------------------

To see how custom properties can be used, move the input slider left to right.
```

<div class="container">
  <div id="color-1">--hue</div>
  <div id="color-2">--hue + 10</div>
  <div id="color-3">--hue + 20</div>
  <div id="color-4">--hue + 30</div>
  <div id="color-5">--hue + 40</div>
  <div id="color-6">--hue + 50</div>
  <div id="color-7">--hue + 60</div>
  <div id="color-8">--hue + 70</div>
</div>
<input type="range" min="0" max="360" value="0" step="0.1" id="hue" />
```

```
const hue = document.querySelector("#hue");

const updateHue = () => {
  document.documentElement.style.setProperty("--hue", hue.value);
};

hue.addEventListener("input", updateHue);
```

```
.container {
  display: grid;
  font-family: sans-serif;
  color: white;
  gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1rem;
}
.container div {
  border-radius: 0.5rem;
  padding: 1rem;
}

input {
  width: 100%;
  margin: 0;
}

:root {
  --hue: 0;
}

#color-1 {
  background-color: hsl(var(--hue) 50% 50%);
}
#color-2 {
  background-color: hsl(calc(var(--hue) + 10) 50% 50%);
}
#color-3 {
  background-color: hsl(calc(var(--hue) + 20) 50% 50%);
}
#color-4 {
  background-color: hsl(calc(var(--hue) + 30) 50% 50%);
}
#color-5 {
  background-color: hsl(calc(var(--hue) + 40) 50% 50%);
}
#color-6 {
  background-color: hsl(calc(var(--hue) + 50) 50% 50%);
}
#color-7 {
  background-color: hsl(calc(var(--hue) + 60) 50% 50%);
}
#color-8 {
  background-color: hsl(calc(var(--hue) + 70) 50% 50%);
}
```

 In these color swatches, the `background-color` is set using the `hsl()` `<color>` function as `hsl(var(--hue) 50% 50%)`.
 Each color swatch increments the `<hue>` value by 10 degrees like `calc(var(--hue) + 10)`, `calc(var(--hue) + 20)` etc.
 As the slider's value changes from 0 up to 360, the value of the `--hue` custom property is updated using `calc()`, and the background color of each box inside the grid is updated, also.

Reference
---------

### Properties

* `--*`
### Functions

* `var()`
Guides
------

Using CSS custom properties (variables)

Explains how to use custom properties in CSS and JavaScript, with hints on handling undefined and invalid values, fallbacks, and inheritance.

Invalid custom properties

Explains how browsers handle property values when a custom property's value is an invalid data type for that property.

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

* CSS Properties and Values API module
    + `@property` at-rule
    + `CSS.registerProperty()` method
Specifications
--------------

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

See also
--------

* CSS cascade and inheritance module
* CSS `env()` function
* CSS `calc()` function
* `getPropertyValue()` method


appearance - CSS: Cascading Style Sheets

appearance
==========

The **`appearance`** CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme.

Try it
------

Before standardization, this property allowed elements to be shown as widgets, such as buttons or check boxes. It was considered a misfeature and authors are encouraged to use only standard keywords now.

**Note:** If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword `none` does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

Syntax
------

```css
/\* CSS Basic User Interface Module Level 4 values \*/
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

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

/\* <compat-auto> values have the same effect as 'auto' \*/
appearance: button;
appearance: checkbox;
```

### Values

 For the following keywords, the user agent selects the appropriate styling based on the element.
 Some examples are provided, but the list is not exhaustive.

`none`

Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded.

`auto`

Acts as `none` on elements with no special styling.

`<compat-special>`

 One of `menulist-button` or `textfield`.
 Both of these values are equivalent to `auto` on elements with no special styling.

`<compat-auto>`

 Possible values are `button`, `checkbox`, `listbox`, `menulist`, `meter`, `progress-bar`, `push-button`, `radio`, `searchfield`, `slider-horizontal`, `square-button`, and `textarea`.
 Keywords which are the equivalent of `auto` for maintaining compatibility with older browsers.

#### Non-standard values

The following values may be operational on historical browser versions using **`-moz-appearance`** or **`-webkit-appearance`** prefix, but not on the standard **`appearance`** property.

Non-standard values
* Firefox entries indicate support using `-moz-appearance`.
* Chrome, Edge and Safari entries below indicate release version support for values used with the `-webkit-appearance` vendor-prefix property.
* Values with an asterisk (\*) have clear intents for removal.
* For each cell of browser version and value:
    + `Y{version}`: indicates a value is supported up to and including `{version}`
    + `N{version}`: support was removed in a release earlier than `{version}`
    + a blank cell indicates that support was never added

| Value | Safari | Firefox | Chrome | Edge |
| --- | --- | --- | --- | --- |
| `attachment` | Y(13.1) |  |  |  |
| `borderless-attachment` | Y(13.1) |  |  |  |
| `button-bevel` | Y(13.1) | N(75) |  | N(80) |
| `caps-lock-indicator` | Y(13.1) |  |  | N(80) |
| `caret` | Y(13.1) | N(75) | Y(73) | N(80) |
| `checkbox-container` |  | N(75) |  |  |
| `checkbox-label` |  | N(75) |  |  |
| `checkmenuitem` |  | N(75) |  |  |
| `color-well` | Y(13.1) |  |  |  |
| `continuous-capacity-level-indicator` | Y(13.1) |  |  |  |
| `default-button` | Y(13.1) |  |  | N(80) |
| `discrete-capacity-level-indicator` | Y(13.1) |  |  |  |
| `inner-spin-button` | Y(13.1) | N(75) | Y(118) \* | Y(119) |
| `image-controls-button` | Y(13.1) |  |  |  |
| `list-button` | Y(13.1) |  |  |  |
| `listitem` | Y(13.1) | N(75) | Y(73) | N(80) |
| `media-enter-fullscreen-button` | Y(13.1) |  | Y(73) |  |
| `media-exit-fullscreen-button` | Y(13.1) |  | Y(73) |  |
| `media-fullscreen-volume-slider` | Y(13.1) |  |  |  |
| `media-fullscreen-volume-slider-thumb` | Y(13.1) |  |  |  |
| `media-mute-button` | Y(13.1) |  |  | N(80) |
| `media-play-button` | Y(13.1) |  |  | N(80) |
| `media-overlay-play-button` | Y(13.1) |  | Y(73) |  |
| `media-return-to-realtime-button` | Y(13.1) |  |  |  |
| `media-rewind-button` | Y(13.1) |  |  |  |
| `media-seek-back-button` | Y(13.1) |  | N(73) |  |
| `media-seek-forward-button` | Y(13.1) |  | N(73) |  |
| `media-toggle-closed-captions-button` | Y(13.1) |  | Y(73) |  |
| `media-slider` | Y(13.1) |  | Y(117) | Y(80) |
| `media-sliderthumb` | Y(13.1) |  | Y(117) | Y(80) |
| `media-volume-slider-container` | Y(13.1) |  | Y(73) |  |
| `media-volume-slider-mute-button` | Y(13.1) |  |  |  |
| `media-volume-slider` | Y(13.1) |  | Y(117) | Y(80) |
| `media-volume-sliderthumb` | Y(13.1) |  | Y(117) | Y(80) |
| `media-controls-background` | Y(13.1) |  | Y(73) |  |
| `media-controls-dark-bar-background` | Y(13.1) |  |  |  |
| `media-controls-fullscreen-background` | Y(13.1) |  | Y(73) |  |
| `media-controls-light-bar-background` | Y(13.1) |  |  |  |
| `media-current-time-display` |  |  | Y(73) |  |
| `media-time-remaining-display` | Y(13.1) |  | Y(73) |  |
| `menulist-text` | Y(13.1) | N(75) | Y(73) | N(80) |
| `menulist-textfield` | Y(13.1) | N(75) | Y(73) | N(80) |
| `meterbar` |  | Y(100) |  |  |
| `number-input` |  | Y(75) |  |  |
| `progress-bar-value` | Y(13.1) |  | Y(73) |  |
| `progressbar` |  | Y(100) |  |  |
| `progressbar-vertical` |  | Y(75) |  |  |
| `range` |  | Y(75) |  |  |
| `range-thumb` |  | Y(75) |  |  |
| `rating-level-indicator` | Y(13.1) |  |  |  |
| `relevancy-level-indicator` | Y(13.1) |  |  |  |
| `scale-horizontal` |  | Y(75) |  |  |
| `scalethumbend` |  | Y(75) |  |  |
| `scalethumb-horizontal` |  | Y(75) |  |  |
| `scalethumbstart` |  | Y(75) |  |  |
| `scalethumbtick` |  | Y(75) |  |  |
| `scalethumb-vertical` |  | Y(75) |  |  |
| `scale-vertical` |  | Y(75) |  |  |
| `scrollbarthumb-horizontal` |  | Y(75) |  |  |
| `scrollbarthumb-vertical` |  | Y(75) |  |  |
| `scrollbartrack-horizontal` |  | Y(75) |  |  |
| `scrollbartrack-vertical` |  | Y(75) |  |  |
| `searchfield-decoration` | Y(13.1) |  |  | N(80) |
| `searchfield-results-decoration` | Y(13.1) | N(75) | N(73) | N(80) |
| `searchfield-results-button` | Y(13.1) |  |  | N(80) |
| `searchfield-cancel-button` | Y(13.1) | N(75) | Y(118) \* | Y(119) |
| `snapshotted-plugin-overlay` | Y(13.1) |  |  |  |
| `sheet` |  |  |  |  |
| `slider-vertical` |  |  | Y(118) \* | Y(119) |
| `sliderthumb-horizontal` |  |  | Y(117) | Y(80) |
| `sliderthumb-vertical` |  |  | Y(117) | Y(80) |
| `textfield-multiline` |  | Y(100) |  |  |
| `-apple-pay-button` | Y(13.1) |  |  |  |

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

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

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

appearance =
  none              |
  auto              |
  <compat-auto>     |
  <compat-special>

<compat-auto> =
  searchfield   |
  textarea      |
  checkbox      |
  radio         |
  menulist      |
  listbox       |
  meter         |
  progress-bar  |
  button

<compat-special> =
  textfield        |
  menulist-button

```

Examples
--------

### Apply custom styling

 The following example shows how to remove the default styling from a checkbox and select element, and apply custom styling.
 The appearance of the checkbox is changed to a circle, and the select element shows how to remove the arrow indicating that the list can be expanded.

#### HTML

```html
<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>default</option>
  <option>option 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>option 2</option>
</select>
```

#### CSS

```css
input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}
```

#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # appearance-switching |

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

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

See also
--------

* `prefers-color-scheme`


animation-duration - CSS: Cascading Style Sheets

animation-duration
==================

The **`animation-duration`** CSS property sets the length of time that an animation takes to complete one cycle.

Try it
------

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

Syntax
------

```css
/\* Single animation \*/
animation-duration: auto; /\* Default \*/
animation-duration: 6s;
animation-duration: 120ms;

/\* Multiple animations \*/
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

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

### Values

`auto`
Experimental

For time-based animations, `auto` is equivalent to a value of `0s` (see below). For CSS scroll-driven animations, `auto` fills the entire timeline with the animation.

``<time>``

The time that an animation takes to complete one cycle. This may be specified in either seconds (`s`) or milliseconds (`ms`). The value must be positive or zero and the unit is required.

If no value is provided, the default value of `0s` is used, in which case the animation still executes (the `animationStart` and `animationEnd` events are fired). Whether or not the animation will be visible when the duration is `0s` will depend on the value of `animation-fill-mode`, as explained below:

* If `animation-fill-mode` is set to `backwards` or `both`, the first frame of the animation as defined by `animation-direction` will be displayed during `animation-delay` countdown.
* If `animation-fill-mode` is set to `forwards` or `both`, the last frame of the animation will be displayed, as defined by `animation-direction`, after the `animation-delay` expires.
* If `animation-fill-mode` is set to `none`, the animation will have no visible effect.

**Note:** Negative values are invalid, causing the declaration to be ignored. Some early, prefixed, implementations may consider them as identical to `0s`.

**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-duration` value in seconds or milliseconds doesn't really make sense. In tests, it seemed to have no effect on scroll progress timeline animations, while on view progress timeline animations it seemed to push the animation to happen nearer the end of the timeline. However, Firefox requires an `animation-duration` to be set for it to successfully apply the animation. You are therefore advised to set `animation-duration` to `1ms` so that animations will work in Firefox, but the effect is not altered too much by it.

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

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

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

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

```

Examples
--------

### Setting animation duration

This animation has an animation-duration of 0.7 seconds.

#### 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 more examples.

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

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

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