place-items - CSS: Cascading Style Sheets

place-items
===========

The CSS **`place-items`** shorthand property allows you to align items along both the block and inline directions at once (i.e. the `align-items` and `justify-items` properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `align-items`
* `justify-items`
Syntax
------

```css
/\* Keyword values \*/
place-items: center;
place-items: normal start;

/\* Positional alignment \*/
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;

/\* Baseline alignment \*/
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

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

### Values

One of the following forms:

* A single `align-items` value, which is used to set alignment in both block and inline directions.
* An `align-items` value, which sets alignment in the block direction, followed by a `justify-items` value, which sets alignment in the inline direction.
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `align-items`: `normal`
* `justify-items`: `legacy`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `align-items`: as specified
* `justify-items`: as specified
 |
| Animation type | discrete |

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

place-items =
  <'align-items'> <'justify-items'>?

```

Examples
--------

### Placing items in a flex container

In flexbox `justify-self` or `justify-items` do not apply, as on the main axis items are treated as a group. Therefore, the second value will be ignored.
```

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

```
<div id="container">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
</div>

<div class="row">
  <label for="values">place-items: </label>
  <select id="values">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>
```

```
const values = document.getElementById("values");
const container = document.getElementById("container");

values.addEventListener("change", (evt) => {
  container.style.placeItems = evt.target.value;
});
```

#### CSS

```css
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /\* You can change this value by selecting another option in the list \*/
  background-color: #8c8c8c;
  display: flex;
}
```

#### Result

### Placing items in a grid container

The following grid container has items which are smaller than the grid areas they are placed in, therefore `place-items` will move them in the block and inline dimensions.
```

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

```
<div id="gridcontainer">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
</div>

<div class="row">
  <label for="gridvalues">place-items: </label>
  <select id="gridvalues">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>
```

```
const values = document.getElementById("gridvalues");
const container = document.getElementById("gridcontainer");

values.addEventListener("change", (evt) => {
  container.style.placeItems = evt.target.value;
});
```

#### CSS

```css
#gridcontainer {
  height: 200px;
  width: 240px;
  place-items: stretch; /\* You can change this value by selecting another option in the list \*/
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  width: 50px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # place-items-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: *Aligning items in a flex container*
* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `align-items` property
* The `align-self` property
* The `justify-items` property
* The `justify-self` property


mask-origin - CSS: Cascading Style Sheets

mask-origin
===========

The **`mask-origin`** CSS property sets the origin of a mask.

For elements rendered as a single box, this property specifies the mask positioning area. In other words, this property specifies the origin position of an image specified by the `mask-image` CSS property. For elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes `box-decoration-break` operates upon to determine the mask positioning area.

Syntax
------

```css
/\* Keyword values \*/
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/\* Multiple values \*/
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/\* Non-standard keyword values \*/
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

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

One or more of the keyword values listed below, separated by commas.

### Values

`content-box`

The position is relative to the content box.

`padding-box`

The position is relative to the padding box. For single boxes `0 0` is the upper left corner of the padding edge, `100% 100%` is the lower right corner.

`border-box`

The position is relative to the border box.

`fill-box`

The position is relative to the object bounding box.

`stroke-box`

The position is relative to the stroke bounding box.

`view-box`

Uses the nearest SVG viewport as reference box. If a `viewBox` attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.

`content`
Non-standard

Same as `content-box`.

`padding`
Non-standard

Same as `padding-box`.

`border`
Non-standard

Same as `border-box`.

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

|  |  |
| --- | --- |
| Initial value | `border-box` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

mask-origin =
  <coord-box>#

<coord-box> =
  <paint-box>  |
  view-box

<paint-box> =
  <visual-box>  |
  fill-box      |
  stroke-box

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

```

Examples
--------

### Setting mask origin to border-box

Try some of the other possible values by updating the CSS in the box below.

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

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

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

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

See also
--------

* Clipping and Masking in CSS


-webkit-text-stroke-width - CSS: Cascading Style Sheets

-webkit-text-stroke-width
=========================

The **`-webkit-text-stroke-width`** CSS property specifies the width of the stroke for text.

Syntax
------

```css
/\* Keyword values \*/
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/\* <length> values \*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;

/\* Global values \*/
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
-webkit-text-stroke-width: revert;
-webkit-text-stroke-width: revert-layer;
-webkit-text-stroke-width: unset;
```

### Values

`<line-width>`

The width of the stroke.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | absolute `<length>` |
| Animation type | discrete |

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

-webkit-text-stroke-width =
  <line-width>

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

```

Examples
--------

### Varying stroke widths

#### CSS

```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-color: red;
}

#thin {
  -webkit-text-stroke-width: thin;
}

#medium {
  -webkit-text-stroke-width: 3px;
}

#thick {
  -webkit-text-stroke-width: 1.5mm;
}
```

#### HTML

```html
<p id="thin">Thin stroke</p>
<p id="medium">Medium stroke</p>
<p id="thick">Thick stroke</p>
```

#### Results

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-width |

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

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

See also
--------

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-color`
* `-webkit-text-stroke`
* `-webkit-text-fill-color`


::-moz-range-track - CSS: Cascading Style Sheets

::-moz-range-track
==================

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

The **`::-moz-range-track`** CSS pseudo-element is a Mozilla extension that represents the *track* (i.e., groove) in which the indicator slides in an `<input>` of `type="range"`.

**Note:** Using `::-moz-range-track` with anything but an `<input type="range">` doesn't match anything and has no effect.

Syntax
------

```css
::-moz-range-track {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS

```css
input[type="range"]::-moz-range-track {
  background-color: green;
}
```

### Result

A range slider using this style might look something like this:

![A range with the track green](/en-US/docs/Web/CSS/::-moz-range-track/screen_shot_2015-12-04_at_10.14.34.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 Gecko to style other parts of a range input:
    + `::-moz-range-thumb` represents the indicator that slides in the groove.
    + `::-moz-range-progress` represents the lower portion of the track.
* Similar pseudo-elements used by other browsers:
    + `::-webkit-slider-runnable-track`, pseudo-element supported by WebKit and Blink (Safari, Chrome, and Opera)
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders


-webkit-text-security - CSS: Cascading Style Sheets

-webkit-text-security
=====================

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

**`-webkit-text-security`** is a non-standard CSS property that obfuscates characters in a `<form>` field (such as `<input>` or `<textarea>`) by replacing them with a shape. It only affects fields that are *not* of `type=password`.

Syntax
------

```css
-webkit-text-security: circle;
-webkit-text-security: disc;
-webkit-text-security: square;
-webkit-text-security: none;

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

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

Value not found in DB!Formal syntax
-------------

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

### Obscuring a text input

Try typing in the field below. If your browser supports this property, the characters should be visually replaced with squares.

#### HTML

```html
<label for="name">Name:</label> <input type="text" name="name" id="name" />
```

#### CSS

```css
input {
  -webkit-text-security: square;
}
```

#### Result

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


CSSOM view - CSS: Cascading Style Sheets

CSSOM view
==========

The **CSSOM view** module lets you manipulate the visual view of a document, in particular its scrolling behavior.

Reference
---------

### Properties

* `scroll-behavior`
Guides
------

Coordinate systems

A guide to the coordinate systems used to specify the position of a location in a display context, whether that context is a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing.

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

* cssom glossary term
Specifications
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

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


transition-timing-function - CSS: Cascading Style Sheets

transition-timing-function
==========================

The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.

Try it
------

This, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration.

This acceleration curve is defined using one `<easing-function>` for each property to be transitioned.

You may specify multiple easing functions; each one will be applied to the corresponding property as specified by the `transition-property` property, which acts as a `transition-property` list. If there are fewer easing functions specified than in the `transition-property` list, the user agent must calculate which value is used by repeating the list of values until there is one for each transition property. If there are more easing functions, the list is truncated to the right size. In both cases, the CSS declaration stays valid.

Syntax
------

```css
/\* Keyword values \*/
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/\* Function values \*/
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Steps Function keywords \*/
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/\* Multiple easing functions \*/
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Global values \*/
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;
```

### Values

`<easing-function>`

Each `<easing-function>` represents the easing function to link to the corresponding property to transition, as defined in `transition-property`.

The non-step keyword values (ease, linear, ease-in-out, etc.) each represent cubic Bézier curve with fixed four point values, with the cubic-bezier() function value allowing for a non-predefined value. The step easing functions divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position.

`ease`

Equal to `cubic-bezier(0.25, 0.1, 0.25, 1.0)`, the default value, increases in velocity towards the middle of the transition, slowing back down at the end.

`linear`

Equal to `cubic-bezier(0.0, 0.0, 1.0, 1.0)`, transitions at an even speed.

`ease-in`

Equal to `cubic-bezier(0.42, 0, 1.0, 1.0)`, starts off slowly, with the transition speed increasing until complete.

`ease-out`

Equal to `cubic-bezier(0, 0, 0.58, 1.0)`, starts transitioning quickly, slowing down as the transition continues.

`ease-in-out`

Equal to `cubic-bezier(0.42, 0, 0.58, 1.0)`, starts transitioning slowly, speeds up, and then slows down again.

`cubic-bezier(p1, p2, p3, p4)`

An author-defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.

`steps( n, <jumpterm>)`

Displays the transition along *n stops along the transition, displaying each stop for* equal lengths of time. For example, if *n* is 5, there are 5 steps. Whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used:

`jump-start`

Denotes a left-continuous function, so that the first jump happens when the transition begins;

`jump-end`

Denotes a right-continuous function, so that the last jump happens when the animation ends;

`jump-none`

There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration

`jump-both`

Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time.

`start`

Same as `jump-start.`

`end`

Same as `jump-end.`

`step-start`

Equal to `steps(1, jump-start)`

`step-end`

Equal to `steps(1, jump-end)`

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

Some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred. Animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships. However, some animations can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD) and certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query (or equivalent User Agent client hint `Sec-CH-Prefers-Reduced-Motion`) to create a complimentary experience for users who have expressed a preference for less animation.

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

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

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

transition-timing-function =
  <easing-function>#

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

Examples
--------

### Cubic-Bezier examples
```

<div class="parent">
  <div class="ease">ease</div>
  <div class="easein">ease-in</div>
  <div class="easeout">ease-out</div>
  <div class="easeinout">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>
```

```
.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}
```

```
function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (let i = 0; i < els.length; i++) {
    els[i].classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);
```

```css
.ease {
  transition-timing-function: ease;
}
.easein {
  transition-timing-function: ease-in;
}
.easeout {
  transition-timing-function: ease-out;
}
.easeinout {
  transition-timing-function: ease-in-out;
}
.linear {
  transition-timing-function: linear;
}
.cb {
  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}
```

### Step examples
```

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
```

```
.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}
```

```
function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (let i = 0; i < els.length; i++) {
    els[i].classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);
```

```css
.jump-start {
  transition-timing-function: steps(5, jump-start);
}
.jump-end {
  transition-timing-function: steps(5, jump-end);
}
.jump-none {
  transition-timing-function: steps(5, jump-none);
}
.jump-both {
  transition-timing-function: steps(5, jump-both);
}
.step-start {
  transition-timing-function: step-start;
}
.step-end {
  transition-timing-function: step-end;
}
```

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

| Specification |
| --- |
| CSS Transitions # transition-timing-function-property |

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

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

See also
--------

* Using CSS transitions
* `<easing-function>`
* `transition`
* `transition-property`
* `transition-duration`
* `transition-delay`
* `TransitionEvent`


filter - CSS: Cascading Style Sheets

filter
======

The **`filter`** CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Several functions, such as `blur()` and `contrast()`, are available to help you achieve predefined effects.

Try it
------

Syntax
------

```css
/\* <filter-function> values \*/
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/\* URL \*/
filter: url("filters.svg#filter-id");

/\* Multiple filters \*/
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/\* Use no filter \*/
filter: none;

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

With a function, use the following:

```css
filter: <filter-function> [<filter-function>]* | none;
```

You can use `url()` to reference an SVG filter element. For a reference to an SVG `<filter>` element, use the following syntax:

```css
filter: url(file.svg#filter-element-id);
```

Functions
---------

The `filter` property is specified as `none` or one or more of the functions listed below. If the parameter for any function is invalid, the function returns `none`. Except where noted, the functions that take a value expressed with a percent sign (as in `34%`) also accept the value expressed as decimal (as in `0.34`).

When the `filter` property values contains multiple functions, the filters are applied in order.

`blur()`

Applies a Gaussian blur to the input image.

```css
filter: blur(5px);
```

`brightness()`

Applies a linear multiplier to the input image, making it appear more or less bright. Values are linear multipliers on the effect, with `0%` creating a completely black image, `100%` having no effect, and values over `100%` brightening the image.

```css
filter: brightness(2);
```

`contrast()`

Adjusts the contrast of the input image. A value of `0%` makes the image grey, `100%` has no effect, and values over `100%` create a contrast.

```css
filter: contrast(200%);
```

`drop-shadow()`

Applies the parameter `<shadow>` as a drop shadow, following the contours of the image. The shadow syntax is similar to `<box-shadow>` (defined in the CSS backgrounds and borders module), with the exception that the `inset` keyword and `spread` parameter are not allowed. As with all `filter` property values, any filters after the `drop-shadow()` are applied to the shadow.

```css
filter: drop-shadow(16px 16px 10px black);
```

`grayscale()`

Converts the image to grayscale. A value of `100%` is completely grayscale. The initial value of `0%` leaves the input unchanged. Values between `0%` and `100%` produce linear multipliers on the effect.

```css
filter: grayscale(100%);
```

`hue-rotate()`

Applies a hue rotation. The `<angle>` value defines the number of degrees around the hue color circle at which the input samples will be adjusted. A value of `0deg` leaves the input unchanged.

```css
filter: hue-rotate(90deg);
```

`invert()`

Inverts the samples in the input image. A value of `100%` completely inverts the image. A value of `0%` leaves the input unchanged. Values between `0%` and `100%` have linear multipliers on the effect.

```css
filter: invert(100%);
```

`opacity()`

Applies transparency. `0%` makes the image completely transparent and `100%` leaves the image unchanged.

```css
filter: opacity(50%);
```

`saturate()`

Saturates the image, with `0%` being completely unsaturated, `100%` leaving the image unchanged, and values of over `100%` increasing saturation.

```css
filter: saturate(200%);
```

`sepia()`

Converts the image to sepia, with a value of `100%` making the image completely sepia and `0%` making no change.

```css
filter: sepia(100%);
```

Combining functions
-------------------

You may combine any number of functions to manipulate the rendering. The filters are applied in the order declared. The following example enhances the contrast and brightness of the image:

```css
filter: contrast(175%) brightness(103%);
```

### Interpolation

When animated, if both the beginning and end filters have a function list of the same length without `url()` in the same order, each of their filter functions is interpolated according to the filter function's specific rules.

If the filter lists are of different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list. The added functions use their initial, no filter modification values. All the filters listed are then interpolated according to the filter function's specific rules. Otherwise, discrete interpolation is used.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | a filter function list |

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

filter =
  none                 |
  <filter-value-list>

<filter-value-list> =
  [ <filter-function> | <url> ]+

<filter-function> =
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>

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

<blur()> =
  blur( <length>? )

<brightness()> =
  brightness( [ <number> | <percentage> ]? )

<contrast()> =
  contrast( [ <number> | <percentage> ]? )

<drop-shadow()> =
  drop-shadow( [ <color>? && <length>{2,3} ] )

<grayscale()> =
  grayscale( [ <number> | <percentage> ]? )

<hue-rotate()> =
  hue-rotate( [ <angle> | <zero> ]? )

<invert()> =
  invert( [ <number> | <percentage> ]? )

<opacity()> =
  opacity( [ <number> | <percentage> ]? )

<sepia()> =
  sepia( [ <number> | <percentage> ]? )

<saturate()> =
  saturate( [ <number> | <percentage> ]? )

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

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

```

Examples
--------

### Applying filter functions

The `filter` property is applied to the second image, greying and blurring both the image and its border.

```css
img {
  border: 5px solid yellow;
}
/\* Gray the second image by 40% and blur by 5px \*/
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
```

```html
<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />
```

### Repeating filter functions

Filter functions are applied in order of appearance. The same filter function can be repeated.

```css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
        red);
}
```

```
<svg
 id="MDN-logo"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 361 104.2"
 xml:space="preserve"
 role="img">
  <title>MDN Web Docs</title>
  <path
 d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"
 style="fill: var(--text-primary);"></path>
  <g style="fill:blue;">
    <path
 d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
  </g>
</svg>
```

The filters are applied in order. This is why the drop shadows are not the same color: the first drop shadow's hue is altered by the `hue-rotate()` function but the second one is not.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # FilterProperty |

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

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

See also
--------

* CSS `backdrop-filter` property
* CSS compositing and blending module, including the CSS `background-blend-mode` and `mix-blend-mode` properties.
* The CSS `mask` property
* SVG, including the SVG `<filter>` element and SVG `filter` attribute.
* Applying SVG effects to HTML content


overscroll-behavior-inline - CSS: Cascading Style Sheets

overscroll-behavior-inline
==========================

The **`overscroll-behavior-inline`** CSS property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.

See `overscroll-behavior` for a full explanation.

Syntax
------

```css
/\* Keyword values \*/
overscroll-behavior-inline: auto; /\* default \*/
overscroll-behavior-inline: contain;
overscroll-behavior-inline: none;

/\* Global values \*/
overscroll-behavior-inline: inherit;
overscroll-behavior-inline: initial;
overscroll-behavior-inline: revert;
overscroll-behavior-inline: revert-layer;
overscroll-behavior-inline: unset;
```

The `overscroll-behavior-inline` property is specified as a keyword chosen from the list of values below.

### Values

`auto`

The default scroll overflow behavior occurs as normal.

`contain`

Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

`none`

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

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

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

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

overscroll-behavior-inline =
  contain  |
  none     |
  auto

```

Examples
--------

### Preventing inline overscrolling

In this demo we have two block-level boxes, one inside the other. The outer box has a large `width` set on it so the page will scroll horizontally. The inner box has a small width (and `height`) set on it so it sits comfortably inside the viewport, but its content is given a large width so it will also scroll horizontally.

By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this happening in the inline direction, we've set `overscroll-behavior-inline: contain` on the inner box.

#### HTML

```html
<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>
```

#### CSS

```css
main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-inline: contain;
}

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

p {
  padding: 10px;
  background-color: rgb(255 0 0 / 50%);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical |

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

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

See also
--------

* Take control of your scroll: customizing pull-to-refresh and overflow effects


break-after - CSS: Cascading Style Sheets

break-after
===========

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

Try it
------

Syntax
------

```css
/\* Generic break values \*/
break-after: auto;
break-after: avoid;
break-after: always;
break-after: all;

/\* Page break values \*/
break-after: avoid-page;
break-after: page;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;

/\* Column break values \*/
break-after: avoid-column;
break-after: column;

/\* Region break values \*/
break-after: avoid-region;
break-after: region;

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

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

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

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

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

### Values

#### Generic break values

`auto`

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

`avoid`

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

`always`
Experimental

Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.

`all`
Experimental

Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.

#### Page break values

`avoid-page`

Avoids any page break right after the principal box.

`page`

Forces a page break right after the principal box.

`left`

Forces one or two page breaks right after the principal box, whichever will make the next page into a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

`right`

Forces one or two page breaks right after the principal box, whichever will make the next page into a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

`recto`

Forces one or two page breaks right after the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)

`verso`

Forces one or two page breaks right after the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a right page in a right-to-left spread.)

#### Column break values

`avoid-column`

Avoids any column break right after the principal box.

`column`

Forces a column break right after the principal box.

#### Region break values

`avoid-region`
Experimental

Avoids any region break right after the principal box.

`region`
Experimental

Forces a region break right after the principal box.

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

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

| page-break-after | break-after |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

**Note:** The `always` value of `page-break-*` was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to `page`, rather than the `always` value in the Level 4 spec.

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

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

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

break-after =
  auto          |
  avoid         |
  always        |
  all           |
  avoid-page    |
  page          |
  left          |
  right         |
  recto         |
  verso         |
  avoid-column  |
  column        |
  avoid-region  |
  region

```

Examples
--------

### Breaking into neat columns

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

By default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uniform place. However, we used `break-after: column` on the `<p>` elements to force a column break after each one, meaning that you end up with an `<h2>` neatly at the top of each column.

#### HTML

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

  <h2>Subheading</h2>

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

  <h2>Subheading</h2>

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

  <h2>Subheading</h2>

  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
    egestas tellus.
  </p>

  <h2>Subheading</h2>

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

#### CSS

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

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

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
}

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

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

### Result

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

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

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

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

See also
--------

* Multiple-column Layout
* Breaking Boxes With CSS Fragmentation


CSS colors - CSS: Cascading Style Sheets

CSS colors
==========

The **CSS colors** module defines colors, color types, color blending, opacity, and how you can apply these colors and effects to HTML content.

While this module has only two CSS properties, `color` and `opacity`, over 20 CSS and SVG properties, CSS images, at-rules, and @media rules depend on these two properties.

### Colors in action

The color syntax converter below shows the values of the currently selected color in red-green-blue (RGB), hexadecimal (HEX), hue, saturation, and lightness (HSL), and hue, whiteness, and blackness (HWB) CSS color formats. All the RGB, HEX, HSL, and HWB color values here, while written differently, represent the same color value.

Selecting a color via the color picker and an opacity via the slider updates the RGB, HEX, HSL, and HWB values. When you choose a new color or opacity value, the color of the background and the slider update via the CSS properties `background-color` and `accent-color`, respectively.

To see the code for this color syntax converter, view the source on GitHub.

Reference
---------

### Properties

* `color`
* `opacity`
### At-rules and descriptors

* `@color-profile`
    + `components` descriptor
    + `rendering-intent` descriptor
    + `src` descriptor
### Functions

* Absolute color functions, including:
    + `rgb()` and its `rgba()` alias
    + `hsl()` and its `hsla()` alias
    + `hwb()`
    + `lab()`
    + `lch()`
    + `oklab()`
    + `oklch()`
    + `color()`
* `color-contrast()`
Experimental
* `color-mix()`
* `device-cmyk()`
Experimental
* `light-dark()`
Experimental
### Data types

* `<color>`
* `<absolute-color-function>`
* `<hex-color>`
* `<named-color>`
* `<alpha-value>`
* `<hue>`
* `<system-color>`
* `<colorspace-params>`
### Keywords

* `currentcolor`
* `transparent`
### Interfaces

* `CSSColorProfileRule`
Experimental
Guides
------

Applying color to HTML elements using CSS

A guide to using CSS to apply color to a variety of types of content. All color-related CSS properties are touched upon.

Understanding color and luminance

Color perception and using colors with color insensitive (color blind) users, reduced vision users and users with vestibular disorders or other neurological disorders in mind.

WCAG 1.4.1: Color contrast

Explanation of contrast requirements between background and foreground content to ensure legibility.

Color picker tool

This tool makes it easy to create, adjust, and experiment with custom colors.

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

* CSS properties that are part of other specifications:
    + `accent-color`
    + `background-color`
    + `background-image`
    + `border-color`
    + `box-shadow`
    + `caret-color`
    + `color`
    + `color-scheme`
    + `column-rule-color`
    + `outline-color`
    + `scrollbar-color`
    + `text-decoration-color`
    + `text-emphasis-color`
    + `text-shadow`
    + `-webkit-tap-highlight-color`
* SVG color properties that are part of other specifications:
    + `fill`
    + `flood-color`
    + `lighting-color`
    + `stop-color`
    + `stroke`
* SVG `color` attribute
* Color wheel glossary term
* Interpolation glossary term
* The `@font-palette-values` at-rule `override-colors` descriptor
* The `@color-profile` at-rule
* The `color-gamut` @media feature
* The `forced-colors` @media feature
Specifications
--------------

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

See also
--------

* CSS color adjustment module and the `print-color-adjust` property.
* CSS images module, which is where CSS `<gradient>` images are defined.
* The `VideoColorSpace` interface
* The SVG `<feColorMatrix>` element
* Canvas API: applying styles and colors


container-type - CSS: Cascading Style Sheets

container-type
==============

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

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

* Learn more
* See full compatibility
* Report feedback
An element can be established as a query container for container size queries using the **`container-type`** CSS property. `container-type` is used to define the type of size containment used in a container query.

Size containment turns off the ability of an element to get size information from its contents, which is important for container queries to avoid infinite loops. If this were not the case, a CSS rule inside a container query could change the content size, which in turn could make the query evaluate to false and change the parent element's size, which in turn could change the content size and flip the query back to true, and so on.

The container size has to be set explicitly or by context — for example, block elements, flex containers, and grid containers stretching to the full width of their parent. If an explicit or contextual size is not available, elements with size containment will collapse.

Syntax
------

```css
/\* Keyword values \*/
container-type: normal;
container-type: size;
container-type: inline-size;

/\* Global Values \*/
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;
```

### Values

`size`

 Establishes a query container for container size queries in both the inline and block dimensions.
 Applies layout containment, style containment, and size containment to the container.

Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements.

`inline-size`

 Establishes a query container for dimensional queries on the inline axis of the container.
 Applies layout, style, and inline-size containment to the element.

Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements.

`normal`

The element is not a query container for any container size queries, but remains a query container for container style queries.

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

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

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

container-type =
  normal       |
  size         |
  inline-size

```

Examples
--------

### Establishing inline size containment

Given the following HTML example which is a card component with an image, a title, and some text:

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

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

 To create a container context, add the `container-type` property to an element.
 The following uses the `inline-size` value to create a containment context for the inline axis of the container:

```css
.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}
```

```
h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}
```

Writing a container query via the `@container` at-rule will apply styles to the elements of the container when it is wider than 400px:

```css
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
```

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

| Specification |
| --- |
| CSS Containment Module Level 3 # container-type |

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

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

See also
--------

* CSS container queries
* `@container` at-rule
* CSS `container` shorthand property
* CSS `container-name` property
* CSS `content-visibility` property


mask-border-width - CSS: Cascading Style Sheets

mask-border-width
=================

The **`mask-border-width`** CSS property sets the width of an element's mask border.

Syntax
------

```css
/\* Keyword value \*/
mask-border-width: auto;

/\* <length> value \*/
mask-border-width: 1rem;

/\* <percentage> value \*/
mask-border-width: 25%;

/\* <number> value \*/
mask-border-width: 3;

/\* top and bottom | left and right \*/
mask-border-width: 2em 3em;

/\* top | left and right | bottom \*/
mask-border-width: 5% 15% 10%;

/\* top | right | bottom | left \*/
mask-border-width: 5% 2em 10% auto;

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

The `mask-border-width` property may be specified using one, two, three, or four values chosen from the list of values below.

* When **one** value is specified, it applies the same width to **all four sides**.
* When **two** values are specified, the first width applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first width applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the widths apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<length-percentage>`

The width of the mask border, specified as a `<length>` or a `<percentage>`. Percentages are relative to the *width* of the border area for horizontal offsets and the *height* of the border area for vertical offsets. Must not be negative.

`<number>`

The width of the mask border, specified as a multiple of the corresponding `border-width`. Must not be negative.

`auto`

The width of the mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding `mask-border-slice`. If the image does not have the required intrinsic dimension, the corresponding `border-width` is used instead.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Percentages | relative to width/height of the mask border image area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |

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

mask-border-width =
  [ <length-percentage> | <number> | auto ]{1,4}

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

```

Examples
--------

### Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to `mask-border-slice` will cause the slices to be scaled to fit the border mask.

```css
mask-border-width: 30 fill;
```

Chromium-based browsers support an outdated version of this property — `mask-box-image-width` — with a prefix:

```css
-webkit-mask-box-image-width: 20px;
```

**Note:** The `mask-border` page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

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

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

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

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

See also
--------

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`


padding - CSS: Cascading Style Sheets

padding
=======

The **`padding`** CSS shorthand property sets the padding area on all four sides of an element at once.

Try it
------

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

**Note:** Padding creates extra space within an element. In contrast, `margin` creates extra space *around* an element.

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

This property is a shorthand for the following CSS properties:

* `padding-top`
* `padding-right`
* `padding-bottom`
* `padding-left`
Syntax
------

```css
/\* Apply to all four sides \*/
padding: 1em;

/\* top and bottom | left and right \*/
padding: 5% 10%;

/\* top | left and right | bottom \*/
padding: 1em 2em 2em;

/\* top | right | bottom | left \*/
padding: 5px 1em 0 2em;

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

The `padding` property may be specified using one, two, three, or four values. Each value is a `<length>` or a `<percentage>`. Negative values are invalid.

* When **one** value is specified, it applies the same padding to **all four sides**.
* When **two** values are specified, the first padding applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first padding applies to the **top**, the second to the **right and left**, the third to the **bottom**.
* When **four** values are specified, the paddings apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<length>`

The size of the padding as a fixed value.

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

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `padding-bottom`: `0`
* `padding-left`: `0`
* `padding-right`: `0`
* `padding-top`: `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 | as each of the properties of the shorthand:* `padding-bottom`: the percentage as specified or the absolute length
* `padding-left`: the percentage as specified or the absolute length
* `padding-right`: the percentage as specified or the absolute length
* `padding-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

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

padding =
  <'padding-top'>{1,4}

```

Examples
--------

### Setting padding with pixels

#### HTML

```html
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
```

#### CSS

```css
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}
```

#### Result

### Setting padding with pixels and percentages

```css
padding: 5%; /\* All sides: 5% padding \*/

padding: 10px; /\* All sides: 10px padding \*/

padding: 10px 20px; /\* top and bottom: 10px padding \*/
/\* left and right: 20px padding \*/

padding: 10px 3% 20px; /\* top: 10px padding \*/
/\* left and right: 3% padding \*/
/\* bottom: 20px padding \*/

padding: 1em 3px 30px 5px; /\* top: 1em padding \*/
/\* right: 3px padding \*/
/\* bottom: 30px padding \*/
/\* left: 5px padding \*/
```

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

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

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 `padding-left`.
* 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`


overscroll-behavior-x - CSS: Cascading Style Sheets

overscroll-behavior-x
=====================

The **`overscroll-behavior-x`** CSS property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.

See `overscroll-behavior` for a full explanation.

Syntax
------

```css
/\* Keyword values \*/
overscroll-behavior-x: auto; /\* default \*/
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/\* Global values \*/
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;
```

The `overscroll-behavior-x` property is specified as a keyword chosen from the list of values below.

### Values

`auto`

The default scroll overflow behavior occurs as normal.

`contain`

Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

`none`

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

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

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

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

overscroll-behavior-x =
  contain  |
  none     |
  auto

```

Examples
--------

### Preventing an underlying element from scrolling horizontally

In our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other. The outer box has a large `width` set on it so the page will scroll horizontally. The inner box has a small width (and `height`) set on it so it sits comfortably inside the viewport, but its content is given a large `width` so it will scroll horizontally.

By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this, you can set `overscroll-behavior-x: contain` on the inner box:

```css
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}
```

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |

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

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

See also
--------

* Take control of your scroll: customizing pull-to-refresh and overflow effects
* The mapped logical properties: `overscroll-behavior-inline`, `overscroll-behavior-block`


text-overflow - CSS: Cascading Style Sheets

text-overflow
=============

The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.

Try it
------

The `text-overflow` property doesn't force an overflow to occur. To make text overflow its container, you have to set other CSS properties: `overflow` and `white-space`. For example:

```css
overflow: hidden;
white-space: nowrap;
```

The `text-overflow` property only affects content that is overflowing a block container element in its *inline* progression direction (not text overflowing at the bottom of a box, for example).

Syntax
------

```css
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

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

The `text-overflow` property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line. The property accepts either a keyword value (`clip` or `ellipsis`) or a `<string>` value.

### Values

`clip`

The default for this property. This keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify `text-overflow` as an empty string, if that is supported in your target browsers: `text-overflow: '';`.

`ellipsis`

This keyword value will display an ellipsis (`'…'`, `U+2026 HORIZONTAL ELLIPSIS`) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.

`<string>`
Experimental

The `<string>` to be used to represent clipped text. The string is displayed inside the content area, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.

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

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

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

text-overflow =
  clip      |
  ellipsis

```

Examples
--------

### One-value syntax

This example shows different values for `text-overflow` applied to a paragraph, for left-to-right and right-to-left text.

#### HTML

```html
<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>
```

#### CSS

```css
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /\* Both of the following are required for text-overflow \*/
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

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

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}
```

#### Result

### Two-value syntax

 This example shows the two-value syntax for `text-overflow`, where you can define different overflow behavior for the start and end of the text.
 To show the effect we have to scroll the line so the start of the line is also hidden.

#### HTML

```html
<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
```

#### CSS

```css
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /\* Both of the following are required for text-overflow \*/
  white-space: nowrap;
  overflow: scroll;
}

.overflow-clip-clip {
  text-overflow: clip clip;
}

.overflow-clip-ellipsis {
  text-overflow: clip ellipsis;
}

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}
```

#### JavaScript

```js
// Scroll each paragraph so the start is also hidden
const paras = document.querySelectorAll("p");

for (const para of paras) {
  para.scroll(100, 0);
}
```

#### Result

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

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

A previous version of this interface reached the *Candidate Recommendation* status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the *Working Draft* level, explaining why browsers implemented this property unprefixed, though not at the CR state.

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

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

See also
--------

* Related CSS properties: `overflow`, `white-space`
* CSS properties that control line breaks in words: `overflow-wrap`, `word-break`


:left - CSS: Cascading Style Sheets

:left
=====

The **`:left`** CSS pseudo-class, used with the `@page` at-rule, represents all left-hand pages of a printed document.

```css
/\* Selects any left-hand pages when printing \*/
@page :left {
  margin: 2in 3in;
}
```

Whether a given page is "left" or "right" is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a `:right` page; if it has a major writing direction of right-to-left then it will be a `:left` page.

**Note:** This pseudo-class can be used to change only the `margin`, `padding`, `border`, and `background` properties of the *page box*. All other properties will be ignored, and only the page box, not the document content on the page, will be affected.

Syntax
------

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

Examples
--------

### Setting a margin for left-hand pages

```css
@page :left {
  margin: 2in 3in;
}
```

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

See also
--------

* `@page`
* Other page-related pseudo-classes: `:first`, `:right`


text-size-adjust - CSS: Cascading Style Sheets

text-size-adjust
================

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

The **`text-size-adjust`** CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. The `text-size-adjust` property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.

Syntax
------

```css
/\* Keyword values \*/
text-size-adjust: none;
text-size-adjust: auto;

/\* <percentage> value \*/
text-size-adjust: 80%;

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

The `text-size-adjust` property is specified as `none`, `auto`, or a `<percentage>`.

### Values

`none`

Disables the browser's inflation algorithm.

`auto`

Enables the browser's inflation algorithm. This value is used to cancel a `none` value previously set with CSS.

`<percentage>`

Enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size.

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

|  |  |
| --- | --- |
| Initial value | `auto` for smartphone browsers supporting inflation, `none` in other cases (and then not modifiable). |
| Applies to | all elements |
| Inherited | yes |
| Percentages | yes, refer to the corresponding size of the text font |
| Computed value | as specified |
| Animation type | by computed value type |

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

text-size-adjust =
  auto                |
  none                |
  <percentage [0,∞]>

```

Examples
--------

### Basic disabling usage

As hinted at above, on a properly designed responsive site the `text-size-adjust` behavior is not needed, so developers can elect to turn it off by specifying a value of none:

```css
p {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
```

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

| Specification |
| --- |
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |

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

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

See also
--------

* Apple's documentation
* Google Chrome behavior description
* Gecko's behavior description, by L. David Baron


:muted - CSS: Cascading Style Sheets

:muted
======

The **`:muted`** CSS pseudo-class selector represents an element that is capable of making sound, such as `<audio>` or `<video>`, but is muted (forced silent).

 Muted is different from `:volume-locked` in that the page author has control over whether a media element can be muted or un-muted.
 User agents may set media `muted` value according to use preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise).
 An element that is `:volume-locked` cannot be muted, un-muted, or have its volume changed via JavaScript because of an operating system or user agent preference.

Syntax
------

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

Examples
--------

### CSS

```css
:muted {
  outline: 5px solid red;
}

video:muted {
  outline: 5px solid blue;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # selectordef-muted |

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

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

See also
--------

* `:buffering`
* `:paused`
* `:playing`
* `:seeking`
* `:stalled`
* `:volume-locked`
* CSS selectors
* `muted` property of `HTMLMediaElement` objects


-webkit-tap-highlight-color - CSS: Cascading Style Sheets

-webkit-tap-highlight-color
===========================

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

**`-webkit-tap-highlight-color`** is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.

Syntax
------

```css
-webkit-tap-highlight-color: red;
-webkit-tap-highlight-color: transparent; /\* for removing the highlight \*/

/\* Global values \*/
-webkit-tap-highlight-color: inherit;
-webkit-tap-highlight-color: initial;
-webkit-tap-highlight-color: revert;
-webkit-tap-highlight-color: revert-layer;
-webkit-tap-highlight-color: unset;
```

### Values

A `<color>`.

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

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

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

-webkit-tap-highlight-color =
  <color>
```

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

Not part of any standard. Apple has a description in the Safari Web Content Guide.

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

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

See also
--------

* WebKit CSS extensions
* Related CSS pseudo-classes:
    + `:hover`
    + `:active`
    + `:visited`


padding-block-start - CSS: Cascading Style Sheets

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

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

Try it
------

Syntax
------

```css
/\* <length> values \*/
padding-block-start: 10px; /\* An absolute length \*/
padding-block-start: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-block-start: 5%; /\* A padding relative to the block container's width \*/

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

### 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) of the containing block. Must be nonnegative.

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

The `padding-block-start` property is defined in the specification as taking the same values as the `padding-top` property. However, the physical property it maps to depends on the values set for `writing-mode`, `direction`, and `text-orientation`. Therefore, it could map to `padding-bottom`, `padding-right`, or `padding-left`.

It relates to `padding-block-end`, `padding-inline-start`, and `padding-inline-end`, which define the other paddings of the element.

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` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as `<length>` |
| Animation type | a length |

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

padding-block-start =
  <'padding-top'>

```

Examples
--------

### Setting block start padding for 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-lr;
  padding-block-start: 20px;
  background-color: #c8c800;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

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: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`


CSS conditional rules - CSS: Cascading Style Sheets

CSS conditional rules
=====================

The **CSS conditional rules** module defines CSS media and support queries, enabling you to define styles that are only applied if specific conditions are met. The conditional rules defined in this module are based on device, user-agent, and viewport capabilities. With conditional rules, you can target CSS styles based on query values or browser and device features, independent of the document being rendered.

The first CSS conditional rules were media types specifying the intended destination medium for the linked styles, for example `screen` or `print`. These were set as the value of the HTML `<link>` and `<style>` elements' `media` attributes or as a comma-separated list of media types within an `@import` statement or at-rule. The ability to conditionally apply CSS rules has been greatly expanded since the CSS 2.1 and HTML 4.01 implementations that limited conditional queries to a few media types.

CSS conditional rules now include feature queries; the `@supports` at-rule enables targeting CSS styles based on a user-agent's CSS capabilities. Additional conditions include which selector, font-formats, and font-techs are supported.

The CSS conditional rules module also expands `@media` to enable nesting at-rules, with the related CSS media queries module removing unused media types and adding many media features and conditions that can be targeted.

The CSS container queries module defines similar conditional rules, but based on an element's parent rather than the viewport.

There are plans to further extend possible queries by adding the generalized conditional rule `@when` and the chained conditional rule `@else`. These two at-rules are not yet supported.

Reference
---------

### At-rules

* `@media`
* `@supports`

**Note:** The CSS conditional rules module introduces two at-rules that have not been implemented: `@else` and `@when`.

### Functions

* `font-tech()`
* `font-format()`
* `selector()`
* `supports()`

**Note:** The CSS conditional rules module introduces a CSS function that has not been implemented: `media()`.

### data types

* `<media-query>`
* `<supports-condition>`
* `<supports-feature>` (see `supports()`)
### Interfaces

* `CSSConditionRule`
* `CSSMediaRule`
* `CSSSupportsRule`
* `supports()` method
### Terms and glossary definitions

* Media
* Supports query (See feature query)
* Conditional group rules
Guides
------

Using CSS feature queries

Selectively applying CSS rules after checking browser support for the specified properties and values via feature queries.

Using CSS media queries

Introduces media queries, their syntax, and the operators and media features that are used to construct media query expressions.

Supporting older browsers: feature queries

How to use feature queries to target CSS based on the browser's level of support for web features.

Browser feature detection: CSS `@supports`

A look at JavaScript and CSS feature detection, including CSS `@supports`.

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

* CSS cascade and inheritance module
    + `@import` at-rule
* CSS media queries module
    + `<media-feature>`
    + `<media-type>`
    + `<media-condition>`
    + `<media-query-list>`
    + CSS logical operators (`not`, `or`, and `and`)
* CSSOM view module
    + `CSS` API
    + `CSSGroupingRule` API
    + `MediaQueryList` API
    + `CSSRule` API
    + `MediaList` interface
        - `MediaList.mediaText` property
* CSS syntax module
    + `@charset` declaration
    + `at-rule` term
    + `invalid` term
    + parse term
    + style rule term
* CSS namespaces module
    + `@namespace` at-rule
Specifications
--------------

| Specification |
| --- |
| CSS Conditional Rules Module Level 5  |
| CSS Conditional Rules Module Level 4  |
| CSS Conditional Rules Module Level 3  |

See also
--------

* CSS container queries module
* CSS media queries module
* CSS cascade and inheritance module


border-block-start - CSS: Cascading Style Sheets

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

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

Try it
------

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

This property is a shorthand for the following CSS properties:

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

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

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

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

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

### Values

The `border-block-start` 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-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-block-start-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-start-color`: by computed value type
* `border-block-start-style`: discrete
* `border-block-start-width`: by computed value type
 |

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

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

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

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

```

Examples
--------

### 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-start: 5px dashed blue;
}
```

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

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

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`


perspective - CSS: Cascading Style Sheets

perspective
===========

The **`perspective`** CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

Try it
------

Syntax
------

```css
/\* Keyword value \*/
perspective: none;

/\* <length> values \*/
perspective: 20px;
perspective: 3.5em;

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

### Values

`none`

Indicates that no perspective transform is to be applied.

`<length>`

A `<length>` giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the children of the element. Negative values are syntax errors. If the value is smaller than `1px`, it is clamped to `1px`.

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

 Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
 Large values of `perspective` cause a small transformation;
 small values of `perspective` cause a large transformation.

The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the `perspective` CSS property — are not drawn.

The *vanishing point* is by default placed at the center of the element, but its position can be changed using the `perspective-origin` property.

Using this property with a value other than `none` creates a new stacking context. Also, in that case, the object will act as a containing block for `position: fixed` elements that it contains.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | the absolute length or `none` |
| Animation type | a length |
| Creates stacking context | yes |

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

perspective =
  none            |
  <length [0,∞]>

```

Examples
--------

### Setting perspective

An example showing how a cube varies if the `perspective` is set at different positions is given in Using CSS transforms > Setting perspective.

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-property |

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

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

See also
--------

* Using CSS Transforms


-webkit-text-stroke-color - CSS: Cascading Style Sheets

-webkit-text-stroke-color
=========================

The **`-webkit-text-stroke-color`** CSS property specifies the stroke color of characters of text. If this property is not set, the value of the `color` property is used.

Syntax
------

```css
/\* <color> values \*/
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200 100 0);

/\* Global values \*/
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: revert;
-webkit-text-stroke-color: revert-layer;
-webkit-text-stroke-color: unset;
```

### Values

`<color>`

The color of the stroke.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | computed color |
| Animation type | a color |

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

-webkit-text-stroke-color =
  <color>

```

Examples
--------

### Varying the stroke color

#### HTML

```html
<p>Text with stroke</p>
<input type="color" value="#ff0000" />
```

#### CSS

```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; /\* Can be changed in the live sample \*/
}
```

```
const colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", (evt) => {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});
```

#### Results

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-color |

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

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

See also
--------

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-fill-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`