overflow-inline - CSS: Cascading Style Sheets

overflow-inline
===============

The **`overflow-inline`** CSS property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.

**Note:** The `overflow-inline` property maps to `overflow-y` or `overflow-x` depending on the writing mode of the document.

Syntax
------

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

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

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

### Values

`visible`

Content is not clipped and may be rendered outside the padding box's inline start and end edges.

`hidden`

Content is clipped if necessary to fit the inline dimension in the padding box. No scrollbars are provided.

`clip`

Overflow content is clipped at the element's overflow clip edge that is defined using the `overflow-clip-margin` property.

`scroll`

Content is clipped if necessary to fit in the padding box in the inline dimension. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

`auto`

Depends on the user agent. If content fits inside the padding box, it looks the same as `visible`, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.

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

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

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

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

```

Examples
--------

### Setting inline overflow behavior

#### HTML

```html
<ul>
  <li>
    <code>overflow-inline: hidden</code> (hides the text outside the box)
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: scroll</code> (always adds a scrollbar)
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: visible</code> (displays the text outside the box if
    needed)
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: auto</code> (equivalent to <code>scroll</code>
    in most browsers)
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: clip</code> (hides the text outside the box beyond
    the overflow clip edge)
    <code>clip</code>
    <div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
```

#### CSS

```css
div {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
#div5 {
  overflow-inline: clip;
  overflow-clip-margin: 2em;
}
```

#### Result

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

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

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

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

See also
--------

* `clip`, `display`, `overflow`, `overflow-block`, `overflow-clip-margin`, `overflow-x`, `overflow-y`, `text-overflow`, `white-space`
* CSS overflow module
* CSS logical properties
* CSS writing modes
* CSS building blocks: Overflowing content


Actual value - CSS: Cascading Style Sheets

Actual value
============

The **actual value** of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

Calculating a property's actual value
-------------------------------------

The user agent performs four steps to calculate a property's actual (final) value:

1. First, the specified value is determined based on the result of cascading, inheritance, or using the initial value.
2. Next, the computed value is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`).
3. Then, layout is calculated, resulting in the used value.
4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.
Specifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value |

See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements


max-block-size - CSS: Cascading Style Sheets

max-block-size
==============

The **`max-block-size`** CSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by `writing-mode`. That is, if the writing direction is horizontal, then `max-block-size` is equivalent to `max-height`; if the writing direction is vertical, `max-block-size` is the same as `max-width`.

The other dimension's maximum length is specified using the `max-inline-size` property.

This is useful because the `max-width` is always used for horizontal sizes and `max-height` is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.

Any time you would normally use `max-height` or `max-width`, you should instead use `max-block-size` to set the maximum "height" of the content (even though this may not be a vertical value) and `max-inline-size` to set the maximum "width" of the content (although this may instead be vertical rather than horizontal). See `writing-mode` examples, which show the different writing modes in action.

Try it
------

Syntax
------

```css
/\* <length> values \*/
max-block-size: 300px;
max-block-size: 25em;

/\* <percentage> values \*/
max-block-size: 75%;

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

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

### Values

The `max-block-size` property's value can be any value that's legal for the `max-width` and `max-height` properties:

`<length>`

Defines the `max-block-size` as an absolute value.

`<percentage>`

Defines the `max-block-size` as a percentage of the containing block's size in block axis.

`none`

No limit on the size of the box.

`max-content`

The intrinsic preferred `max-block-size`.

`min-content`

The intrinsic minimum `max-block-size`.

`fit-content`

Use the available space, but not more than max-content, i.e `min(max-content, max(min-content, stretch))`.

`fit-content(`<length-percentage>`)`
Experimental

Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

### How writing-mode affects directionality

The values of `writing-mode` affect the mapping of `max-block-size` to `max-width` or `max-height` as follows:

| Values of `writing-mode` | `max-block-size` is equivalent to |
| --- | --- |
| `horizontal-tb`, `lr`
Deprecated
, `lr-tb`
Deprecated
, `rl`
Deprecated
, `rb`
Deprecated
, `rb-rl`
Deprecated
 | `max-height` |
| `vertical-rl`, `vertical-lr`, `sideways-rl`
Experimental
, `sideways-lr`
Experimental
, `tb`
Deprecated
, `tb-rl`
Deprecated
 | `max-width` |

**Note:** The `writing-mode` values `sideways-lr` and `sideways-rl` were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.

**Note:** The writing modes `lr`, `lr-tb`, `rl`, `rb`, and `rb-tl` are no longer allowed in HTML contexts; they may only be used in SVG 1.x contexts.

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

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

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

max-block-size =
  <'max-width'>

```

Examples
--------

### Setting max-block-size with horizontal and vertical text

In this example, the same text (the opening sentences from Herman Melville's novel *Moby-Dick*) is presented in both the `horizontal-tb` and `vertical-rl` writing modes.

Everything else about the two boxes is identical, including the values used for `max-block-size`.

#### HTML

The HTML establishes the two `<div>` blocks that will be presented with their `writing-mode` set using the classes `horizontal` or `vertical`. Both boxes share the `standard-box` class, which establishes coloring, padding, and their respective values of `max-block-size`.

```html
<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>
```

#### CSS

The CSS defines three classes. The first, `standard-box`, is applied to both boxes, as seen above. It provides standard styling including the minimum and maximum block sizes, font size, and so forth.

After that come the classes `horizontal` and `vertical`, which add the `writing-mode` property to the box, with the value set to `horizontal-tb` or `vertical-rl` depending on which class is used.

```css
.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

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

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `max-width` and `max-height`
* Setting the other direction's maximum size: `max-inline-size`
* `writing-mode`


text-emphasis-style - CSS: Cascading Style Sheets

text-emphasis-style
===================

The **`text-emphasis-style`** CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the `text-emphasis` shorthand.

Try it
------

Syntax
------

```css
/\* Initial value \*/
text-emphasis-style: none; /\* No emphasis marks \*/

/\* <string> values \*/
text-emphasis-style: "x";
text-emphasis-style: "点";
text-emphasis-style: "\25B2";
text-emphasis-style: "\*";
text-emphasis-style: "foo"; /\* Should NOT be used. It may be computed to or rendered as 'f' only \*/

/\* Keyword values \*/
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

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

### Values

`none`

No emphasis marks.

`filled`

The shape is filled with solid color. If neither `filled` nor `open` is present, this is the default.

`open`

The shape is hollow.

`dot`

Display small circles as marks. The filled dot is `'•'` (`U+2022`), and the open dot is `'◦'` (`U+25E6`).

`circle`

Display large circles as marks. The filled circle is `'●'` (`U+25CF`), and the open circle is `'○'` (`U+25CB`).

`double-circle`

Display double circles as marks. The filled double-circle is `'◉'` (`U+25C9`), and the open double-circle is `'◎'` (`U+25CE`).

`triangle`

Display triangles as marks. The filled triangle is `'▲'` (`U+25B2`), and the open triangle is `'△'` (`U+25B3`).

`sesame`

Display sesames as marks. The filled sesame is `'﹅'` (`U+FE45`), and the open sesame is `'﹆'` (`U+FE46`).

`<string>`

Display the given string as marks. Authors should not specify more than one *character* in `<string>`. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

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

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

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

text-emphasis-style =
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>

```

Examples
--------

### Basic example

```css
h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-style-property |

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

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

See also
--------

* The related properties `text-emphasis-color`, `text-emphasis`.
* The `text-emphasis-position` property allowing to define the position of the emphasis marks.


touch-action - CSS: Cascading Style Sheets

touch-action
============

The **`touch-action`** CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer events will receive a `pointercancel` event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in `pointermove` and `pointerup` listeners for the remaining gestures. Applications using Touch events disable the browser handling of gestures by calling `preventDefault()`, but should also use `touch-action` to ensure the browser knows the intent of the application before any event listeners have been invoked.

When a gesture is started, the browser intersects the `touch-action` values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, `touch-action` is typically applied only to top-level elements which have some custom behavior, without needing to specify `touch-action` explicitly on any of that element's descendants.

**Note:** After a gesture starts, changes to `touch-action` will not have any impact on the behavior of the current gesture.

Syntax
------

```css
/\* Keyword values \*/
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

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

The `touch-action` property may be specified as either:

* One of the keywords `auto`, `none`, `manipulation`, *or*
* One of the keywords `pan-x`, `pan-left`, `pan-right`, and/or one of the keywords `pan-y`, `pan-up`, `pan-down`, plus optionally the keyword `pinch-zoom`.
### Values

`auto`

Enable browser handling of all panning and zooming gestures.

`none`

Disable browser handling of all panning and zooming gestures.

`pan-x`

Enable single-finger horizontal panning gestures. May be combined with **pan-y**, **pan-up**, **pan-down** and/or **pinch-zoom**.

`pan-y`

Enable single-finger vertical panning gestures. May be combined with **pan-x**, **pan-left**, **pan-right** and/or **pinch-zoom**.

`manipulation`

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of **click** events when the user taps the screen. This is an alias for "**pan-x pan-y pinch-zoom**" (which, for compatibility, is itself still valid).

`pan-left`, `pan-right`, `pan-up`, `pan-down`
Experimental

Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (**pan-up**) means that the user is dragging their finger downward on the screen surface, and likewise **pan-left** means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, **"pan-left pan-right**" is invalid since "**pan-x**" is simpler, but "**pan-left pan-down**" is valid).

`pinch-zoom`

Enable multi-finger panning and zooming of the page. This may be combined with any of the **pan-** values.

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

A declaration of `touch-action: none;` may inhibit operating a browser's zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

touch-action =
  auto                                                |
  none                                                |
  [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ]  |
  manipulation

```

Examples
--------

### Disabling all gestures

The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.

#### HTML

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

#### CSS

```css
#map {
  height: 150vh;
  width: 70vw;
  background: linear-gradient(blue, green);
  touch-action: none;
}
```

#### Result

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

| Specification |
| --- |
| Compatibility Standard # touch-action |
| Pointer Events # the-touch-action-css-property |

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

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

See also
--------

* `pointer-events`
* `Pointer Events`
* WebKit Blog More Responsive Tapping on iOS
* Google Developers Blog Making touch scrolling fast by default
* Scroll Snap


:-moz-window-inactive - CSS: Cascading Style Sheets

:-moz-window-inactive
=====================

**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-window-inactive`** CSS pseudo-class is a Mozilla extension that matches any element while it's in an inactive window.

`:-moz-window-inactive` works in content HTML documents, too.

**Note:** Prior to the addition of this pseudo-class, giving different styles to background windows was achieved by setting an attribute (`active="true"`) on the top-level XUL chrome window. This attribute is no longer used.

Syntax
------

```css
:-moz-window-inactive {
  /\* ... \*/
}
```

Examples
--------

This example alters the appearance of a box's background depending on whether its window is active or not.

### HTML

```html
<div id="mybox">
  <p>This is a box!</p>
</div>
```

### CSS

```css
#mybox {
  background: linear-gradient(to bottom, yellow, cyan);
  width: 200px;
  height: 200px;
}

#mybox:-moz-window-inactive {
  background: cyan;
}
```

### Result

The result of this code is shown below. You can view this as a separate page as well.

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

* Mozilla CSS extensions
* Related CSS selectors:
    + `:active`
* The `Document.activeElement` property for regular DOM, and the `ShadowRoot.activeElement` property for shadow DOM roots.


scroll-margin-inline-start - CSS: Cascading Style Sheets

scroll-margin-inline-start
==========================

The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

Try it
------

Syntax
------

```css
/\* <length> values \*/
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;

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

### Values

`<length>`

An outset from the inline start edge of the scroll container.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-margin-inline-start =
  <length>

```

Examples
--------

### Simple demonstration

This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.

#### HTML

The HTML that represents the blocks is very simple:

```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

#### CSS

Let's walk through the CSS. The outer container is styled like this:

```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```

The main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.

The child elements are styled as follows:

```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```

The most relevant part here is `scroll-snap-align: start`, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.

Last of all we specify the scroll margin-values, a different one for the second and third child elements:

```css
.scroller > div:nth-child(2) {
  scroll-margin-inline-start: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-start: 2rem;
}
```

This means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the inline start edge of the second `<div>`, and `2rems` outside the inline start edge of the third `<div>`.

#### Result

Try it for yourself:

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

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

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

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

See also
--------

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


CSS fragmentation - CSS: Cascading Style Sheets

CSS fragmentation
=================

The **CSS fragmentation** module defines how content is displayed when it is broken (fragmented) across multiple pages, regions, or columns.

Fragmentation occurs when an inline box wraps onto multiple lines. It also occurs when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a *fragment*.

Reference
---------

### Properties

* `box-decoration-break`
* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
Specifications
--------------

| Specification |
| --- |
| CSS Fragmentation Module Level 3  |


<blend-mode> - CSS: Cascading Style Sheets

<blend-mode>
============

The **`<blend-mode>`** CSS data type describes how colors should appear when elements overlap. It is used in the `background-blend-mode` and `mix-blend-mode` properties.

Syntax
------

The `<blend-mode>` data type is defined using a keyword value chosen from the list below.

### Values

`normal`

 The final color is the top color, regardless of what the bottom color is.
 The effect is like two opaque pieces of paper overlapping.

`multiply`

 The final color is the result of multiplying the top and bottom colors.
 A black layer leads to a black final layer, and a white layer leads to no change.
 The effect is like two images printed on transparent film overlapping.

`screen`

 The final color is the result of inverting the colors, multiplying them, and inverting that value.
 A black layer leads to no change, and a white layer leads to a white final layer.
 The effect is like two images shone onto a projection screen.

`overlay`

 The final color is the result of `multiply` if the bottom color is darker, or `screen` if the bottom color is lighter.
 This blend mode is equivalent to `hard-light` but with the layers swapped.

`darken`

The final color is composed of the darkest values of each color channel.

`lighten`

The final color is composed of the lightest values of each color channel.

`color-dodge`

 The final color is the result of dividing the bottom color by the inverse of the top color.
 A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.
 This blend mode is similar to `screen`, but the foreground need only be as light as the inverse of the backdrop to create a fully lit color.

`color-burn`

 The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
 A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.
 This blend mode is similar to `multiply`, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.

`hard-light`

 The final color is the result of `multiply` if the top color is darker, or `screen` if the top color is lighter.
 This blend mode is equivalent to `overlay` but with the layers swapped.
 The effect is similar to shining a *harsh* spotlight on the backdrop.

`soft-light`

 The final color is similar to `hard-light`, but softer.
 This blend mode behaves similar to `hard-light`.
 The effect is similar to shining a *diffused* spotlight on the backdrop\*.\*

`difference`

 The final color is the result of subtracting the darker of the two colors from the lighter one.
 A black layer has no effect, while a white layer inverts the other layer's color.

`exclusion`

 The final color is similar to `difference`, but with less contrast.
 As with `difference`, a black layer has no effect, while a white layer inverts the other layer's color.

`hue`

The final color has the *hue* of the top color, while using the *saturation* and *luminosity* of the bottom color.

`saturation`

 The final color has the *saturation* of the top color, while using the *hue* and *luminosity* of the bottom color.
 A pure gray backdrop, having no saturation, will have no effect.

`color`

 The final color has the *hue* and *saturation* of the top color, while using the *luminosity* of the bottom color.
 The effect preserves gray levels and can be used to colorize the foreground.

`luminosity`

 The final color has the *luminosity* of the top color, while using the *hue* and *saturation* of the bottom color.
 This blend mode is equivalent to `color`, but with the layers swapped.

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

For each pixel among the layers to which it is applied, a blend mode takes the colors of the foreground and the background, performs a calculation on them, and returns a new color value.

Changes between blend modes are not interpolated. Any change occurs immediately.

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

<blend-mode> =
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

```

Examples
--------

### Example using "normal"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}
```

### Example using "multiply"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}
```

### Example using "screen"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

### Example using "overlay"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}
```

### Example using "darken"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}
```

### Example using "lighten"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}
```

### Example using "color-dodge"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}
```

### Example using "color-burn"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}
```

### Example using "hard-light"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}
```

### Example using "soft-light"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}
```

### Example using "difference"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}
```

### Example using "exclusion"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}
```

### Example using "hue"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}
```

### Example using "saturation"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}
```

### Example using "color"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}
```

### Example using "luminosity"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: luminosity;
}
```

### Blend mode comparison

In the following example, we have a `<div>` with two background images set on it — a Firefox logo on top of a linear gradient. Below it, we have a provided a `<select>` menu that allows you to change the `background-blend-mode` applied to the `<div>`, allowing you to compare the different blend mode effects.

#### HTML

```html
<div></div>
<p>Choose a blend-mode:</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background:
    url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png)
      no-repeat center,
    linear-gradient(to bottom, blue, orange);
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");

selectElem.addEventListener("change", () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});
```

#### Result

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

| Specification |
| --- |
| Compositing and Blending Level 2 # ltblendmodegt |

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

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

See also
--------

* The CSS compositing and blending module that defines the `<blend-mode>` values.
* Properties that use this data type: `background-blend-mode`, `mix-blend-mode`

Description to various blend modes on other website:

* Blend modes on Wikipedia
* Blending modes in Adobe Photoshop by Adobe


line-height-step - CSS: Cascading Style Sheets

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

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

The **`line-height-step`** CSS property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit.

Syntax
------

```css
/\* Point values \*/
line-height-step: 18pt;

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

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

* a `<length>`.
### Values

`<length>`

The specified `<length>` is used in the calculation of the line box height step.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | block containers |
| Inherited | yes |
| Computed value | absolute `<length>` |
| Animation type | by computed value type |

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

line-height-step =
  <length [0,∞]>

```

Examples
--------

### Setting step unit for line box height

In the following example, the height of line box in each paragraph is rounded up to the step unit. The line box in `<h1>` does not fit into one step unit and thus occupies two, but it is still centered within the two step unit.

```css
:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
```

The result of these rules is shown below in the following screenshot:

![How the line-height-step property affects the appearance of text.](/en-US/docs/Web/CSS/line-height-step/line-grid-center.png)

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

| Specification |
| --- |
| CSS Rhythmic Sizing # line-height-step |

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

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

See also
--------

* `font`
* `font-size`
* `line-height`


::-webkit-search-results-button - CSS: Cascading Style Sheets

::-webkit-search-results-button
===============================

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

The **`::-webkit-search-results-button`** CSS pseudo-element represents a button (the "search results button") at the left edge of an `<input>` of `type="search"` which when clicked displays a menu which allows the user to choose from previous recent search queries. This button and pseudo-element are non-standard, supported only in WebKit and Blink, hence the vendor prefix. The search results button is only shown on search `<input>` elements that have a `results` attribute.

Syntax
------

```css
selector::-webkit-search-results-button {
  /\* ... \*/
}
```

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-search-cancel-button`


border-image-outset - CSS: Cascading Style Sheets

border-image-outset
===================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`border-image-outset`** CSS property sets the distance by which an element's border image is set out from its border box.

The parts of the border image that are rendered outside the element's border box with `border-image-outset` do not trigger overflow scrollbars and don't capture mouse events.

Try it
------

Syntax
------

```css
/\* <length> value \*/
border-image-outset: 1rem;

/\* <number> value \*/
border-image-outset: 1.5;

/\* top and bottom | left and right \*/
border-image-outset: 1 1.2;

/\* top | left and right | bottom \*/
border-image-outset: 30px 2 45px;

/\* top | right | bottom | left \*/
border-image-outset: 7px 12px 14px 5px;

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

The `border-image-outset` property may be specified as one, two, three, or four values. Each value is a `<length>` or `<number>`. Negative values are invalid and will cause the `border-image-outset` declaration to be ignored.

1. If **one** value is specified, it applies to **all four sides**.
2. If **two** values are specified, the first applies to the **top and bottom** and the second to the **left and right**.
3. If **three** values are specified, the first applies to the **top**, the second to the **left and right**, and the third to the **bottom**.
4. If **four** values are specified, they apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<length>`

The size of the `border-image` outset as a dimension — a number with a unit.

`<number>`

The size of the `border-image` outset as a multiple of the element's corresponding `border-width`s. For example, if an element has `border-width: 1em 2px 0 1.5rem`, and `border-image-outset: 2`, the final `border-image-outset` would be calculated as `2em 4px 0 3rem`.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

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

border-image-outset =
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}

```

Examples
--------

### Outsetting a border image

#### HTML

```html
<div id="outset">This element has an outset border image!</div>
```

#### CSS

```css
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /\* 1.5 × 1.4rem = 2.1rem \*/
  margin: 2.1rem;
}
```

#### Result

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

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

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

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

See also
--------

* Backgrounds and borders
* Learn CSS: Backgrounds and borders
* Border images in CSS: A key focus area for Interop 2023 on MDN blog (2023)


grid - CSS: Cascading Style Sheets

grid
====

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

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

* Learn more
* See full compatibility
* Report feedback
The **`grid`** CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

Using `grid` you specify one axis using `grid-template-rows` or `grid-template-columns`, you then specify how content should auto-repeat in the other axis using the implicit grid properties: `grid-auto-rows`, `grid-auto-columns`, and `grid-auto-flow`.

Try it
------

**Note:** The sub-properties you don't specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.

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

This property is a shorthand for the following CSS properties:

* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`
Syntax
------

```css
/\* <'grid-template'> values \*/
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/\* <'grid-template-rows'> /
 [ auto-flow && dense? ] <'grid-auto-columns'>? values \*/
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/\* [ auto-flow && dense? ] <'grid-auto-rows'>? /
 <'grid-template-columns'> values \*/
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

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

### Values

`<'grid-template'>`

Defines the `grid-template` including `grid-template-columns`, `grid-template-rows` and `grid-template-areas`.

`<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`

Sets up an auto-flow by setting the row tracks explicitly via the `grid-template-rows` property (and the `grid-template-columns` property to `none`) and specifying how to auto-repeat the column tracks via `grid-auto-columns` (and setting `grid-auto-rows` to `auto`). `grid-auto-flow` is also set to `column` accordingly, with `dense` if it's specified.

All other `grid` sub-properties are reset to their initial values.

`[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`

Sets up an auto-flow by setting the column tracks explicitly via the `grid-template-columns` property (and the `grid-template-rows` property to `none`) and specifying how to auto-repeat the row tracks via `grid-auto-rows` (and setting `grid-auto-columns` to `auto`). `grid-auto-flow` is also set to `row` accordingly, with `dense` if it's specified.

All other `grid` sub-properties are reset to their initial values.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `grid-template-rows`: `none`
* `grid-template-columns`: `none`
* `grid-template-areas`: `none`
* `grid-auto-rows`: `auto`
* `grid-auto-columns`: `auto`
* `grid-auto-flow`: `row`
* `grid-column-gap`: `0`
* `grid-row-gap`: `0`
* `column-gap`: `normal`
* `row-gap`: `normal`
 |
| Applies to | grid containers |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `grid-template-rows`: refer to corresponding dimension of the content area
* `grid-template-columns`: refer to corresponding dimension of the content area
* `grid-auto-rows`: refer to corresponding dimension of the content area
* `grid-auto-columns`: refer to corresponding dimension of the content area
 |
| Computed value | as each of the properties of the shorthand:* `grid-template-rows`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-columns`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-areas`: as specified
* `grid-auto-rows`: the percentage as specified or the absolute length
* `grid-auto-columns`: the percentage as specified or the absolute length
* `grid-auto-flow`: as specified
* `grid-column-gap`: the percentage as specified or the absolute length
* `grid-row-gap`: the percentage as specified or the absolute length
* `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `row-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-areas`: discrete
* `grid-auto-rows`: by computed value type
* `grid-auto-columns`: by computed value type
* `grid-auto-flow`: discrete
* `grid-column-gap`: a length
* `grid-row-gap`: a length
* `column-gap`: a length, percentage or calc();
* `row-gap`: a length, percentage or calc();
 |

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

grid =
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

```

Examples
--------

### Creating a grid layout

#### HTML

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

#### CSS

```css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-shorthand |

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

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

See also
--------

* Related CSS properties: `grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Grid Layout Guide: *Grid template areas - Grid definition shorthands*


CSS container queries - CSS: Cascading Style Sheets

CSS container queries
=====================

 Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts.
 Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.

![A media query based on the viewport's width, which is the full width of the browser, and a container query based on the width of a container context, which is the width of the container element.](/en-US/docs/Web/CSS/CSS_container_queries/container-query.svg)

Using container queries
-----------------------

 To use container queries, you need to declare a **containment context** on an element so that the browser knows you might want to query the dimensions of this container later.
 To do this, use the `container-type` property with a value of `size`, `inline-size`, or `normal`.

These values have the following effects:

`size`

 The query will be based on the inline and block dimensions of the container.
 Applies layout, style, and size containment to the container.

`inline-size`

 The query will be based on the inline dimensions of the container.
 Applies layout, style, and inline-size containment to the element.

`normal`

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

Consider the following example of a card component for a blog post with a title and some text:

```html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
```

You can create a containment context using the `container-type` property:

```css
.post {
  container-type: inline-size;
}
```

 Next, use the `@container` at-rule to define a container query.
 The query in the following example will apply styles to elements based on the size of the nearest ancestor with a containment context.
 Specifically, this query will apply a larger font size for the card title if the container is wider than `700px`:

```css
/\* Default heading styles for the card title \*/
.card h2 {
  font-size: 1em;
}

/\* If the container is larger than 700px \*/
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}
```

 Using container queries, the card can be reused in multiple areas of a page without needing to know specifically where it will be placed each time.
 If the container with the card is narrower than `700px`, the font of the card title will be small, and if the card is in a container that's wider than `700px`, the font of the card title will be bigger.

For more information on the syntax of container queries, see the `@container` page.

### Naming containment contexts

 In the previous section, a container query applied styles based on the nearest ancestor with a containment context.
 It's possible to give a containment context a name using the `container-name` property. Once named, the name can be used in a `@container` query so as to target a specific container.
 The following example creates a containment context with the name `sidebar`:

```css
.post {
  container-type: inline-size;
  container-name: sidebar;
}
```

You can then target this containment context using the `@container` at-rule:

```css
@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}
```

More information on naming containment contexts is available on the `container-name` page.

### Shorthand container syntax

The shorthand way of declaring a containment context is to use the `container` property:

```css
.post {
  container: sidebar / inline-size;
}
```

For more information on this property, see the `container` reference.

### Container query length units

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

The container query length units are:

* `cqw`: 1% of a query container's width
* `cqh`: 1% of a query container's height
* `cqi`: 1% of a query container's inline size
* `cqb`: 1% of a query container's block size
* `cqmin`: The smaller value of either `cqi` or `cqb`
* `cqmax`: The larger value of either `cqi` or `cqb`

The following example uses the `cqi` unit to set the font size of a heading based on the inline size of the container:

```css
@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}
```

For more information on these units, see the Container query length units reference.

Fallbacks for container queries
-------------------------------

 For browsers that don't yet support container queries, `grid` and `flex` can be used to create a similar effect for the card component used on this page.
 The following example uses a `grid-template-columns` declaration to create a two-column layout for the card component.

```css
.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
```

If you want to use a single-column layout for devices with a smaller viewport, you can use a media query to change the grid template:

```css
@media (max-width: 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}
```

See also
--------

* Media queries
* CSS `@container` at-rule
* CSS `contain` property
* CSS `container` shorthand property
* CSS `container-name` property
* CSS `content-visibility` property
* Say Hello to CSS Container Queries by Ahmad Shadeed
* Container Queries: a Quick Start Guide
* Collection of Container Queries articles


list-style-type - CSS: Cascading Style Sheets

list-style-type
===============

The **`list-style-type`** CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

Try it
------

The marker will be `currentcolor`, the same as the computed color of the element it applies to.

Only a few elements (`<li>` and `<summary>`) have a default value of `display: list-item`. However, the `list-style-type` property may be applied to any element whose `display` value is set to `list-item`. Moreover, because this property is inherited, it can be set on a parent element (commonly `<ol>` or `<ul>`) to make it apply to all list items.

Syntax
------

```css
/\* Partial list of types \*/
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/\* <string> value \*/
list-style-type: "-";

/\* Identifier matching an @counter-style rule \*/
list-style-type: custom-counter-style;

/\* Keyword value \*/
list-style-type: none;

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

The `list-style-type` property may be defined as any one of:

* a `<custom-ident>` value,
* a `symbols()` value,
* a `<string>` value, or
* the keyword `none`.

Note that:

* Some types require a suitable font installed to display as expected.
* The `cjk-ideographic` is identical to `trad-chinese-informal`; it exists for legacy reasons.
### Values

`<custom-ident>`

An identifier matching the value of a `@counter-style` or one of the predefined styles:

`symbols()`

Defines an anonymous style of the list.

`<string>`

The specified string will be used as the item's marker.

`none`

No item marker is shown.

`disc`

A filled circle (default value).

`circle`

A hollow circle.

`square`

A filled square.

`decimal`

Decimal numbers, beginning with 1.

`cjk-decimal`

Han decimal numbers.

`decimal-leading-zero`

Decimal numbers, padded by initial zeros.

`lower-roman`

Lowercase roman numerals.

`upper-roman`

Uppercase roman numerals.

`lower-greek`

Lowercase classical Greek.

`lower-alpha`, `lower-latin`

Lowercase ASCII letters.

`upper-alpha`, `upper-latin`

Uppercase ASCII letters.

`arabic-indic`, `-moz-arabic-indic`

Arabic-Indic numbers.

`armenian`

Traditional Armenian numbering.

`bengali`, `-moz-bengali`

Bengali numbering.

`cambodian`/`khmer`

Cambodian/Khmer numbering.

`cjk-earthly-branch`, `-moz-cjk-earthly-branch`

Han "Earthly Branch" ordinals.

`cjk-heavenly-stem`, `-moz-cjk-heavenly-stem`

Han "Heavenly Stem" ordinals.

`cjk-ideographic`

Identical to `trad-chinese-informal`.

`devanagari`, `-moz-devanagari`

Devanagari numbering.

`ethiopic-numeric`

Ethiopic numbering.

`georgian`

Traditional Georgian numbering.

`gujarati`, `-moz-gujarati`

Gujarati numbering.

`gurmukhi`, `-moz-gurmukhi`

Gurmukhi numbering.

`hebrew`

Traditional Hebrew numbering.

`hiragana`

Dictionary-order hiragana lettering.

`hiragana-iroha`

Iroha-order hiragana lettering.

`japanese-formal`

Japanese formal numbering to be used in legal or financial documents. The kanjis are designed so that they can't be modified to look like another correct one.

`japanese-informal`

Japanese informal numbering.

`kannada`, `-moz-kannada`

Kannada numbering.

`katakana`

Dictionary-order katakana lettering.

`katakana-iroha`

Iroha-order katakana lettering.

`korean-hangul-formal`

Korean hangul numbering.

`korean-hanja-formal`

Formal Korean Han numbering.

`korean-hanja-informal`

Korean hanja numbering.

`lao`, `-moz-lao`

Laotian numbering.

`lower-armenian`

Lowercase Armenian numbering.

`malayalam`, `-moz-malayalam`

Malayalam numbering.

`mongolian`

Mongolian numbering.

`myanmar`, `-moz-myanmar`

Myanmar (Burmese) numbering.

`oriya`, `-moz-oriya`

Oriya numbering.

`persian`, `-moz-persian`

Persian numbering.

`simp-chinese-formal`

Simplified Chinese formal numbering.

`simp-chinese-informal`

Simplified Chinese informal numbering.

`tamil`, `-moz-tamil`

Tamil numbering.

`telugu`, `-moz-telugu`

Telugu numbering.

`thai`, `-moz-thai`

Thai numbering.

`tibetan`

Tibetan numbering.

`trad-chinese-formal`

Traditional Chinese formal numbering.

`trad-chinese-informal`

Traditional Chinese informal numbering.

`upper-armenian`

Traditional uppercase Armenian numbering.

`disclosure-open`

Symbol indicating that a disclosure widget such as `<details>` is opened.

`disclosure-closed`

Symbol indicating that a disclosure widget, like `<details>` is closed.

Refer to the All list style types example to see the above values in action. Details of all the available counter styles used by various cultures around the world can be found in Ready-made Counter Styles.

### Non-standard extensions

A few predefined types are supported by Mozilla (Firefox) with a `-moz-` prefix.

* `ethiopic-halehame`: `-moz-ethiopic-halehame`
* `ethiopic-halehame-am`: `-moz-ethiopic-halehame-am`
* `ethiopic-halehame-ti-er`: `-moz-ethiopic-halehame-ti-er`
* `ethiopic-halehame-ti-et`: `-moz-ethiopic-halehame-ti-et`
* `ethiopic-numeric`: `-moz-ethiopic-numeric`
* `hangul`: `-moz-hangul`
* `hangul-consonant`: `-moz-hangul-consonant`
* `urdu`: `-moz-urdu`

See the compatibility table to check which browsers support which extension.

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

Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a `list-style-type` value of `none`. This can be resolved by adding `role="list"` to the list's opening tag. To learn more about this and potential workarounds, see `list-style`.

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

|  |  |
| --- | --- |
| Initial value | `disc` |
| Applies to | list items |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

list-style-type =
  <counter-style>  |
  <string>         |
  none

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<symbols()> =
  symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

<image> =
  <url>       |
  <gradient>

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

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

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

```

Examples
--------

### Setting list item markers

#### HTML

```html
List 1
<ol class="normal">
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

List 2
<ol class="shortcut">
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>
```

#### CSS

```css
ol.normal {
  list-style-type: upper-alpha;
}

/\* or use the shortcut "list-style": \*/
ol.shortcut {
  list-style: upper-alpha;
}
```

#### Result

### All list style types

#### HTML

```html
<ol>
  <li>Apollo</li>
  <li>Hubble</li>
  <li>Chandra</li>
  <li>Cassini-Huygens</li>
  <li>Spitzer</li>
</ol>

<h2>Choose a list style type:</h2>

<div class="container">
  <label for="disc">
    <input type="radio" id="disc" name="type" value="disc" />disc
  </label>

  <label for="circle">
    <input type="radio" id="circle" name="type" value="circle" />circle
  </label>

  <label for="square">
    <input type="radio" id="square" name="type" value="square" />square
  </label>

  <label for="decimal">
    <input type="radio" id="decimal" name="type" value="decimal" />decimal
  </label>

  <label for="cjk-decimal">
    <input
 type="radio"
 id="cjk-decimal"
 name="type"
 value="cjk-decimal" />cjk-decimal
  </label>

  <label for="decimal-leading-zero">
    <input
 type="radio"
 id="decimal-leading-zero"
 name="type"
 value="decimal-leading-zero" />decimal-leading-zero
  </label>

  <label for="lower-roman">
    <input
 type="radio"
 id="lower-roman"
 name="type"
 value="lower-roman" />lower-roman
  </label>

  <label for="upper-roman">
    <input
 type="radio"
 id="upper-roman"
 name="type"
 value="upper-roman" />upper-roman
  </label>

  <label for="lower-greek">
    <input
 type="radio"
 id="lower-greek"
 name="type"
 value="lower-greek" />lower-greek
  </label>

  <label for="lower-alpha">
    <input
 type="radio"
 id="lower-alpha"
 name="type"
 value="lower-alpha" />lower-alpha, lower-latin
  </label>

  <label for="upper-alpha">
    <input
 type="radio"
 id="upper-alpha"
 name="type"
 value="upper-alpha" />upper-alpha, upper-latin
  </label>

  <label for="arabic-indic">
    <input
 type="radio"
 id="arabic-indic"
 name="type"
 value="arabic-indic" />arabic-indic
  </label>

  <label for="armenian">
    <input type="radio" id="armenian" name="type" value="armenian" />armenian
  </label>

  <label for="bengali">
    <input type="radio" id="bengali" name="type" value="bengali" />bengali
  </label>

  <label for="cambodian">
    <input type="radio" id="cambodian" name="type" value="cambodian" />cambodian
  </label>

  <label for="cjk-earthly-branch">
    <input
 type="radio"
 id="cjk-earthly-branch"
 name="type"
 value="cjk-earthly-branch" />cjk-earthly-branch
  </label>

  <label for="cjk-heavenly-stem">
    <input
 type="radio"
 id="cjk-heavenly-stem"
 name="type"
 value="cjk-heavenly-stem" />cjk-heavenly-stem
  </label>

  <label for="cjk-ideographic">
    <input
 type="radio"
 id="cjk-ideographic"
 name="type"
 value="cjk-ideographic" />cjk-ideographic
  </label>

  <label for="devanagari">
    <input
 type="radio"
 id="devanagari"
 name="type"
 value="devanagari" />devanagari
  </label>

  <label for="ethiopic-numeric">
    <input
 type="radio"
 id="ethiopic-numeric"
 name="type"
 value="ethiopic-numeric" />ethiopic-numeric
  </label>

  <label for="georgian">
    <input type="radio" id="georgian" name="type" value="georgian" />georgian
  </label>

  <label for="gujarati">
    <input type="radio" id="gujarati" name="type" value="gujarati" />gujarati
  </label>

  <label for="gurmukhi">
    <input type="radio" id="gurmukhi" name="type" value="gurmukhi" />gurmukhi
  </label>

  <label for="hebrew">
    <input type="radio" id="hebrew" name="type" value="hebrew" />hebrew
  </label>

  <label for="hiragana">
    <input type="radio" id="hiragana" name="type" value="hiragana" />hiragana
  </label>

  <label for="hiragana-iroha">
    <input
 type="radio"
 id="hiragana-iroha"
 name="type"
 value="hiragana-iroha" />hiragana-iroha
  </label>

  <label for="japanese-formal">
    <input
 type="radio"
 id="japanese-formal"
 name="type"
 value="japanese-formal" />japanese-formal
  </label>

  <label for="japanese-informal">
    <input
 type="radio"
 id="japanese-informal"
 name="type"
 value="japanese-informal" />japanese-informal
  </label>

  <label for="kannada">
    <input type="radio" id="kannada" name="type" value="kannada" />kannada
  </label>

  <label for="katakana">
    <input type="radio" id="katakana" name="type" value="katakana" />katakana
  </label>

  <label for="katakana-iroha">
    <input
 type="radio"
 id="katakana-iroha"
 name="type"
 value="katakana-iroha" />katakana-iroha
  </label>

  <label for="khmer">
    <input type="radio" id="khmer" name="type" value="khmer" />khmer
  </label>

  <label for="korean-hangul-formal">
    <input
 type="radio"
 id="korean-hangul-formal"
 name="type"
 value="korean-hangul-formal" />korean-hangul-formal
  </label>

  <label for="korean-hanja-formal">
    <input
 type="radio"
 id="korean-hanja-formal"
 name="type"
 value="korean-hanja-formal" />korean-hanja-formal
  </label>

  <label for="korean-hanja-informal">
    <input
 type="radio"
 id="korean-hanja-informal"
 name="type"
 value="korean-hanja-informal" />korean-hanja-informal
  </label>

  <label for="lao">
    <input type="radio" id="lao" name="type" value="lao" />lao
  </label>

  <label for="lower-armenian">
    <input
 type="radio"
 id="lower-armenian"
 name="type"
 value="lower-armenian" />lower-armenian
  </label>

  <label for="malayalam">
    <input type="radio" id="malayalam" name="type" value="malayalam" />malayalam
  </label>

  <label for="mongolian">
    <input type="radio" id="mongolian" name="type" value="mongolian" />mongolian
  </label>

  <label for="myanmar">
    <input type="radio" id="myanmar" name="type" value="myanmar" />myanmar
  </label>

  <label for="oriya">
    <input type="radio" id="oriya" name="type" value="oriya" />oriya
  </label>

  <label for="persian">
    <input type="radio" id="persian" name="type" value="persian" />persian
  </label>

  <label for="simp-chinese-formal">
    <input
 type="radio"
 id="simp-chinese-formal"
 name="type"
 value="simp-chinese-formal" />simp-chinese-formal
  </label>

  <label for="simp-chinese-informal">
    <input
 type="radio"
 id="simp-chinese-informal"
 name="type"
 value="simp-chinese-informal" />simp-chinese-informal
  </label>

  <label for="tamil">
    <input type="radio" id="tamil" name="type" value="tamil" />tamil
  </label>

  <label for="telugu">
    <input type="radio" id="telugu" name="type" value="telugu" />telugu
  </label>

  <label for="thai">
    <input type="radio" id="thai" name="type" value="thai" />thai
  </label>

  <label for="tibetan">
    <input type="radio" id="tibetan" name="type" value="tibetan" />tibetan
  </label>

  <label for="trad-chinese-formal">
    <input
 type="radio"
 id="trad-chinese-formal"
 name="type"
 value="trad-chinese-formal" />trad-chinese-formal
  </label>

  <label for="trad-chinese-informal">
    <input
 type="radio"
 id="trad-chinese-informal"
 name="type"
 value="trad-chinese-informal" />trad-chinese-informal
  </label>

  <label for="upper-armenian">
    <input
 type="radio"
 id="upper-armenian"
 name="type"
 value="upper-armenian" />upper-armenian
  </label>

  <label for="disclosure-open">
    <input
 type="radio"
 id="disclosure-open"
 name="type"
 value="disclosure-open" />disclosure-open
  </label>

  <label for="disclosure-closed">
    <input
 type="radio"
 id="disclosure-closed"
 name="type"
 value="disclosure-closed" />disclosure-closed
  </label>

  <label for="-moz-ethiopic-halehame">
    <input
 type="radio"
 id="-moz-ethiopic-halehame"
 name="type"
 value="-moz-ethiopic-halehame" />-moz-ethiopic-halehame
  </label>

  <label for="-moz-ethiopic-halehame-am">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-am"
 name="type"
 value="-moz-ethiopic-halehame-am" />-moz-ethiopic-halehame-am
  </label>

  <label for="ethiopic-halehame-ti-er">
    <input
 type="radio"
 id="ethiopic-halehame-ti-er"
 name="type"
 value="ethiopic-halehame-ti-er" />ethiopic-halehame-ti-er
  </label>

  <label for="ethiopic-halehame-ti-et">
    <input
 type="radio"
 id="ethiopic-halehame-ti-et"
 name="type"
 value="ethiopic-halehame-ti-et" />ethiopic-halehame-ti-et
  </label>

  <label for="hangul">
    <input type="radio" id="hangul" name="type" value="hangul" />hangul
  </label>

  <label for="hangul-consonant">
    <input
 type="radio"
 id="hangul-consonant"
 name="type"
 value="hangul-consonant" />hangul-consonant
  </label>

  <label for="urdu">
    <input type="radio" id="urdu" name="type" value="urdu" />urdu
  </label>

  <label for="-moz-ethiopic-halehame-ti-er">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-ti-er"
 name="type"
 value="-moz-ethiopic-halehame-ti-er" />-moz-ethiopic-halehame-ti-er
  </label>

  <label for="-moz-ethiopic-halehame-ti-et">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-ti-et"
 name="type"
 value="-moz-ethiopic-halehame-ti-et" />-moz-ethiopic-halehame-ti-et
  </label>

  <label for="-moz-hangul">
    <input
 type="radio"
 id="-moz-hangul"
 name="type"
 value="-moz-hangul" />-moz-hangul
  </label>

  <label for="-moz-hangul-consonant">
    <input
 type="radio"
 id="-moz-hangul-consonant"
 name="type"
 value="-moz-hangul-consonant" />-moz-hangul-consonant
  </label>

  <label for="-moz-urdu">
    <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu" />-moz-urdu
  </label>
</div>
```

#### CSS

```css
ol {
  font-size: 1.2rem;
}

.container {
  column-count: 3;
}

label {
  display: block;
}

input {
  margin: 0.4rem;
}
```

#### JavaScript

```js
const container = document.querySelector(".container");
container.addEventListener("change", (event) => {
  const list = document.querySelector("ol");
  list.setAttribute("style", `list-style-type: ${event.target.value}`);
});
```

#### Result

We're not limited to the list style types defined on this page or the specification. The `@counter-style` at-rule enables creating counters using any alphabet.

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # text-markers |
| CSS Counter Styles Level 3 # extending-css2 |

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

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

See also
--------

* `list-style` shorthand property
* `list-style-image` property
* `list-style-position` property
* `::marker` pseudo-element
* CSS lists and counters module
* CSS counter styles module


border-block-width - CSS: Cascading Style Sheets

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

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

Try it
------

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

Syntax
------

```css
/\* <'border-width'> values \*/
border-block-width: 5px;
border-block-width: thick;

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

### Values

`<'border-width'>`

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

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

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

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

```

Examples
--------

### Border width 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-lr;
  border: 1px solid blue;
  border-block-width: 5px;
}
```

#### Results

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

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

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


mask-border-slice - CSS: Cascading Style Sheets

mask-border-slice
=================

The **`mask-border-slice`** CSS property divides the image set by `mask-border-source` into regions. These regions are used to form the components of an element's mask border.

Syntax
------

```css
/\* All sides \*/
mask-border-slice: 30%;

/\* top and bottom | left and right \*/
mask-border-slice: 10% 30%;

/\* top | left and right | bottom \*/
mask-border-slice: 30 30% 45;

/\* top | right | bottom | left \*/
mask-border-slice: 7 12 14 5;

/\* Using the `fill` keyword \*/
mask-border-slice: 10% fill 7 12;

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

The `mask-border-slice` property may be specified using one to four `<number-percentage>` values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to `100%`.

* When **one** position is specified, it creates all four slices at the same distance from their respective sides.
* When **two** positions are specified, the first value creates slices measured from the **top and bottom**, the second creates slices measured from the **left and right**.
* When **three** positions are specified, the first value creates a slice measured from the **top**, the second creates slices measured from the **left and right**, the third creates a slice measured from the **bottom**.
* When **four** positions are specified, they create slices measured from the **top**, **right**, **bottom**, and **left** in that order (clockwise).

The optional `fill` value, if used, can be placed anywhere in the declaration.

### Values

`<number>`

Represents an edge offset in *pixels* for raster images and *coordinates* for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.

`<percentage>`

Represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets.

`fill`

Preserves the middle image region. Its width and height are sized to match the top and left image regions, respectively.

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

The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

![The nine regions defined by the border-image or border-image-slice properties](/en-US/docs/Web/CSS/mask-border-slice/border-image-slice.png)

The above diagram illustrates the location of each region.

* Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.
* Zones 5-8 are edge regions. These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
* Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword `fill` is set.

The `mask-border-repeat`, `mask-border-width`, and `mask-border-outset` properties determine how these regions are used to form the final mask border.

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

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

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

mask-border-slice =
  [ <number> | <percentage> ]{1,4} fill?

```

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 size of the slices taken from the source image, and used to create the border mask.

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

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

```css
-webkit-mask-box-image-slice: 30 fill;
```

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

**Note:** The fill keyword needs to be included if you want the element's content to be visible.

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

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

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`
* `mask-border-width`
* Illustrated description of the 1-to-4-value syntax


scrollbar-gutter - CSS: Cascading Style Sheets

scrollbar-gutter
================

The **`scrollbar-gutter`** CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

An element's *scrollbar gutter* is the space between the inner border edge and the outer padding edge, where the browser may display a scrollbar. If no scrollbar is present, the gutter will be painted as an extension of the padding.

The browser determines whether *classic* scrollbars or *overlay* scrollbars are used:

* Classic scrollbars are always placed in a gutter, consuming space when present.
* Overlay scrollbars are placed over the content, not in a gutter, and are usually partially transparent.
Syntax
------

```css
/\* Initial value \*/
scrollbar-gutter: auto;

/\* "stable" keyword, with optional modifier \*/
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;

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

### Values

`auto`

The initial value. Classic scrollbars create a gutter when `overflow` is `scroll`, or when `overflow` is `auto` and the box is overflowing. Overlay scrollbars do not consume space.

`stable`

When using classic scrollbars, the gutter will be present if `overflow` is `auto`, `scroll`, or `hidden` even if the box is not overflowing. When using overlay scrollbars, the gutter will not be present.

`both-edges`

If a gutter would be present on one of the inline start/end edges of the box, another will be present on the opposite edge as well.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scrolling boxes |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

scrollbar-gutter =
  auto                   |
  stable && both-edges?

```

Examples
--------

The examples below show how the different values for the `scrollbar-gutter` property would affect a scrollable `div` element (`.container`) with one or more paragraphs contained within.

**Note:** In the images for the examples, the user's system settings are set to classic scrollbars (always shown).

### Example 1

Prevent unneeded layout changes as the content growing or shrinking causes the scrollbar to appear/disappear, a space is reserved for it.

```css
.container {
  scrollbar-gutter: stable;
}
```

![A containing div element with a paragraph of text inside and a space to the right where the scrollbar is](/en-US/docs/Web/CSS/scrollbar-gutter/stable-no-scroll.png)

### Example 2

Add symmetric spacing to both sides of the box so the content is centered:

```css
.container {
  scrollbar-gutter: stable both-edges;
}
```

![A containing div element with a paragraph of text inside, a space to the right where the scrollbar is and a matching empty space to the left](/en-US/docs/Web/CSS/scrollbar-gutter/stable-both-edges.png)

### Example 3

 Align the contents of a non-scrolling element and a scrolling one adjacent to it:
 This example shows two divs side by side. The one on the left has no scroll, but the one on the right does. Both have `scrollbar-gutter` applied, which also reserves space for the div on the left which doesn't have scrollable content. This is a good technique to use to keep the width of content consistent.

```css
.container1 {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.container2 {
  scrollbar-gutter: stable;
}
```

![Two adjacent divs containing text, both with space for a scrollbar](/en-US/docs/Web/CSS/scrollbar-gutter/side-by-side.png)

### Overlay scrollbars

For reference, this image shows the same div as above, but with the user's system settings set to overlay scrollbars. Note here the scrollbar will only show when the user is scrolling and on top of the content, so no space is reserved for it and the `scrollbar-gutter` property has no effect.

![One div with text, no visible scrollbar](/en-US/docs/Web/CSS/scrollbar-gutter/for-ref-no-scroll.png)

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # scrollbar-gutter-property |

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

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

See also
--------

* CSS overflow module
* CSS scrollbars styling module
* `overflow`
* `scrollbar-width`
* `scrollbar-color`


Mozilla vendor-prefixed CSS extensions - CSS: Cascading Style Sheets

Mozilla vendor-prefixed CSS extensions
======================================

Firefox supports a number of *Mozilla extensions to CSS*, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. These extensions are prefixed with `-moz-`.

**Note:** These extensions are mostly experimental or deprecated but kept for backward compatibility. Avoid using them on production websites.

Mozilla-only properties
-----------------------

* `-moz-box-align`
Deprecated
* `-moz-box-direction`
Deprecated
* `-moz-box-flex`
Deprecated
* `-moz-box-ordinal-group`
Deprecated
* `-moz-box-orient`
Deprecated
* `-moz-box-pack`
Deprecated
* `-moz-float-edge`
Deprecated
* `-moz-force-broken-image-icon`
Deprecated
* `-moz-image-region`
Deprecated
* `-moz-orient`
Non-standard
* `-moz-osx-font-smoothing`
Non-standard
* `-moz-user-focus`
Non-standard
* `-moz-user-input`
Non-standard
* `-moz-user-modify`
Non-standard
Formerly proprietary properties that are now standard
-----------------------------------------------------

**Note:** To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below. Once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while.

### A

* `-moz-animation`
Deprecated
 (Prefixed version still supported)
* `-moz-animation-delay`
Deprecated
 (Prefixed version still supported)
* `-moz-animation-direction`
Deprecated
 (Prefixed version still supported)
* `-moz-animation-duration`
Deprecated
 (Prefixed version still supported)
* `-moz-animation-fill-mode`
Deprecated
 (Prefixed version still supported)
* `-moz-animation-iteration-count`
Deprecated
 (Prefixed version still supported)
* `-moz-animation-name`
Deprecated
 (Prefixed version still supported)
* `-moz-animation-play-state`
Deprecated
 (Prefixed version still supported)
* `-moz-animation-timing-function`
Deprecated
 (Prefixed version still supported)
* `-moz-appearance`
Experimental
### B

* `-moz-backface-visibility`
Deprecated
 (Prefixed version still supported)
* `-moz-background-clip`
Deprecated
* `-moz-background-origin`
Deprecated
* `-moz-background-inline-policy`
Deprecated
 (No longer supported; use the standard `box-decoration-break`)
* `-moz-background-size`
Deprecated
* `-moz-border-end`
Deprecated
 (No longer supported; use the standard `border-inline-end`)
* `-moz-border-end-color`
Deprecated
 (No longer supported; use the standard `border-inline-end-color`)
* `-moz-border-end-style`
Deprecated
 (No longer supported; use the standard `border-inline-end-style`)
* `-moz-border-end-width`
Deprecated
 (No longer supported; use the standard `border-inline-end-width`)
* `-moz-border-image`
Deprecated
* `-moz-border-start`
Deprecated
 (No longer supported; use the standard `border-inline-start`)
* `-moz-border-start-color`
Deprecated
 (No longer supported; use the standard `border-inline-start-color`)
* `-moz-border-start-style`
Deprecated
 (No longer supported; use the standard `border-inline-start-style`)
* `-moz-border-start-width`
Deprecated
 (No longer supported; use the standard `border-inline-start-width`)
* `-moz-box-sizing`
Deprecated
 (Prefixed version still supported)
### C

* `clip-path`
Experimental
 (Applying to more than SVG)
* `-moz-column-count`
Deprecated
 (Prefixed version still supported)
* `-moz-column-fill`
Deprecated
 (Prefixed version still supported)
* `-moz-column-gap`
Deprecated
 (Prefixed version still supported)
* `-moz-column-width`
Deprecated
 (Prefixed version still supported)
* `-moz-column-rule`
Deprecated
 (Prefixed version still supported)
* `-moz-column-rule-width`
Deprecated
 (Prefixed version still supported)
* `-moz-column-rule-style`
Deprecated
 (Prefixed version still supported)
* `-moz-column-rule-color`
Deprecated
 (Prefixed version still supported)
### F–M

* `filter`
Experimental
 (Applying to more than SVG)
* `-moz-font-feature-settings`
Deprecated
 (Prefixed version still supported)
* `-moz-font-language-override`
Deprecated
 (Prefixed version still supported)
* `-moz-hyphens`
Deprecated
 (Prefixed version still supported)
* `-moz-margin-end`
Deprecated
 (No longer supported; use the standard `margin-inline-end`)
* `-moz-margin-start`
Deprecated
 (No longer supported; use the standard `margin-inline-start`)
* `mask`
Experimental
 (Applying to more than SVG)
### O

* `-moz-opacity`
Deprecated
* `-moz-outline`
Deprecated
* `-moz-outline-color`
Deprecated
* `-moz-outline-offset`
Deprecated
* `-moz-outline-style`
Deprecated
* `-moz-outline-width`
Deprecated
### P

* `-moz-padding-end`
Deprecated
 (No longer supported; use the standard `padding-inline-end`)
* `-moz-padding-start`
Deprecated
 (No longer supported; use the standard `padding-inline-start`)
* `-moz-perspective`
Deprecated
 (Prefixed version still supported)
* `-moz-perspective-origin`
Deprecated
 (Prefixed version still supported)
* `pointer-events`
Experimental
 (Applying to more than SVG)
### T–U

* `-moz-tab-size`
Experimental
* `-moz-text-align-last`
Deprecated
* `-moz-text-decoration-color`
Deprecated
* `-moz-text-decoration-line`
Deprecated
* `-moz-text-decoration-style`
Deprecated
* `-moz-text-size-adjust`
Experimental
* `-moz-transform`
Deprecated
 (Prefixed version still supported)
* `-moz-transform-origin`
Deprecated
 (Prefixed version still supported)
* `-moz-transform-style`
Deprecated
 (Prefixed version still supported)
* `-moz-transition`
Deprecated
 (Prefixed version still supported)
* `-moz-transition-delay`
Deprecated
 (Prefixed version still supported)
* `-moz-transition-duration`
Deprecated
 (Prefixed version still supported)
* `-moz-transition-property`
Deprecated
 (Prefixed version still supported)
* `-moz-transition-timing-function`
Deprecated
 (Prefixed version still supported)
* `-moz-user-select`
Experimental
Values
------

### Global values

* `-moz-initial`
### -moz-appearance

Property: `-moz-appearance`

* `button`
* `button-arrow-down`
* `button-arrow-next`
* `button-arrow-previous`
* `button-arrow-up`
* `button-bevel`
* `checkbox`
* `checkbox-container`
* `checkbox-label`
* `checkmenuitem`
* `dialog`
* `groupbox`
* `listbox`
* `menuarrow`
* `menucheckbox`
* `menuimage`
* `menuitem`
* `menuitemtext`
* `menulist`
* `menulist-button`
* `menulist-text`
* `menulist-textfield`
* `menupopup`
* `menuradio`
* `menuseparator`
* `-moz-mac-unified-toolbar`
* `-moz-win-borderless-glass`
* `-moz-win-browsertabbar-toolbox`
* `-moz-win-communications-toolbox`
* `-moz-win-glass`
* `-moz-win-media-toolbox`
* `-moz-window-button-box`
* `-moz-window-button-box-maximized`
* `-moz-window-button-close`
* `-moz-window-button-maximize`
* `-moz-window-button-minimize`
* `-moz-window-button-restore`
* `-moz-window-titlebar`
* `-moz-window-titlebar-maximized`
* `progressbar`
* `progresschunk`
* `radio`
* `radio-container`
* `radio-label`
* `radiomenuitem`
* `resizer`
* `resizerpanel`
* `scale-horizontal`
* `scalethumb-horizontal`
* `scalethumb-vertical`
* `scale-vertical`
* `scrollbarbutton-down`
* `scrollbarbutton-left`
* `scrollbarbutton-right`
* `scrollbarbutton-up`
* `scrollbar-small`
* `scrollbarthumb-horizontal`
* `scrollbarthumb-vertical`
* `scrollbartrack-horizontal`
* `scrollbartrack-vertical`
* `separator`
* `spinner`
* `spinner-downbutton`
* `spinner-textfield`
* `spinner-upbutton`
* `statusbar`
* `statusbarpanel`
* `tab`
* `tabpanels`
* `tab-scroll-arrow-back`
* `tab-scroll-arrow-forward`
* `textfield`
* `textfield-multiline`
* `toolbar`
* `toolbarbutton-dropdown`
* `toolbox`
* `tooltip`
* `treeheadercell`
* `treeheadersortarrow`
* `treeitem`
* `treetwisty`
* `treetwistyopen`
* `treeview`
* `window`
### background-image

Property: `background-image`

#### Gradients

* `-moz-linear-gradient`
Deprecated
* `-moz-radial-gradient`
Deprecated

#### Elements

* `-moz-element`

#### Sub-images

* `-moz-image-rect()`
### border-color

Property: `border-color`

* `-moz-use-text-color`
Deprecated
 (removed in Firefox bug 1306214); use `currentcolor` instead.
### order-style and outline-style

Properties: `border-style` and `outline-style`

* `-moz-bg-inset`
Deprecated
* `-moz-bg-outset`
Deprecated
* `-moz-bg-solid`
Deprecated
### <color> keywords

Type: `<color>`

* `-moz-activehyperlinktext`
* `-moz-hyperlinktext`
* `-moz-visitedhyperlinktext`
* `-moz-buttondefault`
* `-moz-buttonhoverface`
* `-moz-buttonhovertext`
* `-moz-default-background-color`
* `-moz-default-color`
* `-moz-cellhighlight`
* `-moz-cellhighlighttext`
* `-moz-field`
* `-moz-fieldtext`
* `-moz-dialog`
* `-moz-dialogtext`
* `-moz-dragtargetzone`
* `-moz-mac-accentdarkestshadow`
* `-moz-mac-accentdarkshadow`
* `-moz-mac-accentface`
* `-moz-mac-accentlightesthighlight`
* `-moz-mac-accentlightshadow`
* `-moz-mac-accentregularhighlight`
* `-moz-mac-accentregularshadow`
* `-moz-mac-chrome-active`
* `-moz-mac-chrome-inactive`
* `-moz-mac-focusring`
* `-moz-mac-menuselect`
* `-moz-mac-menushadow`
* `-moz-mac-menutextselect`
* `-moz-menuhover`
* `-moz-menuhovertext`
* `-moz-win-communicationstext`
* `-moz-win-mediatext`
* `-moz-nativehyperlinktext`
### display

Property: `display`

* `-moz-box`
Deprecated
* `-moz-inline-block`
Deprecated
* `-moz-inline-box`
Deprecated
* `-moz-inline-grid`
Deprecated
* `-moz-inline-stack`
Deprecated
* `-moz-inline-table`
Deprecated
* `-moz-grid`
Deprecated
* `-moz-grid-group`
Deprecated
* `-moz-grid-line`
Deprecated
* `-moz-groupbox`
Deprecated
* `-moz-deck`
Deprecated
* `-moz-popup`
Deprecated
* `-moz-stack`
Deprecated
* `-moz-marker`
Deprecated
### empty-cells

Property: `empty-cells`

* `-moz-show-background` (default value in quirks mode)
### font

Property: `font`

* `-moz-button`
* `-moz-info`
* `-moz-desktop`
* `-moz-dialog` (also a color)
* `-moz-document`
* `-moz-workspace`
* `-moz-window`
* `-moz-list`
* `-moz-pull-down-menu`
* `-moz-field` (also a color)
### font-family

Property: `font-family`

* `-moz-fixed`
### image-rendering

Property: `image-rendering`

* `-moz-crisp-edges`
### <length>

Type: `<length>`

* `-moz-calc`
### list-style-type

Property: `list-style-type`

* `-moz-arabic-indic`
* `-moz-bengali`
* `-moz-cjk-earthly-branch`
* `-moz-cjk-heavenly-stem`
* `-moz-devanagari`
* `-moz-ethiopic-halehame`
* `-moz-ethiopic-halehame-am`
* `-moz-ethiopic-halehame-ti-er`
* `-moz-ethiopic-halehame-ti-et`
* `-moz-ethiopic-numeric`
* `-moz-gujarati`
* `-moz-gurmukhi`
* `-moz-hangul`
* `-moz-hangul-consonant`
* `-moz-japanese-formal`
* `-moz-japanese-informal`
* `-moz-kannada`
* `-moz-khmer`
* `-moz-lao`
* `-moz-malayalam`
* `-moz-myanmar`
* `-moz-oriya`
* `-moz-persian`
* `-moz-simp-chinese-formal`
* `-moz-simp-chinese-informal`
* `-moz-tamil`
* `-moz-telugu`
* `-moz-thai`
* `-moz-trad-chinese-formal`
* `-moz-trad-chinese-informal`
* `-moz-urdu`
### text-align

Property: `text-align`

* `-moz-center`
* `-moz-left`
* `-moz-right`
### text-decoration

Property: `text-decoration`

* `-moz-anchor-decoration`
### -moz-user-select

Property: `-moz-user-select`

* `-moz-all`
* `-moz-none`
### width, min-width, and max-width

Properties: `width`, `min-width`, and `max-width`

* `-moz-min-content`
* `-moz-fit-content`
* `-moz-max-content`
* `-moz-available`
Pseudo-elements and pseudo-classes
----------------------------------

### A – D

* `::-moz-anonymous-block`
* `::-moz-anonymous-positioned-block`
* `:-moz-any`
* `:-moz-any-link` [Matches `:link` and `:visited`]
* `:-moz-broken`
* `::-moz-canvas`
* `::-moz-color-swatch`
* `::-moz-cell-content`
* `:-moz-drag-over`
### F – I

* `:-moz-first-node`
* `::-moz-focus-inner`
* `::-moz-focus-outer`
* `:-moz-full-screen`
* `:-moz-full-screen-ancestor`
* `:-moz-handler-blocked`
* `:-moz-handler-crashed`
* `:-moz-handler-disabled`
* `::-moz-inline-table`
### L

* `:-moz-last-node`
* `::-moz-list-bullet`
* `::-moz-list-number`
* `:-moz-loading`
* `:-moz-locale-dir(ltr)`
* `:-moz-locale-dir(rtl)`
* `:-moz-lwtheme`
* `:-moz-lwtheme-brighttext`
* `:-moz-lwtheme-darktext`
### N – R

* `:-moz-native-anonymous`
* `:-moz-only-whitespace`
* `::-moz-page`
* `::-moz-page-sequence`
* `::-moz-pagebreak`
* `::-moz-pagecontent`
* `:-moz-placeholder`
Deprecated
* `::-moz-placeholder`
Deprecated
* `::-moz-progress-bar`
* `::-moz-range-progress`
* `::-moz-range-thumb`
* `::-moz-range-track`
* `:-moz-read-only`
* `:-moz-read-write`
### S

* `::-moz-scrolled-canvas`
* `::-moz-scrolled-content`
* `::-moz-scrolled-page-sequence`
* `::-moz-selection`
Deprecated
* `:-moz-submit-invalid`
* `:-moz-suppressed`
* `::-moz-svg-foreign-content`
### T

* `::-moz-table`
* `::-moz-table-cell`
* `::-moz-table-column`
* `::-moz-table-column-group`
* `::-moz-table-outer`
* `::-moz-table-row`
* `::-moz-table-row-group`
### U – X

* `:-moz-ui-invalid`
Deprecated
* `:-moz-ui-valid`
Deprecated
* `:-moz-user-disabled`
* `::-moz-viewport`
* `::-moz-viewport-scroll`
* `:-moz-window-inactive`
At-rules
--------

* `@-moz-document`
Media features
--------------

* `-moz-device-pixel-ratio`
Deprecated
* `-moz-os-version`
* `-moz-touch-enabled`
* `-moz-windows-glass`
Other
-----

* `-moz-alt-content` (see Firefox bug 11011)
See also
--------

* Vendor Prefix glossary entry
* WebKit vendor-prefixed CSS extensions


<dashed-ident> - CSS: Cascading Style Sheets

<dashed-ident>
==============

The **`<dashed-ident>`** CSS data type denotes an arbitrary string used as an identifier.

Syntax
------

The syntax of `<dashed-ident>` is similar to CSS identifiers (such as property names), except that it is case-sensitive. It starts with two dashes, followed by the user-defined identifier.

The double dash at the beginning makes them easily identifiable when reading through a CSS code block, and helps to avoid name clashes with standard CSS keywords.

Just like `<custom-ident>` `<dashed-ident>`s are defined by the user, but unlike `<custom-ident>` CSS will never define a `<dashed-ident>`.

Examples
--------

### Using with CSS custom properties

When `<dashed-ident>` is used with CSS custom properties, the property is declared first and then used within a CSS var() function.

```css
html {
  --primary-color: red;
  --secondary-color: blue;
  --tertiary-color: green;
}

h1,
h4 {
  color: var(--primary-color);
}

h2,
h5 {
  color: var(--secondary-color);
}

h3,
h6 {
  color: var(--tertiary-color);
}
```

### Using with @color-profile

When `<dashed-ident>` is used with the @color-profile at-rule, the at-rule is declared first and then used within a CSS color() function.

```css
@color-profile --my-color-profile {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}

.header {
  background-color: color(--my-color-profile 0% 70% 20% 0%);
}
```

### Using with @font-palette-values

When `<dashed-ident>` is used with the @font-palette-values at-rule, the at-rule is declared first and then used as the value for the font-palette property.

```css
@font-palette-values --my-palette {
  font-family: Bixa;
  base-palette: 1;
  override-colors: 0 #ff0000;
}

h1,
h2,
h3,
h4 {
  font-palette: --my-palette;
}
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # dashed-idents |

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

*As this type is not a real type but a convenience type used to simplify the definition of other CSS syntax, there is no browser compatibility information as such.*

See also
--------

* <ident>
* <custom-ident>