scroll-padding-block-start - CSS: Cascading Style Sheets

scroll-padding-block-start
==========================

The `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
scroll-padding-block-start: auto;

/\* <length> values \*/
scroll-padding-block-start: 10px;
scroll-padding-block-start: 1em;
scroll-padding-block-start: 10%;

/\* Global values \*/
scroll-padding-block-start: inherit;
scroll-padding-block-start: initial;
scroll-padding-block-start: revert;
scroll-padding-block-start: revert-layer;
scroll-padding-block-start: unset;
```

### Values

`<length-percentage>`

An inwards offset from the block start edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-padding-block-start =
  auto                       |
  <length-percentage [0,∞]>

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

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap


:empty - CSS: Cascading Style Sheets

:empty
======

The **`:empty`** CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS `content` do not affect whether an element is considered empty.

Try it
------

**Note:** In Selectors Level 4, the `:empty` pseudo-class was changed to act like `:-moz-only-whitespace`, but no browser currently supports this yet.

Syntax
------

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

Examples
--------

### HTML

```html
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p>
    <!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
  </p>
</div>
```

### CSS
```

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

```css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
```

### Result

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

Assistive technology such as screen readers cannot parse interactive content that is empty. All interactive content must have an accessible name, which is created by providing a text value for the interactive control's parent element (anchors, buttons, etc.). Accessible names expose the interactive control to the accessibility tree, an API that communicates information useful for assistive technologies.

The text that provides the interactive control's accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parsable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose.

* What is an accessible name? | The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN Understanding WCAG, Guideline 2.4 explanations
* Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

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

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

See also
--------

* `:-moz-only-whitespace`
Non-standard
 – The prefixed implementation of the changes in Selectors Level 4
* `:blank`
Experimental


flex - CSS: Cascading Style Sheets

flex
====

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

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

* Learn more
* See full compatibility
* Report feedback
The **`flex`** CSS shorthand property sets how a flex *item* will grow or shrink to fit the space available in its flex container.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `flex-grow`
* `flex-shrink`
* `flex-basis`
Syntax
------

```css
/\* Keyword values \*/
flex: auto;
flex: initial;
flex: none;

/\* One value, unitless number: flex-grow
flex-basis is then equal to 0. \*/
flex: 2;

/\* One value, width/height: flex-basis \*/
flex: 10em;
flex: 30%;
flex: min-content;

/\* Two values: flex-grow | flex-basis \*/
flex: 1 30px;

/\* Two values: flex-grow | flex-shrink \*/
flex: 2 2;

/\* Three values: flex-grow | flex-shrink | flex-basis \*/
flex: 2 2 10%;

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

The `flex` property may be specified using one, two, or three values.

* **One-value syntax:** the value must be one of:
    + a valid value for `<flex-grow>`: then the shorthand expands to `flex: <flex-grow> 1 0`.
    + a valid value for `<flex-basis>`: then the shorthand expands to `flex: 1 1 <flex-basis>`.
    + the keyword `none` or one of the global keywords.
* **Two-value syntax:**
    + The first value must be a valid value for `flex-grow`.
    + The second value must be one of:
        - a valid value for `flex-shrink`: then the shorthand expands to `flex: <flex-grow> <flex-shrink> 0`.
        - a valid value for `flex-basis`: then the shorthand expands to `flex: <flex-grow> 1 <flex-basis>`.
* **Three-value syntax:** the values must be in the following order:
    1. a valid value for `flex-grow`.
    2. a valid value for `flex-shrink`.
    3. a valid value for `flex-basis`.
### Values

`initial`

The item is sized according to its `width` and `height` properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "`flex: 0 1 auto`".

`auto`

The item is sized according to its `width` and `height` properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "`flex: 1 1 auto`".

`none`

The item is sized according to its `width` and `height` properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "`flex: 0 0 auto`".

`<'flex-grow'>`

Defines the `flex-grow` of the flex item. Negative values are considered invalid. Defaults to `1` when omitted. (initial is `0`)

`<'flex-shrink'>`

Defines the `flex-shrink` of the flex item. Negative values are considered invalid. Defaults to `1` when omitted. (initial is `1`)

`<'flex-basis'>`

Defines the `flex-basis` of the flex item. A preferred size of `0` must have a unit to avoid being interpreted as a flexibility. Defaults to `0` when omitted. (initial is `auto`)

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

For most purposes, authors should set `flex` to one of the following values: `auto`, `initial`, `none`, or a positive unitless number. To see the effect of these values, try resizing the flex containers below:
```

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item initial">initial</div>
  <div class="item initial">initial</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item initial">initial</div>
  <div class="item none">none</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item four">4</div>
  <div class="item two">2</div>
  <div class="item one">1</div>
</div>
```

```
\* {
  box-sizing: border-box;
}

.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}
```

By default flex items don't shrink below their minimum content size. To change this, set the item's `min-width` or `min-height`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| Applies to | flex items, including in-flow pseudo-elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `flex-grow`: as specified
* `flex-shrink`: as specified
* `flex-basis`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `flex-grow`: a number
* `flex-shrink`: a number
* `flex-basis`: a length, percentage or calc();
 |

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

flex =
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

```

Examples
--------

### Setting flex: auto

This example shows how a flex item with `flex: auto` grows to absorb any free space in the container.

#### HTML

```html
<div id="flex-container">
  <div id="flex-auto">flex: auto (click to toggle raw box)</div>
  <div id="flex-initial">flex: initial</div>
</div>
```

#### CSS

```css
#flex-container {
  display: flex;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  padding: 1rem;
}

#flex-auto {
  flex: auto;
  border: 1px solid #f00;
}

#flex-initial {
  border: 1px solid #000;
}
```

#### JavaScript

```js
const flexAuto = document.getElementById("flex-auto");
const flexInitial = document.getElementById("flex-initial");
flexAuto.addEventListener("click", () => {
  flexInitial.style.display =
    flexInitial.style.display === "none" ? "block" : "none";
});
```

#### Result

The flex container contains two flex items:

* "flex: auto" has a `flex` value of `auto`
* "flex: initial" has a `flex` value of `initial`

The "flex: initial" item takes up as much space as its width requires, but does not expand to take up any more space. All the remaining space is taken up by "flex: auto".

When you click "flex: auto", we set "flex: initial"'s `display` property to `none`, removing it from the layout. The "flex: auto" item then expands to occupy all the available space in the container.

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis*


padding-left - CSS: Cascading Style Sheets

padding-left
============

The **`padding-left`** CSS property sets the width of the padding area to the left of an element.

Try it
------

An element's padding area is the space between its content and its border.

**Note:** The `padding` property can be used to set paddings on all four sides of an element with a single declaration.

Syntax
------

```css
/\* <length> values \*/
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/\* <percentage> value \*/
padding-left: 10%;

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

The `padding-left` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by `writing-mode`) of the containing block. Must be nonnegative.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

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

padding-left =
  <length-percentage [0,∞]>

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

```

Examples
--------

### Setting left padding using pixels and percentages

```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

See also
--------

* Introduction to the CSS basic box model
* `padding-top`, `padding-right`, `padding-bottom` and the `padding` shorthand
* The mapped logical properties: `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` and the shorthands `padding-block` and `padding-inline`


background-repeat - CSS: Cascading Style Sheets

background-repeat
=================

The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

Try it
------

By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using `round`) or evenly distributed from end to end (using `space`).

Syntax
------

```css
/\* Keyword values \*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/\* Two-value syntax: horizontal | vertical \*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

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

### Values

`<repeat-style>`

The one-value syntax is a shorthand for the full two-value syntax:

|  |  |
| --- | --- |
| **Single value** | **Two-value equivalent** |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior. Here is an explanation of how each option works for either direction:

|  |  |
| --- | --- |
| `repeat` |
 The image is repeated as much as needed to cover the whole background
 image painting area. The last image will be clipped if it doesn't fit.
  |
| `space` |
 The image is repeated as much as possible without clipping. The first
 and last images are pinned to either side of the element, and whitespace
 is distributed evenly between the images. The
 `background-position` property is ignored unless
 only one image can be displayed without clipping. The only case where
 clipping happens using `space` is when there isn't enough
 room to display one image.
  |
| `round` |
 As the allowed space increases in size, the repeated images will stretch
 (leaving no gaps) until there is room (space left >= half of the image
 width) for another one to be added. When the next image is added, all of
 the current ones compress to allow room. Example: An image with an
 original width of 260px, repeated three times, might stretch until each
 repetition is 300px wide, and then another image will be added. They
 will then compress to 225px.
  |
| `no-repeat` |
 The image is not repeated (and hence the background image painting area
 will not necessarily be entirely covered). The position of the
 non-repeated background image is defined by the
 `background-position` CSS property.
  |

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

|  |  |
| --- | --- |
| Initial value | `repeat` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | a list, each item consisting of two keywords, one per dimension |
| Animation type | discrete |

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

background-repeat =
  <repeat-style>#

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

```

Examples
--------

### Setting background-repeat

#### HTML

```html
<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    repeat-x
    <div class="three"></div>
  </li>
  <li>
    repeat-y
    <div class="four"></div>
  </li>
  <li>
    space
    <div class="five"></div>
  </li>
  <li>
    round
    <div class="six"></div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>
```

#### CSS

```css
/\* Shared for all DIVS in example \*/
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 160px;
  height: 70px;
}

/\* Background repeats \*/
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/\* Multiple images \*/
.seven {
  background-image: url(starsolid.gif), url(favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}
```

#### Result

In this example, each list item is matched with a different value of `background-repeat`.

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-repeat |

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

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

See also
--------

* Using multiple backgrounds


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

-webkit-mask-repeat-y
=====================

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

The `-webkit-mask-repeat-y` property sets whether and how a mask image is repeated (tiled) vertically.

Syntax
------

```css
/\* Keyword values \*/
-webkit-mask-repeat-y: repeat;
-webkit-mask-repeat-y: no-repeat;
-webkit-mask-repeat-y: space;
-webkit-mask-repeat-y: round;

/\* Multiple values \*/
-webkit-mask-repeat-y: repeat, no-repeat, space;

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

### Values

repeat

The mask image is repeated vertically.

no-repeat

The mask image is not repeated vertically; only one copy of the mask image is drawn in vertical direction. The vertical remainder of the masked element's content is not displayed.

repeat

The mask image is repeated vertically.

space

The image is repeated as much as possible without clipping. The first and last images are pinned to the top and bottom edge of the element, and whitespace is distributed evenly between the images. The `mask-position` property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn't enough room to display one image.

round

As the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. They will then compress to a height of 225px.

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

|  |  |
| --- | --- |
| Initial value | `repeat` |
| Applies to | all elements |
| Inherited | no |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | discrete |

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

-webkit-mask-repeat-y =
  repeat | no-repeat | space | round
```

Examples
--------

### Using a repeating or non-repeating mask image

```css
.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: repeat;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: no-repeat;
}
```

### Using multiple mask images

You can specify a different `<repeat-style>` for each mask image, separated by commas:

```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-y: repeat, space;
}
```

Each image is matched with the corresponding repeat style, from first specified to last.

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

Not part of any standard.

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

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

See also
--------

`-webkit-mask-repeat`, `-webkit-mask-repeat-x`


border-bottom-width - CSS: Cascading Style Sheets

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

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

Try it
------

Syntax
------

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

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

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

### Values

`<line-width>`

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

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

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

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

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

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

border-bottom-width =
  <line-width>

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

```

Examples
--------

### Comparing bottom border widths

#### HTML

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

#### CSS

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

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

#### Result

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

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

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

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

See also
--------

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


shape-margin - CSS: Cascading Style Sheets

shape-margin
============

The **`shape-margin`** CSS property sets a margin for a CSS shape created using `shape-outside`.

Try it
------

The margin lets you adjust the distance between the edges of the shape (the **float element**) and the surrounding content.

Syntax
------

```css
/\* <length> values \*/
shape-margin: 10px;
shape-margin: 20mm;

/\* <percentage> value \*/
shape-margin: 60%;

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

### Values

`<length-percentage>`

Sets the margin of the shape to a `<length>` value or to a `<percentage>` of the width of the element's containing block.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | floats |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length, percentage or calc(); |

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

shape-margin =
  <length-percentage [0,∞]>

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

```

Examples
--------

### Adding a margin to a polygon

#### HTML

```html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>
```

#### CSS

```css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-margin-property |

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

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

See also
--------

* CSS Shapes
* Overview of CSS Shapes
* `shape-outside`
* `shape-image-threshold`
* `<basic-shape>`


overflow-wrap - CSS: Cascading Style Sheets

overflow-wrap
=============

The **`overflow-wrap`** CSS property applies to text, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.

Try it
------

**Note:** In contrast to `word-break`, `overflow-wrap` will only create a break if an entire word cannot be placed on its own line without overflowing.

The property was originally a nonstandard and unprefixed Microsoft extension called `word-wrap`, and was implemented by most browsers with the same name. It has since been renamed to `overflow-wrap`, with `word-wrap` being an alias.

Syntax
------

```css
/\* Keyword values \*/
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

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

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

### Values

`normal`

Lines may only break at normal word break points (such as a space between two words).

`anywhere`

To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.

`break-word`

The same as the `anywhere` value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | non-replaced inline elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

overflow-wrap =
  normal      |
  break-word  |
  anywhere

```

Examples
--------

### Comparing overflow-wrap, word-break, and hyphens

This example compares the results of `overflow-wrap`, `word-break`, and `hyphens` when breaking up a long word.

#### HTML

```html
<p>
  They say the fishing is excellent at Lake
  <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>normal</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, without
  <code>lang</code> attribute)
</p>
<p lang="en">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, German rules)
</p>
```

#### CSS

```css
p {
  width: 13em;
  margin: 2px;
  background: gold;
}

.ow-anywhere {
  overflow-wrap: anywhere;
}

.ow-break-word {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}
```

#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # overflow-wrap-property |

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

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

See also
--------

* `word-break`
* `hyphens`
* `text-overflow`
* Guide to wrapping and breaking text


@font-face - CSS: Cascading Style Sheets

@font-face
==========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`@font-face`** CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.

Syntax
------

```css
@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}
```

### Descriptors

`ascent-override`

Defines the ascent metric for the font.

`descent-override`

Defines the descent metric for the font.

`font-display`

Determines how a font face is displayed based on whether and when it is downloaded and ready to use.

`font-family`

Specifies a name that will be used as the font face value for font properties.

`font-stretch`

A `font-stretch` value. Accepts two values to specify a range that is supported by a font-face, for example `font-stretch: 50% 200%;`

`font-style`

A `font-style` value. Accepts two values to specify a range that is supported by a font-face, for example `font-style: oblique 20deg 50deg;`

`font-weight`

A `font-weight` value. Accepts two values to specify a range that is supported by a font-face, for example `font-weight: 100 400;`

**Note:** The font-variant descriptor was removed from the specification in 2018. The `font-variant` value property is supported, but there is no descriptor equivalent.

`font-feature-settings`

Allows control over advanced typographic features in OpenType fonts.

`font-variation-settings`

Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.

`line-gap-override`

Defines the line gap metric for the font.

`size-adjust`

Defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.

`src`

Specifies references to font resources including hints about the font format and technology. It is required for the @font-face rule to be valid.

`unicode-range`

The range of Unicode code points to be used from the font.

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

It's common to use both `url()` and `local()` together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.

If the `local()` function is provided, specifying a font name to look for on the user's device, and if the user agent finds a match, that local font is used. Otherwise, the font resource specified using the `url()` function is downloaded and used.

 Browsers attempt to load resources in their list declaration order, so usually `local()` should be written before `url()`. Both functions are optional, so a rule block containing only one or more `local()` without `url()` is possible.
 If a more specific fonts with `format()` or `tech()` values are desired, these should be listed *before* versions that don't have these values, as the less-specific variant would otherwise be tried and used first.

By allowing authors to provide their own fonts, `@font-face` makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an internet connection.

**Note:** Fallback strategies for loading fonts on older browsers are described in the `src` descriptor page.

The `@font-face` at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

### Font MIME Types

| Format | MIME type |
| --- | --- |
| TrueType | `font/ttf` |
| OpenType | `font/otf` |
| Web Open Font Format | `font/woff` |
| Web Open Font Format 2 | `font/woff2` |

### Notes

* Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
* `@font-face` cannot be declared within a CSS selector. For example, the following will not work:

```css
.className {
  @font-face {
    font-family: "MyHelvetica";
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url("MgOpenModernaBold.ttf");
    font-weight: bold;
  }
}
```

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

@font-face =
  @font-face { <declaration-list> }

```

Examples
--------

### Specifying a downloadable font

This example specifies a downloadable font to use, applying it to the entire body of the document:

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
 @font-face {
 font-family: "Bitstream Vera Serif Bold";
 src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
 }

 body {
 font-family: "Bitstream Vera Serif Bold", serif;
 }
 </style>
  </head>
  <body>
    This is Bitstream Vera Serif Bold.
  </body>
</html>
```

The output of this example code looks like so:

### Specifying local font alternatives

In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (both the full font name and the Postscript name are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:

```css
@font-face {
  font-family: "MyHelvetica";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

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

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

See also
--------

* About WOFF
* FontSquirrel @font-face generator
* Beautiful fonts with @font-face
* Font Library


overflow-y - CSS: Cascading Style Sheets

overflow-y
==========

Baseline 2022
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the `overflow` shorthand property.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;

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

The `overflow-y` property is specified as a single `<overflow>` keyword value.

If `overflow-x` is `hidden`, `scroll`, or `auto` and the `overflow-y` property is `visible` (default), the value will be implicitly computed as `auto`.

### Values

`visible`

Overflow content is not clipped and may be visible outside the element's padding box at the top and bottom edges. The element box is not a scroll container.

`hidden`

Overflow content is clipped if necessary to fit vertically in the elements' padding box. No scroll bars are provided.

`clip`

Overflow content is clipped at the element's *overflow clip edge* that is defined using the `overflow-clip-margin` property. As a result, content overflows the element's padding box by the `<length>` value of `overflow-clip-margin` or by `0px` if not set. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with `display: flow-root`. The element box is not a scroll container.

`scroll`

Overflow content is clipped if necessary to fit vertically inside the element's padding box. Browsers display scroll bars in the vertical direction whether or not any content is actually clipped. (This prevents scroll bars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

`auto`

Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike `scroll`, user agents display scroll bars *only if* the content is overflowing, hiding scroll bars by default. If content fits inside the element's padding box, it looks the same as with `visible`, but still establishes a new block-formatting context.

**Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space.

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

|  |  |
| --- | --- |
| Initial value | `visible` |
| Applies to | Block-containers, flex containers, and grid containers |
| Inherited | no |
| Computed value | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip |
| Animation type | discrete |

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

overflow-y =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

Examples
--------

### Setting overflow-y behavior

#### HTML

```html
<ul>
  <li>
    <code>overflow-y:hidden</code> — hides the text outside the box
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code> — always adds a scrollbar
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code> — displays the text outside the box if
    needed
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code> — equivalent to <code>scroll</code>
    on most browsers
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>
```

#### CSS

```css
div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 120px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-properties |

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

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

See also
--------

* `clip`, `display`, `text-overflow`, `white-space`
* CSS overflow module
* CSS building blocks: Overflowing content


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

::-webkit-progress-inner-element
================================

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

The **`::-webkit-progress-inner-element`** CSS pseudo-element represents the outermost container of the `<progress>` element. It is the parent of the `::-webkit-progress-bar` pseudo-element.

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

Syntax
------

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

Examples
--------

These examples work only on Blink and WebKit.

### Adding a black border around the progress bar

In this example, a 2px black border is added around the progress bar.

#### HTML

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

#### CSS

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

::-webkit-progress-inner-element {
  border: 2px solid black;
}
```

#### Result

#### Result screenshot

If you're not using a Blink or WebKit browser, the above code results in a progress bar looking like this:

![Progressbar is a long green and grey box with a black border. The left 20% of the box is green. The right 80% is grey.](/en-US/docs/Web/CSS/::-webkit-progress-inner-element/-webkit-progress-inner-element_example.png)

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

Not part of any standard.

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

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

See also
--------

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


animation-iteration-count - CSS: Cascading Style Sheets

animation-iteration-count
=========================

The **`animation-iteration-count`** CSS property sets the number of times an animation sequence should be played before stopping.

Try it
------

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

Syntax
------

```css
/\* Keyword value \*/
animation-iteration-count: infinite;

/\* <number> values \*/
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/\* Multiple values \*/
animation-iteration-count: 2, 0, infinite;

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

The **`animation-iteration-count`** property is specified as one or more comma-separated values.

### Values

`infinite`

The animation will repeat forever.

``<number>``

The number of times the animation will repeat; this is `1` by default. You may specify non-integer values to play part of an animation cycle: for example, `0.5` will play half of the animation cycle. Negative values are invalid.

**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-iteration-count` causes the animation to repeat that number of times over the course of the timeline's progression. If an `animation-iteration-count` is not provided, the animation will only occur once. `infinite` is a valid value for scroll-driven animations, but it results in an animation that doesn't work.

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

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

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

animation-iteration-count =
  <single-animation-iteration-count>#

<single-animation-iteration-count> =
  infinite        |
  <number [0,∞]>

```

Examples
--------

### Setting iteration count

This animation will run 10 times.

#### HTML

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

#### CSS

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

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

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

#### Result

Hover over the rectangle to start the animation.

See CSS animations for examples.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-iteration-count |

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

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

See also
--------

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


CSS syntax - CSS: Cascading Style Sheets

CSS syntax
==========

The **CSS syntax** module describes, in general terms, the structure and syntax of cascading stylesheets, or CSS. It defines CSS as the language for describing the rendering of structured documents (such as HTML and XML), on the web and elsewhere.

This module doesn't define any properties, data types, functions, or at-rules. Rather, it elaborates on how all of these features should be defined and how user agents should parse CSS.

At-rules
--------

* none

**Note:** The module explicitly states that `@charset` is not an actual at-rule, but rather an unrecognized legacy rule that should be omitted when a stylesheet is grammar-checked.

Reference
---------

### Key concepts

* `at-rule`
* character escaping
* CSS comments
* CSS declaration
* CSS declaration block
* CSS function
* invalid
* style rule
### Glossary terms

* CSS descriptor
* parse
* stylesheet
* whitespace
Guides
------

Syntax

Overview of CSS syntax, including CSS declarations, declaration blocks, rulesets, and statements.

Value definition syntax

Explains the formal grammar for defining valid values for CSS properties and functions, along with semantic constraints. A guide for understanding CSS component value types, combinators, and multipliers.

CSS syntax error handling

Overview of how the user agent handles invalid CSS.

Learn CSS first steps: CSS syntax

Introductory guide to CSS, including an introduction to CSS syntax.

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

CSS selectors module:

* CSS specificity

CSS cascade module:

* `@import` at-rule
* `important` flag
* Initial values
* Computed values
* Used values
* Actual values
* CSS inheritance
* CSS property

CSS custom properties for cascading variables module:

* custom property (`--*`)
* `var()` function

CSS conditional rules module:

* `@media` at-rule
* `@supports` at-rule

CSS Object Model (CSSOM) API:

* `cssText` property
* `insertRule(rule)` method
* `replace(text)` method

WHATWG specification:

* `<style>` element
* `<link>` element
* `class` attribute
* `rel` attribute
Specifications
--------------

| Specification |
| --- |
| Unknown specification  |

See also
--------

* CSS selectors module
* CSS values and units module


CSS values and units - CSS: Cascading Style Sheets

CSS values and units
====================

Every CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types — values and units — that CSS properties accept. Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.

Textual data types
------------------

* `<custom-ident>`
* Pre-defined keywords as an `<ident>`
* `<string>`
* `url()`

Text data types are either `<string>`, a quoted series of characters, or an `<ident>`, a "CSS Identifier" which is an unquoted string. A `<string>` must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as `<ident>` or `<custom-ident>`, must be unquoted.

In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a `<custom-ident>`, `<string>`, or both.

When both quoted and unquoted user defined text values are permitted, the specification will list `<custom-ident> | <string>`, meaning quotes are optional, such as is the case with animation names:

```css
@keyframe validIdent {
  /\* keyframes go here \*/
}
@keyframe 'validString' {
  /\* keyframes go here \*/
}
```

Some text values are not valid if encompassed in quotes. For example, the value of `grid-area` can be a `<custom-ident>`, so if we had a grid area named `content` we would use it without quotes:

```css
.item {
  grid-area: content;
}
```

In comparison, a data type that is a `<string>`, such as a string value of the `content` property, must be quoted:

```css
.item::after {
  content: "This is my content.";
}
```

While you can generally create any name you want, including using emojis, the identifier can't be `none`, `unset`, `initial`, or `inherit`, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the `<custom-ident>` and `<string>` reference pages for more details.

### Pre-defined keyword values

Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.

When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for `float`.
```

left | right | none | inline-start | inline-end
```

Such values are used without quotes:

```css
.box {
  float: left;
}
```

### CSS-wide values

In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values `initial`, `inherit`, `unset`, `revert`, and `revert-layer`, which explicitly specify defaulting behaviors.

`initial`

Represents the value specified as the property's initial value.

`inherit`

Represents the computed value of the property on the element's parent, provided it is inherited.

`unset`

Acts as either `inherit` or `initial`, depending on whether the property is inherited or not.

`revert`

Resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

`revert-layer`

Rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of the property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.

### URLs

A `url()` type uses functional notation, which accepts a `<string>` that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.

```css
.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}
```

The parameter for `url()` can be either quoted or unquoted. If unquoted, it is parsed as a `<url-token>`, which has extra requirements including the escaping of certain characters. See `url()` for more information.

Numeric data types
------------------

* `<integer>`
* `<number>`
* `<dimension>`
* `<percentage>`
### Integers

An integer is one or more decimal digits, `0` through `9`, such as `1024` or `-55`. An integer may be preceded by a `+` or `-` symbol, with no space between the symbol and the integer.

### Numbers

A `<number>` represents a real number, which may or may not have a decimal point with a fractional component, for example `0.255`, `128` or `-1.2`. Numbers may also be preceded by a `+` or `-` symbol.

### Dimensions

A `<dimension>` is a `<number>` with a unit attached to it, for example `45deg`, `100ms`, or `10px`. The attached unit identifier is case insensitive. There is never a space or any other characters between the number and the unit identifier: i.e. `1 cm` is not valid.

CSS uses dimensions to specify:

* `<length>` (Distance units)
* `<angle>`
* `<time>`
* `<frequency>`
* `<flex>`
* `<resolution>`

These are all covered in subsections below.

#### Distance units

Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the `<length>` type. There are two types of lengths in CSS: relative and absolute. Relative length units specify a length in relation to something else.

There are two types of relative lengths: font-relative lengths and viewport-percentage lengths. These both come in two types. Font-relative length units are either local font-relative or root font-relative. Viewport percentage lengths are either relative to the viewport height or width size or, as defined in the CSS Containment module, relative to a container.

##### Local font-relative lengths

 Local font-relative lengths are relative to the "local" font size or line height, specifying a length in relation to a computed size of a feature of the element itself, or relative to the element's inherited value in the case of a circular reference, such as the `em` value for a `font-size` property or a `lh` value for a `line-height` property.
 For example, `em` is relative to the font size on the element and `ex` is relative to the x-height of the element's font.

| Unit | Relative to |
| --- | --- |
| `cap` | Cap height (the nominal height of capital letters) of the element's font. |
| `ch` | Average character advance of a narrow glyph in the element's font, as represented by the "0" (ZERO, U+0030) glyph. |
| `em` | Font size of the element's font. |
| `ex` | x-height of the element's font. |
| `ic` | Average character advance of a full-width glyph in the element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph. |
| `lh` | Line height of the element. |

##### Root font-relative lengths

 Root font-relative lengths specify a length in relation to the element's `root element` ancestor, such as `<html>` or `<SVG>`.
 For example, `rem` is relative to the font size on the root element and `rex` is the x-height of the root element's font.

| Unit | Relative to |
| --- | --- |
| `rcap` | Cap height (the nominal height of capital letters) of the root element's font. |
| `rch` | Average character advance of a narrow glyph in the root element's font, as represented by the "0" (ZERO, U+0030) glyph. |
| `rem` | Font size of the root element's font. |
| `rex` | x-height of the root element's font. |
| `ric` | Average character advance of a full-width glyph in the root element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph. |
| `rlh` | Line height of the root element. |

##### Viewport units

 Viewport unit lengths specify a length relative to the dimensions of the viewport.
 For example, `vw` is relative to the width of the viewport and `vh` is relative to the height of the viewport.

| Unit | Relative to |
| --- | --- |
| `dvh` | 1% of the dynamic viewport's height. |
| `dvw` | 1% of the dynamic viewport's width. |
| `lvh` | 1% of the large viewport's height. |
| `lvw` | 1% of the large viewport's width. |
| `svh` | 1% of the small viewport's height. |
| `svw` | 1% of the small viewport's width. |
| `vb` | 1% of viewport's size in the root element's block axis. |
| `vh` | 1% of viewport's height. |
| `vi` | 1% of viewport's size in the root element's inline axis. |
| `vmax` | 1% of viewport's larger dimension. |
| `vmin` | 1% of viewport's smaller dimension. |
| `vw` | 1% of viewport's width. |

##### Container units

 Container query length units specify a length relative to the dimensions of a query container.
 For example, `cqw` is relative to the width of the query container and `cqh` is relative to the height of the query container.

| Unit | Relative to |
| --- | --- |
| `cqb` | 1% of a query container's block size |
| `cqh` | 1% of a query container's height |
| `cqi` | 1% of a query container's inline size |
| `cqmax` | The larger value of `cqi` or `cqb` |
| `cqmin` | The smaller value of `cqi` or `cqb` |
| `cqw` | 1% of a query container's width |

#### Absolute length units

Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, `mm` is a physical millimeter, 1/10th of a centimeter.

| Unit | Name | Equivalent to |
| --- | --- | --- |
| `cm` | Centimeters | 1cm = 96px/2.54 |
| `in` | Inches | 1in = 2.54cm = 96px |
| `mm` | Millimeters | 1mm = 1/10th of 1cm |
| `pc` | Picas | 1pc = 1/6th of 1in |
| `pt` | Points | 1pt = 1/72th of 1in |
| `px` | Pixels | 1px = 1/96th of 1in |
| `Q` | Quarter-millimeters | 1Q = 1/40th of 1cm |

When including a length value, if the length is `0`, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

##### Angle units

Angle values are represented by the type `<angle>` and accept the following values:

| Unit | Name | Description |
| --- | --- | --- |
| `deg` | Degrees | There are 360 degrees in a full circle. |
| `grad` | Gradians | There are 400 gradians in a full circle. |
| `rad` | Radians | There are 2π radians in a full circle. |
| `turn` | Turns | There is 1 turn in a full circle. |

##### Time units

Time values are represented by the type `<time>`. When including a time value, the unit identifier — the `s` or `ms` — is required. It accepts the following values.

| Unit | Name | Description |
| --- | --- | --- |
| `ms` | Milliseconds | There are 1,000 milliseconds in a second. |
| `s` | Seconds |  |

##### Frequency units

Frequency values are represented by the type `<frequency>`. It accepts the following values.

| Unit | Name | Description |
| --- | --- | --- |
| `Hz` | Hertz | Represents the number of occurrences per second. |
| `kHz` | KiloHertz | A kiloHertz is 1000 Hertz. |

`1Hz`, which can also be written as `1hz` or `1HZ`, is one cycle per second.

##### Flex units

Flex units are represented by the type `<flex>`. It accepts the following value.

| Unit | Name | Description |
| --- | --- | --- |
| `fr` | Flex | Represents a flexible length within a grid container |

##### Resolution units

Resolution units are represented by the type `<resolution>`. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

| Unit | Description |
| --- | --- |
| `dpcm` | Dots per centimeter. |
| `dpi` | Dots per inch. |
| `dppx`, `x` | Dots per px unit. |

#### Percentages

A `<percentage>` is a type that represents a fraction of some other value.

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

As an example, if you specify the `width` of a box as a percentage, it refers to the percentage of the box's parent's computed width:

```css
.box {
  width: 50%;
}
```

### Mixing percentages and dimensions

Some properties accept a dimension that could be either one of two types, for example a `<length>` **or** a `<percentage>`. In this case the allowed value is detailed in the specification as a combination unit, e.g. `<length-percentage>`. Other possible combinations are as follows:

* `<frequency-percentage>`
* `<angle-percentage>`
* `<time-percentage>`
### Special data types (defined in other specs)

* `<color>`
* `<image>`
* `<position>`

#### Color

The `<color>` value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

#### Image

The `<image>` value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

#### Position

The `<position>` type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a `background-position` and therefore specified in the CSS Backgrounds and Borders specification.

### Functional notation

* `calc()`
* `min()`
* `max()`
* `minmax()`
* `clamp()`
* `toggle()`
* `attr()`

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis `(` followed by the argument(s) to the notation followed by a right parenthesis `)`. Functions can take multiple arguments, which are formatted similarly to a CSS property value.

White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for `min()`, `max()`, `minmax()`, and `clamp()` functions.)

Some legacy functional notations such as `rgba()` use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

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

| Specification |
| --- |
| CSS Values and Units Module Level 4  |
| CSS Color Module Level 4  |
| CSS Images Module Level 3  |

See also
--------

* CSS Basic Data Types
* Introduction to CSS: Values and Units
* Trigonometric functions in CSS


font-weight - CSS: Cascading Style Sheets

font-weight
===========

The **`font-weight`** CSS property sets the weight (or boldness) of the font. The weights available depend on the `font-family` that is currently set.

Try it
------

Syntax
------

```css
/\* <font-weight-absolute> keyword values \*/
font-weight: normal;
font-weight: bold;

/\* <font-weight-absolute> numeric values [1,1000] \*/
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /\* normal \*/
font-weight: 500;
font-weight: 600;
font-weight: 700; /\* bold \*/
font-weight: 800;
font-weight: 900;

/\* Keyword values relative to the parent \*/
font-weight: lighter;
font-weight: bolder;

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

The `font-weight` property is specified using either a `<font-weight-absolute>` value or a relative weight value, as listed below.

### Values

`normal`

Normal font weight. Same as `400`.

`bold`

Bold font weight. Same as `700`.

`<number>`

A `<number>` value between 1 and 1000, both values included. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. This allows fine-grain control for variable fonts. For non-variable fonts, if the exact specified weight is unavailable, a fallback weight algorithm is used — numeric values that are divisible by 100 correspond to common weight names, as described in the Common weight name mapping section below.

`lighter`

One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

`bolder`

One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

### Fallback weights

If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:

* If the target weight given is between `400` and `500` inclusive:
    + Look for available weights between the target and `500`, in ascending order.
    + If no match is found, look for available weights less than the target, in descending order.
    + If no match is found, look for available weights greater than `500`, in ascending order.
* If a weight less than `400` is given, look for available weights less than the target, in descending order. If no match is found, look for available weights greater than the target, in ascending order.
* If a weight greater than `500` is given, look for available weights greater than the target, in ascending order. If no match is found, look for available weights less than the target, in descending order.
### Meaning of relative weights

When `lighter` or `bolder` is specified, the below chart shows how the absolute font weight of the element is determined.

Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font family has more weights available, they are ignored for the purposes of relative weight calculation.

| Inherited value | `bolder` | `lighter` |
| --- | --- | --- |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |

### Common weight name mapping

The numerical values `100` to `900` roughly correspond to the following common weight names (see the OpenType specification):

| Value | Common weight name |
| --- | --- |
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |

### Variable fonts

While many fonts have a particular weight corresponding to one of the numbers in Common weight name mapping, most variable fonts support a range of weights providing much finer granularity, giving designers and developers more control over the chosen weight.

For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying widths.

This demo loads with `font-weight: 500;` set. Change the value of the `font-weight` property to see the weight of the text change.

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

People experiencing low vision conditions may have difficulty reading text set with a `font-weight` value of `100` (Thin/Hairline) or `200` (Extra Light), especially if the font has a low contrast color ratio.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value |
| Animation type | a font weight |

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

font-weight =
  <font-weight-absolute>  |
  bolder                  |
  lighter

<font-weight-absolute> =
  normal             |
  bold               |
  <number [1,1000]>

```

Examples
--------

### Setting font weights

#### HTML

```html
<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures or conversations?"
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>
```

#### CSS

```css
/\* Set paragraph text to be bold. \*/
p {
  font-weight: bold;
}

/\* Set div text to two steps heavier than
 normal but less than a standard bold. \*/
div {
  font-weight: 600;
}

/\* Set span text to be one step lighter
 than its parent. \*/
span {
  font-weight: lighter;
}
```

#### Result

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

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

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

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

See also
--------

* `font-family`
* `font-style`
* Fundamental text and font styling
* CSS fonts module


outline-width - CSS: Cascading Style Sheets

outline-width
=============

The CSS **`outline-width`** property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the `border`.

Try it
------

It is often more convenient to use the shorthand property `outline` when defining the appearance of an outline.

Syntax
------

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

/\* <length> values \*/
outline-width: 1px;
outline-width: 0.1em;

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

The `outline-width` property is specified as any one of the values listed below.

### Values

`<length>`

The width of the outline specified as a `<length>`.

`thin`

Depends on the user agent. Typically equivalent to `1px` in desktop browsers (including Firefox).

`medium`

Depends on the user agent. Typically equivalent to `3px` in desktop browsers (including Firefox).

`thick`

Depends on the user agent. Typically equivalent to `5px` in desktop browsers (including Firefox).

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements |
| Inherited | no |
| Computed value | an absolute length; if the keyword `none` is specified, the computed value is `0` |
| Animation type | a length |

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

outline-width =
  <line-width>

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

```

Examples
--------

### Setting an element's outline width

#### HTML

```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
```

#### CSS

```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}
```

#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-width |

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

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

See also
--------

* `outline`
* `outline-color`
* `outline-style`


mask - CSS: Cascading Style Sheets

mask
====

The **`mask`** CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

**Note:** As well as the properties listed below, the `mask` shorthand also resets `mask-border` to its initial value. It is therefore recommended to use the `mask` shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. This will ensure that `mask-border` has also been reset to allow the new styles to take effect.

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

This property is a shorthand for the following CSS properties:

* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
Syntax
------

```css
/\* Keyword values \*/
mask: none;

/\* Image values \*/
mask: url(mask.png); /\* Pixel image used as mask \*/
mask: url(masks.svg#star); /\* Element within SVG graphic used as mask \*/

/\* Combined values \*/
mask: url(masks.svg#star) luminance; /\* Element within SVG graphic used as luminance mask \*/
mask: url(masks.svg#star) 40px 20px; /\* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left \*/
mask: url(masks.svg#star) 0 0/50px 50px; /\* Element within SVG graphic used as mask with a width and height of 50px \*/
mask: url(masks.svg#star) repeat-x; /\* Element within SVG graphic used as horizontally repeated mask \*/
mask: url(masks.svg#star) stroke-box; /\* Element within SVG graphic used as mask extending to the box enclosed by the stroke \*/
mask: url(masks.svg#star) exclude; /\* Element within SVG graphic used as mask and combined with background using non-overlapping parts \*/

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

/\* Multiple masks \*/
mask:
  url(masks.svg#star) left / 16px repeat-y,
  /\* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px \*/
    url(masks.svg#circle) right / 16px repeat-y; /\* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px \*/
```

### Values

`<mask-reference>`

Sets the mask image source. See `mask-image`.

`<masking-mode>`

Sets the masking mode of the mask image. See `mask-mode`.

`<position>`

Sets the position of the mask image. See `mask-position`.

`<bg-size>`

Sets the size of the mask image. See `mask-size`.

`<repeat-style>`

Sets the repetition of the mask image. See `mask-repeat`.

`<geometry-box>`

If only one `<geometry-box>` value is given, it sets both `mask-origin` and `mask-clip`. If two `<geometry-box>` values are present, then the first sets `mask-origin` and the second sets `mask-clip`.

`<geometry-box> | no-clip`

Sets the area that is affected by the mask image. See `mask-clip`.

`<compositing-operator>`

Sets the compositing operation used on the current mask layer. See `mask-composite`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `mask-image`: `none`
* `mask-mode`: `match-source`
* `mask-repeat`: `repeat`
* `mask-position`: `center`
* `mask-clip`: `border-box`
* `mask-origin`: `border-box`
* `mask-size`: `auto`
* `mask-composite`: `add`
 |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `mask-position`: refer to size of mask painting area minus size of mask layer image (see the text for `background-position`)
 |
| Computed value | as each of the properties of the shorthand:* `mask-image`: as specified, but with `url()` values made absolute
* `mask-mode`: as specified
* `mask-repeat`: Consists of two keywords, one per dimension
* `mask-position`: Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
* `mask-clip`: as specified
* `mask-origin`: as specified
* `mask-size`: as specified, but with relative lengths converted into absolute lengths
* `mask-composite`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `mask-image`: discrete
* `mask-mode`: discrete
* `mask-repeat`: discrete
* `mask-position`: a repeatable list
* `mask-clip`: discrete
* `mask-origin`: discrete
* `mask-size`: a repeatable list
* `mask-composite`: discrete
 |
| Creates stacking context | yes |

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

mask =
  <mask-layer>#

<mask-layer> =
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>

<mask-reference> =
  none           |
  <image>        |
  <mask-source>

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

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<geometry-box> =
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box

<compositing-operator> =
  add        |
  subtract   |
  intersect  |
  exclude

<masking-mode> =
  alpha         |
  luminance     |
  match-source

<image> =
  <url>       |
  <gradient>

<mask-source> =
  <url>

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

<shape-box> =
  <visual-box>  |
  margin-box

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

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

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

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

```

Examples
--------

### Masking an image

```css
.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
```

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

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

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

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

See also
--------

* `clip-path`, `filter`
* CSS Shapes, clipping and masking – and how to use them
* Applying SVG effects to HTML content
* SVG


::view-transition - CSS: Cascading Style Sheets

::view-transition
=================

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

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

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

The **`::view-transition`** CSS pseudo-element represents the root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content.

During a view transition, `::view-transition` is included in the associated pseudo-element tree as explained in The view transition process. It is the top-level node of this tree, and has one or more `::view-transition-group`s as children.

`::view-transition` is given the following default styling in the UA stylesheet:

```css
html::view-transition {
  position: fixed;
  inset: 0;
}
```

All `::view-transition-group` pseudo-elements are positioned relative to the view transition root.

Syntax
------

```css
::view-transition {
  /\* ... \*/
}
```

Examples
--------

```css
::view-transition {
  background-color: rgb(0 0 0 / 25%);
}
```

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

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

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

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

See also
--------

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


revert-layer - CSS: Cascading Style Sheets

revert-layer
============

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

The **`revert-layer`** CSS keyword rolls back the value of a property in a `cascade layer` to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of the property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.

If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the `computed value` derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous style origin.

This keyword can be applied to any CSS property, including the CSS shorthand property `all`.

Revert-layer vs. revert
-----------------------

The `revert-layer` keyword lets you rollback styles to the ones specified in previous cascade layers. All cascade layers exist in the author origin. The `revert` keyword, in comparison, lets you remove styles applied in the author origin and roll back to styles in user origin or user-agent origin.

The `revert-layer` keyword is ideally meant for applying on properties inside a layer. However, if the `revert-layer` keyword is set on a property outside a layer, the value of the property will roll back to the default value established by the user agent's stylesheet (or by user styles, if any exist). So in this scenario, the `revert-layer` keyword behaves like the `revert` keyword.

Examples
--------

### Default cascade layer behavior

In the example below, two cascade layers are defined in the CSS, `base` and `special`. By default, rules in the `special` layer will override competing rules in the `base` layer because `special` is listed after `base` in the `@layer` declaration statement.

#### HTML

```html
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>
```

#### CSS

```css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}
```

#### Result

All the `<li>` elements match the `item` rule in the `special` layer and are red. This is the default cascade layer behavior, where rules in the `special` layer take precedence over rules in the `base` layer.

### Revert to style in previous cascade layer

Let's examine how the `revert-layer` keyword changes the default cascade layer behavior. For this example, the `special` layer contains an additional `feature` rule targeting the first `<li>` element. The `color` property in this rule is set to `revert-layer`.

#### HTML

```html
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>
```

#### CSS

```css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
  .feature {
    color: revert-layer;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}
```

#### Result

With `color` set to `revert-layer`, the `color` property value rolls back to the value in the matching `feature` rule in the previous layer `base`, and so 'Item one' is now green.

### Revert to style in previous origin

This example shows the `revert-layer` keyword behavior when there is no cascade layer to revert to *and* there is no matching CSS rule in the current layer to inherit the property value.

#### HTML

```html
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>
```

#### CSS

```css
@layer base {
  .item {
    color: revert-layer;
  }
}
```

#### Result

The style for all `<li>` elements rolls back to the defaults in the user-agent origin.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # revert-layer |

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

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

See also
--------

* `initial`: Sets a property to its initial value
* `inherit`: Sets an element's property the same as its parent
* `revert`: Resets a property to the value established by the user-agent stylesheet (or user styles if any exist)
* `unset`: Sets a property to its inherited value if the property inherits or to its initial value if the property does not inherit
* `all`: Resets all properties to their initial, inherited, reverted, or unset state at once


::grammar-error - CSS: Cascading Style Sheets

::grammar-error
===============

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

The **`::grammar-error`** CSS pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.

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

Only a small subset of CSS properties can be used in a rule with `::grammar-error` in its selector:

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color`
* `text-shadow`
Syntax
------

```css
::grammar-error {
  /\* ... \*/
}
```

Examples
--------

### Simple document grammar check

In this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.

#### HTML

```html
<p>My friends is coming to the party tonight.</p>
```

#### CSS

```css
::grammar-error {
  text-decoration: underline red;
  color: red;
}
```

#### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-grammar-error |

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

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

See also
--------

* `::spelling-error`