CSS backgrounds and borders - CSS: Cascading Style Sheets

CSS backgrounds and borders
===========================

The **CSS backgrounds and borders** module provides properties for adding borders, rounded corners, and box shadows to elements.

You can add different types of border styles, including borders made of images of any image type, from raster images to CSS gradients. Borders can be square or rounded, and a different radius can be set for each corner. Elements can be rounded whether or not they have a visible border.

Box shadows include inset and outset shadow, single or multiple shadows, and solid or allowed to fade to transparent. An outer box-shadow casts a shadow as if the border-box of the element were opaque. An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The shadow can be solid or include a spread distance with the shadow color transitioning to transparent.

The properties in this module also let you define whether cells inside a `<table>` should have shared or separate borders.

### Backgrounds, borders, and box shadows in action

This sample of borders, backgrounds, and box shadows consists of centered background images made of linear and radial gradients. A series of box shadows make the border appear to "pop". The element on the left has a border image set. The element on the right has a rounded dotted border.

The background images are defined with `background-image`. The images are centered with `background-position`. Different values of the `background-clip` property for the multiple background images are used to make the background images stay within the content box. The background color gets clipped to the padding box preventing the background from appearing through the transparent sections for the `border-image` and the `dotted` `border`. The rounded corners in the element on the right are created using the `border-radius` property. A single `box-shadow` declaration is used to set all the shadows, both inset and outset.

To see the code for this sample, view the source on GitHub.

Reference
---------

### Properties

* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `background` shorthand
* `background-position-x`
Experimental
* `background-position-y`
Experimental
* `background-position-inline`
Experimental
* `background-position-block`
Experimental
* `border-bottom-color`
* `border-bottom-style`
* `border-bottom-width`
* `border-bottom` shorthand
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-left` shorthand
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-right` shorthand
* `border-top-color`
* `border-top-style`
* `border-top-width`
* `border-top` shorthand
* `border-color` shorthand
* `border-style` shorthand
* `border-width` shorthand
* `border` shorthand
* `border-collapse`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-radius` shorthand
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-image` shorthand
* `box-shadow`
### Data types

* `<line-style>` enumerated type
Guides
------

Learn CSS: background and borders

Explains how to implement decorative images using CSS background images.

Using multiple backgrounds

Explains how to set one or more backgrounds on an element.

Resizing background images

Describes how to change the size and repeating behavior of background images.

Learn CSS: the box model

Explains how borders, along with other box model properties, impact the CSS box model.

Using CSS gradients

Explains how to create CSS gradient background images.

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

* `border-block-end-color` property
* `border-block-start-color` property
* `border-inline-end-color` property
* `border-inline-start-color` property
* `border-block-end-style` property
* `border-block-start-style` property
* `border-inline-end-style` property
* `border-inline-start-style` property
* `border-block-end-width` property
* `border-block-start-width` property
* `border-inline-end-width` property
* `border-inline-start-width` property
* `border-start-start-radius` property
* `border-start-end-radius` property
* `border-end-start-radius` property
* `border-end-end-radius`  property
* `box-sizing` property
* `box-decoration-break` property
* `text-shadow` property
* `url()` CSS function
* `<color>` data type
* `<image>` data type
* `<position>` data type
* `currentcolor` keyword
Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3  |

See also
--------

* Interactive tools that let you visually create borders images, rounded corners, and box shadows:
    + Border-image generator
    + Border-radius generator
    + Box-shadow generator
* Applying color to HTML elements using CSS, including for borders.
* The `drop-shadow()` filter function that applies a drop shadow effect to the input image. The function is used by the `filter` and `backdrop-filter` properties.


page-break-inside - CSS: Cascading Style Sheets

page-break-inside
=================

**Warning:** This property has been replaced by the `break-inside` property.

The **`page-break-inside`** CSS property adjusts page breaks *inside* the current element.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
page-break-inside: auto;
page-break-inside: avoid;

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

### Values

`auto`

Initial value. Automatic page breaks (neither forced nor forbidden).

`avoid`

Avoid page breaks inside the element.

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

The `page-break-inside` property is now a legacy property, replaced by `break-inside`.

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

| page-break-inside | break-inside |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

page-break-inside =
  avoid    |
  auto     |
  inherit

```

Examples
--------

### Avoiding page breaks inside elements

#### HTML

```html
<div class="page">
  <p>This is the first paragraph.</p>
  <section class="list">
    <span>A list</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph, it contains more text.</p>
  <p>
    This is the fourth paragraph. It has a little bit more text than the third
    one.
  </p>
</div>
```

#### CSS

```css
.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}
```

#### Result

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # page-break-inside |

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

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

See also
--------

* `break-before`, `break-after`, `break-inside`
* `page-break-after`, `page-break-before`
* `orphans`, `widows`


:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets

:-moz-locale-dir(ltr)
=====================

**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-locale-dir(ltr)`** CSS pseudo-class is a Mozilla extension that matches an element if the user interface is being displayed left-to-right. This is determined by the preference `intl.uidirection.locale` (where `locale` is the current locale) being set to "ltr".

**Note:** This selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (This can vary from window to window, and even from tab to tab.) It also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics.

**Warning:** This selector does not work properly from HTML; it always matches, regardless of whether the UI locale is left-to-right or right-to-left.

Syntax
------

```css
:-moz-locale-dir(ltr) {
  /\* ... \*/
}
```

Examples
--------

This example doesn't work if you're not using Firefox, and may not work even in Firefox due to an issue with the selector not working properly with HTML content. It was designed for use with `XUL`.

### HTML

```html
<p>If you're using a left-to-right interface, this should be red.</p>
```

### CSS

```css
p:-moz-locale-dir(ltr) {
  color: red;
}
```

### Result

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

Not part of any standard.

See also
--------

* `:dir(…)`
* `:-moz-locale-dir(rtl)`


<box-edge> - CSS: Cascading Style Sheets

<box-edge>
==========

The **`<box-edge>`** value types represent a box edge keyword, such as `content-box` and `border-box`. The box-edge keywords are used to define different aspects of an element's box model and how elements are positioned and rendered on screen.

The box-edge keywords are the components of, but not limited to, the data types `<visual-box>`, `<layout-box>`, `<paint-box>`, `<coord-box>`, and `<geometry-box>`. These types are applied to properties such as `transform-box` and `background-clip`.

Syntax
------
```

<visual-box> = content-box | padding-box | border-box /* the three <box> values */
<layout-box> = <box> | margin-box /* the <shape-box> values */
<paint-box> = <box> | fill-box | stroke-box
<coord-box> = <box> | fill-box | stroke-box | view-box
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
```

### Values

A `<box-edge>` can be of the type `<visual-box>`, `<layout-box>`, `<paint-box>`, `<coord-box>`, or `<geometry-box>`.

`<visual-box>`

Refers to the rectangular box generated for an element as seen by a user on a web page. It includes the element's content, padding, and border. Also referred to as `<box>`, this value excludes the margin area. This value type is used for the `background-clip` and `overflow-clip-margin` properties.

`<layout-box>`

Refers to the space occupied by an element, including its content, padding, border, and margin. This value type is used for layout and positioning purposes. Also referred to as `<shape-box>`, this value type is used for the `shape-outside` property.

`<paint-box>`

Refers to the area within the layout box that is used to visually render the content. This includes the area where the element's background and borders are painted. As an element's paintable area does not include its margins, this value excludes `margin-box`.

`<coord-box>`

Refers to the coordinate box used for positioning and sizing an element within its parent container. It is used to control how content flows around the edges of the box. It excludes the margin area. This value type is used for the `offset-path` property.

`<geometry-box>`

Defines the reference box for a basic shape, or if specified by itself, causes the edges of the specified box, including any corner shaping (such as a `border-radius`), to be the clipping path. This value type is used for the `clip-path`, `mask-clip`, and `mask-origin` properties and the SVG `clip-path` attribute.

### Keywords

The `<box-edge>` keywords are defined as follows:

`content-box`

Refers to the outer edge of the box's content area. . The content box is the innermost box. The content area contains the actual content, such as text, images, or other HTML elements. In SVG, this value is treated as `fill-box`.

`padding-box`

Refers to the outer edge of the padding of the box. If there is no padding on a side, then the value is the same as `content-box`. In SVG, `padding-box` is treated as `fill-box`. The padding area surrounds the content area, starting at the outer edge of the content box.

`border-box`

Refers to the outer edge of the border of the box. If there is no border on a side, then the value is the same as `padding-box`. In SVG, `border-box` is treated as `stroke-box`. The border area surrounds the padding area, starting at the outer edge of the padding box.

`margin-box`

Refers to the outer edge of the margin of the box. If there is no margin on a side, then the value is the same as `border-box`. In SVG, `margin-box` is treated as `stroke-box`.

`fill-box`

Refers to the object bounding box in SVG. In CSS, `fill-box` is treated as `content-box`. It is used to wrap the content around the edges defined by the `coord-box` values.

`stroke-box`

Refers to the stroke bounding box in SVG. In CSS, `stroke-box` is treated as `border-box`. It is used to define the shape of the element when strokes are applied.

`view-box`

Refers to the nearest SVG viewport element's origin box. The origin box is a rectangle with the width and height of the initial SVG user coordinate system established by the `viewBox` attribute for that element. The origin box is positioned such that its top left corner is anchored at the coordinate system origin. In CSS, `view-box` is treated as `border-box`.

**Note:** When the SVG viewport is not anchored at the origin, the origin box does not correspond to the SVG viewport.

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

| Specification |
| --- |
| CSS Box Model Module Level 4 # keywords |

See also
--------

* CSS box model module


offset-distance - CSS: Cascading Style Sheets

offset-distance
===============

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

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

* Learn more
* See full compatibility
* Report feedback
The **`offset-distance`** CSS property specifies a position along an `offset-path` for an element to be placed.

Try it
------

Syntax
------

```css
/\* Default value \*/
offset-distance: 0;

/\* the middle of the offset-path \*/
offset-distance: 50%;

/\* a fixed length positioned along the path \*/
offset-distance: 40px;

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

``<length-percentage>``

A length that specifies how far the element is along the path (defined with `offset-path`).

100% represents the total length of the path (when the `offset-path` is defined as a basic shape or `path()`).

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | refer to the total path length |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | a length, percentage or calc(); |

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

offset-distance =
  <length-percentage>

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

```

Examples
--------

### Using offset-distance in an animation

The motion aspect in CSS Motion Path typically comes from animating the `offset-distance` property. If you want to animate an element along its full path, you would define its `offset-path` and then set up an animation that takes the `offset-distance` from `0%` to `100%`.

#### HTML

```html
<div id="motion-demo"></div>
```

#### CSS

```css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```

#### Result

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

| Specification |
| --- |
| Motion Path Module Level 1 # offset-distance-property |

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

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

See also
--------

* `offset`
* `offset-anchor`
* `offset-path`
* `offset-position`
* `offset-rotate`


border-block-end-color - CSS: Cascading Style Sheets

border-block-end-color
======================

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

Try it
------

Syntax
------

```css
border-block-end-color: yellow;
border-block-end-color: #f5f6f7;

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

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

### Values

`<color>`

The color of the border.

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

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

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

border-block-end-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

Examples
--------

### Border color 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: 10px solid blue;
  border-block-end-color: red;
}
```

#### Results

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

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

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


height - CSS: Cascading Style Sheets

height
======

The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area.

Try it
------

The `min-height` and `max-height` properties override `height`.

Syntax
------

```css
/\* <length> values \*/
height: 120px;
height: 10em;
height: 100vh;

/\* <percentage> value \*/
height: 75%;

/\* Keyword values \*/
height: max-content;
height: min-content;
height: fit-content;
height: fit-content(20em);
height: auto;

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

### Values

`<length>`

Defines the height as a distance value.

`<percentage>`

Defines the height as a percentage of the containing block's height.

`auto`

The browser will calculate and select a height for the specified element.

`max-content`

The intrinsic preferred height.

`min-content`

The intrinsic minimum height.

`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, <length-percentage>))`.

`clamp()`

Enables selecting a middle value within a range of values between a defined minimum and maximum.

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

Ensure that elements set with a `height` aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| Computed value | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

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

height =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

Examples
--------

### Setting height using pixels and percentages

#### HTML

```html
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
  <div id="child">I'm half the height of my parent.</div>
</div>
```

#### CSS

```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| 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 box model
* `width`
* `box-sizing`
* `min-height`, `max-height`
* The mapped logical properties: `block-size`, `inline-size`


:scope - CSS: Cascading Style Sheets

:scope
======

The **`:scope`** CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.

```css
/\* Selects a scoped element \*/
:scope {
  background-color: lime;
}
```

Which element(s) `:scope` matches depends on the context in which it is used:

* When used at the root level of a stylesheet, `:scope` is equivalent to `:root`, which in a regular HTML document matches the `<html>` element.
* When used inside a `@scope` block, `:scope` matches the block's defined scope root. It provides a way to apply styles to the root of the scope from inside the `@scope` block itself.
* When used within a DOM API call — such as `querySelector()`, `querySelectorAll()`, `matches()`, or `Element.closest()` — `:scope` matches the element on which the method was called.
Syntax
------

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

Examples
--------

### Using `:scope` as an alternative to `:root`

This example shows that `:scope` is equivalent to `:root` when used at the root level of a stylesheet. In this case, the provided CSS colors the background of the `<html>` element orange.

#### HTML

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

#### CSS

```css
:scope {
  background-color: orange;
}
```

#### Result

### Using `:scope` to style the scope root in a `@scope` block

In this example, we use two separate `@scope` blocks to match links inside elements with a `.light-scheme` and `.dark-scheme` class respectively. Note how `:scope` is used to select and provide styling to the scope roots themselves. In this example, the scope roots are the `<div>` elements that have the classes applied to them.

#### HTML

```html
<div class="light-scheme">
  <p>
    MDN contains lots of information about
    <a href="/en-US/docs/Web/HTML">HTML</a>,
    <a href="/en-US/docs/Web/CSS">CSS</a>, and
    <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
  </p>
</div>

<div class="dark-scheme">
  <p>
    MDN contains lots of information about
    <a href="/en-US/docs/Web/HTML">HTML</a>,
    <a href="/en-US/docs/Web/CSS">CSS</a>, and
    <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
  </p>
</div>
```

#### CSS
```

div {
  padding: 10px;
}
```

```css
@scope (.light-scheme) {
  :scope {
    background-color: plum;
  }

  a {
    color: darkmagenta;
  }
}

@scope (.dark-scheme) {
  :scope {
    background-color: darkmagenta;
    color: antiquewhite;
  }

  a {
    color: plum;
  }
}
```

#### Result

### Using `:scope` in JavaScript

This example demonstrates using the `:scope` pseudo-class in JavaScript. This can be useful if you need to get a direct descendant of an already retrieved `Element`.

#### HTML

```html
<div id="context">
  <div id="element-1">
    <div id="element-1.1"></div>
    <div id="element-1.2"></div>
  </div>
  <div id="element-2">
    <div id="element-2.1"></div>
  </div>
</div>
<p>
  Selected element ids :
  <span id="results"></span>
</p>
```

#### JavaScript

```js
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");

document.getElementById("results").innerHTML = Array.prototype.map
  .call(selected, (element) => `#${element.getAttribute("id")}`)
  .join(", ");
```

#### Result

The scope of `context` is the element with the `id` of `context`. The selected elements are the `<div>` elements that are direct children of that context — `element-1` and `element-2` — but not their descendants.

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

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

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

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

See also
--------

* The `@scope` at-rule
* The `:root` pseudo-class
* Locating DOM elements using selectors
* `Element.querySelector()` and `Element.querySelectorAll()`
* `Document.querySelector()` and `Document.querySelectorAll()`
* `DocumentFragment.querySelector()` and `DocumentFragment.querySelectorAll()`


text-justify - CSS: Cascading Style Sheets

text-justify
============

The **`text-justify`** CSS property sets what type of justification should be applied to text when `text-align``: justify;` is set on an element.

Syntax
------

```css
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /\* Deprecated value \*/

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

### Values

`none`

The text justification is turned off. This has the same effect as not setting `text-align` at all, although it is useful if you need to turn justification on and off for some reason.

`auto`

The browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g., English, CJK languages, etc.). This is the default justification used if `text-justify` is not set at all.

`inter-word`

The text is justified by adding space between words (effectively varying `word-spacing`), which is most appropriate for languages that separate words using spaces, like English or Korean.

`inter-character`

The text is justified by adding space between characters (effectively varying `letter-spacing`), which is most appropriate for languages like Japanese.

`distribute`
Deprecated

Exhibits the same behavior as `inter-character`; this value is kept for backwards compatibility.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | inline-level and table-cell elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

text-justify =
  auto             |
  none             |
  inter-word       |
  inter-character

```

Examples
--------

### Demonstration of the different values of text-justify
```

<p class="none">
  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="auto">
  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="dist">
  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="word">
  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="char">
  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
```

```css
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-justify-property |

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

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

See also
--------

* `text-align`


margin-inline-start - CSS: Cascading Style Sheets

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

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

Try it
------

Syntax
------

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

/\* Keyword values \*/
margin-inline-start: auto;

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

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

### Values

The `margin-inline-start` property takes the same values as the `margin-left` property.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

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

margin-inline-start =
  <'margin-top'>

```

Examples
--------

### Setting inline start margin

#### 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;
  margin-inline-start: 20px;
  background-color: #c8c800;
}
```

#### Result

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

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

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

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

See also
--------

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


Custom properties (--*): CSS variables - CSS: Cascading Style Sheets

Custom properties (--\*): CSS variables
=======================================

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

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

* Learn more
* See full compatibility
* Report feedback
Property names that are prefixed with `--`, like `--example-name`, represent *custom properties* that contain a value that can be used in other declarations using the `var()` function.

Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.

|  |  |
| --- | --- |
| Initial value | see prose |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified with variables substituted |
| Animation type | discrete |

Syntax
------

```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20 32 54);
```

`<declaration-value>`

This value matches any sequence of one or more tokens, so long as the sequence does not contain any disallowed token. It represents the entirety of what a valid declaration can have as its value.

**Note:** Custom property names are case sensitive — `--my-color` will be treated as a separate custom property to `--My-color`.

Example
-------

### HTML

```html
<p id="firstParagraph">
  This paragraph should have a blue background and yellow text.
</p>
<p id="secondParagraph">
  This paragraph should have a yellow background and blue text.
</p>
<div id="container">
  <p id="thirdParagraph">
    This paragraph should have a green background and yellow text.
  </p>
</div>
```

### CSS

```css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

### Result

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

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

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

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

See also
--------

* The `var()` function
* `@property` at-rule
* Using CSS custom properties (variables) guide
* CSS custom properties for cascading variables module


container-name - CSS: Cascading Style Sheets

container-name
==============

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

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

* Learn more
* See full compatibility
* Report feedback

 The **container-name** CSS property specifies a list of query container names used by the @container at-rule in a container query.
 A container query will apply styles to elements based on the size of the nearest ancestor with a containment context.
 When a containment context is given a name, it can be specifically targeted using the `@container` at-rule instead of the nearest ancestor with containment.

Syntax
------

```css
/\* A single name \*/
container-name: myLayout;

/\* Multiple names \*/
container-name: myPageLayout myComponentLibrary;

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

### Values

`<container-name>`

A case-sensitive string that is used to identify the container.

The following conditions apply:

* The name can be any valid `<custom-ident>`, but must not equal `default`.
* The name value must not be in quotes.
* The dashed ident intended to denote author-defined identifiers (e.g., `--container-name`) is permitted.
* A list of multiple names separated by a space is allowed.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | `none` or an ordered list of identifiers |
| Animation type | Not animatable |

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

container-name =
  none             |
  <custom-ident>+

```

Examples
--------

### Using a container name

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

```html
<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>
```

 To create a containment context, add the `container-type` property to an element in CSS.
 The following example creates two containment contexts, one for the card meta information and one for the post excerpt:

**Note:** A shorthand syntax for these declarations are described in the `container` page.

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

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

 Writing a container query via the `@container` at-rule will apply styles to the elements of the container when the query evaluates to true.
 The following example has two container queries, one that will apply only to the contents of the `.post-excerpt` element and one that will apply to both the `.post-meta` and `.post-excerpt` contents:

```css
@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}
```

For more information on writing container queries, see the CSS Container Queries page.

### Using multiple container names

You can also provide multiple names to a container context separated by a space:

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

 This will allow you to target the container using either name in the `@container` at-rule.
 This is useful if you want to target the same container with multiple container queries where either condition could be true:

```css
@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}
```

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

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

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

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

See also
--------

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


:host-context() - CSS: Cascading Style Sheets

:host-context()
===============

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

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

* Learn more
* See full compatibility
* Report feedback
The **`:host-context()`** CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.

In other words, this allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.

One typical use of this is with a descendant selector expression — for example `h1` — to select only instances of the custom element that are inside an `<h1>`. Another typical use would be to allow inner elements to react to classes or attributes on any ancestor elements - for example, applying a different text color when a `.dark-theme` class is applied to `<body>`.

**Note:** This has no effect when used outside a shadow DOM.

Try it
------

```css
/\* Selects a shadow root host, only if it is
 a descendant of the selector argument given \*/
:host-context(h1) {
  font-weight: bold;
}

/\* Changes paragraph text color from black to white when
 a .dark-theme class is applied to the document body \*/
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}
```

Syntax
------

```css
:host-context(<compound-selector>) {
  /\* ... \*/
}
```

Examples
--------

### Selectively styling shadow hosts

The following snippets are taken from our host-selectors example (see it live also).

In this example we have a simple custom element — `<context-span>` — that you can wrap around text:

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

Inside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:

```js
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
```

The `:host-context(h1) { font-style: italic; }` and `:host-context(h1):after { content: " - no links in headers!" }` rules style the instance of the `<context-span>` element (the shadow host in this instance) inside the `<h1>`. We've used it to make it clear that the custom element shouldn't appear inside the `<h1>` in our design.

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

See also
--------

* Web components
* CSS `:host` pseudo-class
* CSS `:host()` pseudo-class
* CSS `::slotted` pseudo-element
* HTML `<template>` element
* CSS scoping module


:target - CSS: Cascading Style Sheets

:target
=======

The **`:target`** CSS pseudo-class represents a unique element (the *target element*) with an `id` matching the URL's fragment.

```css
/\* Selects an element with an ID matching the current URL's fragment \*/
:target {
  border: 2px solid black;
}
```

For example, the following URL has a fragment (denoted by the *#* sign) that points to an element called `section2`:

```url
http://www.example.com/index.html#section2
```

The following element would be selected by a `:target` selector when the current URL is equal to the above:

```html
<section id="section2">Example</section>
```

Syntax
------

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

**Note:** Due to a possible bug in the CSS specification, `:target` doesn't work within a web component because the shadow root doesn't pass the target element down to the shadow tree.

Examples
--------

### A table of contents

The `:target` pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.

#### HTML

```html
<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
  <li>
    <a href="#nowhere">
      This link goes nowhere, because the target doesn't exist.
    </a>
  </li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">
  You can target <i>this paragraph</i> using a URL fragment. Click on the link
  above to try out!
</p>
<p id="p2">
  This is <i>another paragraph</i>, also accessible from the links above. Isn't
  that delightful?
</p>
```

#### CSS

```css
p:target {
  background-color: gold;
}

/\* Add a pseudo-element inside the target element \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* Style italic elements within the target element \*/
p:target i {
  color: red;
}
```

#### Result

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

| Specification |
| --- |
| HTML Standard # selector-target |
| Selectors Level 4 # the-target-pseudo |

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

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

See also
--------

* Using the :target pseudo-class in selectors


:future - CSS: Cascading Style Sheets

:future
=======

The **`:future`** CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches `:current`. For example in a video with captions which are being displayed by WebVTT.

```css
:future(p, span) {
  display: none;
}
```

Syntax
------

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

Examples
--------

### CSS

```css
:future(p, span) {
  display: none;
}
```

### HTML

```html
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
 label="English"
 kind="subtitles"
 srclang="en"
 src="subtitles.vtt"
 default />
</video>
```

### WebVTT
```

WEBVTT FILE

1
00:00:03.500 --> 00:00:05.000
This is the first caption

2
00:00:06.000 --> 00:00:09.000
This is the second caption

3
00:00:11.000 --> 00:00:19.000
This is the third caption
```

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

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

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

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

See also
--------

* Web Video Text Tracks Format (WebVTT)
* `:current`
* `:past`


scroll-timeline-name - CSS: Cascading Style Sheets

scroll-timeline-name
====================

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

The **`scroll-timeline-name`** CSS property is used to define the name of a *named scroll progress timeline*, which is progressed through by scrolling a scrollable element (*scroller*) between top and bottom (or left and right). `scroll-timeline-name` is set on the scroller that will provide the timeline.

The name is then referenced in an `animation-timeline` declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action.

**Note:** If the element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.

The `scroll-timeline-axis` and `scroll-timeline-name` properties can also be set using the `scroll-timeline` shorthand property.

Syntax
------

```css
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
```

### Values

Allowed values for `scroll-timeline-name` are:

`none`

The timeline has no name.

`<dashed-ident>`

An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an `animation-timeline` property.

**Note:** `<dashed-ident>` values must start with `--`, which helps avoid name clashes with standard CSS keywords.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | scroll containers |
| Inherited | no |
| Computed value | `none` or an ordered list of identifiers |
| Animation type | Not animatable |

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

scroll-timeline-name =
  [ none | <dashed-ident> ]#

```

Examples
--------

### Creating a named scroll progress timeline animation

 In this example, a scroll timeline named `--squareTimeline` is defined using the `scroll-timeline-name` property on the element with the ID `container`.
 This is then applied to the animation on the `#square` element using `animation-timeline: --squareTimeline`.

#### HTML

The HTML for the example is shown below.

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

#### CSS

The CSS for the container sets it as the source of a scroll timeline named `--squareTimeline` using the `scroll-timeline-name` property. No scrollbar axis is defined here because the vertical axis will be used by default.

The height of the container is set to `300px`, and the container is also set to create a vertical scrollbar if it overflows (the CSS `height` rule on the `stretcher` element below does make the content overflow its container).

```css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --squareTimeline;
  position: relative;
}
```

The CSS below defines a square that rotates according to the timeline provided by the `animation-timeline` property, which is set to the `--squareTimeline` timeline named above.

```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
  animation-timeline: --squareTimeline;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
```

 The `stretcher` CSS rule sets the block height to `600px`, which creates content that overflows the container element, thereby creating scroll bars.
 Without this element, the content would not overflow the container, there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline.

#### Result

Scroll the vertical bar to see the square animate as you scroll.

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

| Specification |
| --- |
| Scroll-driven Animations # scroll-timeline-name |

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

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

See also
--------

* `animation-timeline`
* `scroll-timeline`, `scroll-timeline-axis`
* `timeline-scope`
* CSS scroll-driven animations


scrollbar-width - CSS: Cascading Style Sheets

scrollbar-width
===============

The **`scrollbar-width`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.

Syntax
------

```css
/\* Keyword values \*/
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

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

### Values

`<scrollbar-width>`

Defines the width of the scrollbar as a keyword. It must be one of the following values:

|  |  |
| --- | --- |
| `auto` | The default scrollbar width for the platform. |
| `thin` |
 A thin scrollbar width variant on platforms that provide that option, or
 a thinner scrollbar than the default platform scrollbar width.
  |
| `none` | No scrollbar shown, however the element will still be scrollable. |

**Note:** User Agents must apply any `scrollbar-width` value set on the root element to the viewport.

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

Use this property with caution — setting `scrollbar-width` to `thin` or `none` can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. While swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative.

WCAG criterion 2.1.1 (Keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas. And introduced in WCAG 2.1, criterion 2.5.5 (Target Size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised).

* MDN Understanding WCAG, Guideline 2.1 explanations
* MDN Understanding WCAG, Guideline 2.5 explanations
* Understanding Success Criterion 2.1.1 | W3C Understanding WCAG 2.1
* Understanding Success Criterion 2.5.5 | W3C Understanding WCAG 2.1
Formal definition
-----------------

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

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

scrollbar-width =
  auto  |
  thin  |
  none

```

Examples
--------

### Sizing overflow scrollbars

#### CSS

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}
```

#### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

#### Result

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

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |

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-gutter`
* `scrollbar-color`


mask-mode - CSS: Cascading Style Sheets

mask-mode
=========

The **`mask-mode`** CSS property sets whether the mask reference defined by `mask-image` is treated as a luminance or alpha mask.

Syntax
------

```css
/\* Keyword values \*/
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/\* Multiple values \*/
mask-mode: alpha, match-source;

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

The `mask-mode` property is specified as one or more of the keyword values listed below, separated by commas.

### Values

`alpha`

This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.

`luminance`

This keyword indicates that the luminance values of the mask layer image should be used as the mask values.

`match-source`

If the `mask-image` property is of type `<mask-source>`, the luminance values of the mask layer image should be used as the mask values.

If it is of type `<image>`, the alpha values of the mask layer image should be used as the mask values.

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

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

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

mask-mode =
  <masking-mode>#

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

```

Examples
--------

### Using alpha mask mode

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

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

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

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

See also
--------

* Clipping and Masking in CSS


fit-content - CSS: Cascading Style Sheets

fit-content
===========

The **`fit-content`** behaves as `fit-content(stretch)`. In practice this means that the box will use the available space, but never more than `max-content`.

When used as laid out box size for `width`, `height`, `min-width`, `min-height`, `max-width` and `max-height` the maximum and minimum sizes refer to the content size.

**Note:** The CSS Sizing specification also defines the `fit-content()` function. This page details the keyword.

Syntax
------

```css
width: fit-content;
block-size: fit-content;
```

Examples
--------

### Using fit-content for box sizing

#### HTML

```html
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>
```

#### CSS

```css
.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |

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

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

See also
--------

* Related sizing keywords: `min-content`, `max-content`


:current - CSS: Cascading Style Sheets

:current
========

The **`:current`** CSS pseudo-class selector is a time-dimensional pseudo-class that represents an element or the ancestor of an element that is currently being displayed. For example, this pseudo-class can be used to represent a video that is being displayed with captions by WebVTT.

```css
:current(p, span) {
  background-color: yellow;
}
```

Syntax
------

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

:current(<compound-selector-list>) {
  /\* ... \*/
}
```

Examples
--------

### CSS

```css
:current(p, span) {
  background-color: yellow;
}
```

### HTML

```html
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
 label="English"
 kind="subtitles"
 srclang="en"
 src="subtitles.vtt"
 default />
</video>
```

### WebVTT
```

WEBVTT FILE

1
00:00:03.500 --> 00:00:05.000
This is the first caption

2
00:00:06.000 --> 00:00:09.000
This is the second caption

3
00:00:11.000 --> 00:00:19.000
This is the third caption
```

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

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

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

There is no browser implementing this feature.

See also
--------

* Web Video Text Tracks Format (WebVTT)
* `:past`
* `:future`


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

::-moz-range-progress
=====================

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

The **`::-moz-range-progress`** CSS pseudo-element is a Mozilla extension that represents the lower portion of the *track* (i.e., groove) in which the indicator slides in an `<input>` of `type="range"`. This portion corresponds to values lower than the value currently selected by the *thumb* (i.e., virtual knob).

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

Syntax
------

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

Examples
--------

### HTML

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

### CSS

```css
input[type="range"]::-moz-range-progress {
  background-color: green;
  height: 1em;
}
```

### Result

A progress bar using this style might look something like this:

![The progress bar is a thick green square to the left of the thumb and a thin grey line to the right. The thumb is a circle with a diameter the height of the green area.](/en-US/docs/Web/CSS/::-moz-range-progress/screen_shot_2015-12-04_at_20.14.48.png)

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

Not part of any standard.

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

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

See also
--------

* The pseudo-elements used by Gecko to style other parts of a range input:
    + `::-moz-range-thumb` represents the indicator that slides in the groove.
    + `::-moz-range-track` represents the groove in which the thumb slides.
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders


-webkit-border-before - CSS: Cascading Style Sheets

-webkit-border-before
=====================

**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-border-before`** CSS property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.

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

This property is a shorthand for the following CSS properties:

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

```css
/\* Border values \*/
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

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

### Values

One or more of the following, in any order:

`<'border-width'>`

See `border-width`

`<'border-style'>`

See `border-style`

`<'color'>`

See `color`

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

The `-webkit-border-before` property maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top`, `border-right`, `border-bottom`, or `border-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

It relates to `-webkit-border-after`, `-webkit-border-start`, and `-webkit-border-end`, which define the other borders of the element.

The standard-track equivalent of this property is `border-block-start`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| Applies to | all elements |
| Inherited | yes |
| Percentages | as each of the properties of the shorthand:* `-webkit-border-before-width`: logical-width of containing block
 |
| Computed value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `color`: computed color
 |
| Animation type | discrete |

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

-webkit-border-before =
  <'border-width'> || <'border-style'> || <color>
```

Examples
--------

### Applying a border with vertical text

#### HTML

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

#### CSS

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

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

#### Result

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

Not part of any standard, but it relates to the standards-track `border-block-start` property.

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

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

See also
--------

* `border-block-start`
* The mapped physical properties: `border-top`, `border-right`, `border-bottom`, and `border-left`
* `writing-mode`, `direction`, `text-orientation`


clamp() - CSS: Cascading Style Sheets

clamp()
=======

The **`clamp()`** CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

Try it
------

Note that using `clamp()` for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.

Syntax
------

```css
/\* Static values \*/
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/\* Calculated values \*/
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
```

### Parameters

The `clamp(min, val, max)` function accepts three comma-separated expressions as its parameters.

`min`

The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.

`val`

The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.

`max`

The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.

The expressions can be math functions (see `calc()` for more information), literal values, other expressions that evaluate to a valid argument type (like `<length>`), or nested `min()` and `max()` functions. For math expressions, you can use addition, subtraction, multiplication, and division without using the `calc()` function itself. You may also use parentheses to establish computation order when needed.

You can use different units for each value in your expressions and different units in any math function making up any of the arguments.

Keep the following aspects in mind while working with the function:

* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `max()` and `min()` functions as expression values, in which case the inner ones are treated as simple parentheses. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
* The expression can be values combining the addition ( `+` ), subtraction ( `-` ), multiplication ( `*` ) and division ( `/` ) operators, using standard operator precedence rules. Make sure to put a space on each side of the `+` and `-` operands. The operands in the expression may be any `<length>` syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
* Oftentimes you will want to use `min()` and `max()` within a `clamp()` function.
### Return value

`clamp(MIN, VAL, MAX)` is resolved as ``max`(MIN, `min`(VAL, MAX))`.

Based on the provided parameters, the function returns `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>`.

### Formal syntax
```

<clamp()> =
  clamp( <calc-sum>#{3} )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

Examples
--------

### min(), max(), and clamp() comparison

In this example we have a web page that uses `min()`, `max()`, and `clamp()` to set sizes responsively.

The example adjusts the sizes of page elements in three ways:

* the lengths of the lines of text
* the font size of paragraph text
* the font size of heading text

In all three cases, the page uses a combination of a viewport-relative units (`vw` and `<percentage>`), to set a size that varies with the viewport width, and a value that is not viewport relative (`rem` and `px`) to implement minimum and/or maximum sizes.

The example is at https://mdn.github.io/css-examples/min-max-clamp/. Open it in a new window and try adjusting the window width.

The **line length** (controlled by the `width` of the `<body>` element) will increase as the window width increases, but only up to a certain point (`1000px`), and beyond that point, it won't increase anymore. We're using `min()` to set a **maximum line length**: it can go under `1000px`, but won't go over. This is helpful because long lines are harder to read, so we often want to limit how long a line can be. To achieve this we use `min(1000px, calc(70% + 100px))`: when the result of the percentage-based calculation goes above `1000px`, we switch to the fixed `1000px` value.

The **size of the paragraph text**, controlled by the `font-size` of the `<p>` element, decreases as the window gets narrower, but only up to a certain point, and beyond that point (the point where `1.2vw` is less than `1.2rem`) it doesn't get any smaller: it stays at `1.2rem`. We're using `max()` to set a **minimum font size**: the font can grow above `1.2rem` but will never go below it. This is helpful because really small text is hard to read. To achieve this we use `max(1.2rem, 1.2vw)`. This means that the `font-size` will be set at `1.2rem`, unless the computed value of `1.2vw` is greater than that of `1.2rem`, in which case it will be set to `1.2vw` instead.

The **size of the heading text**, controlled by the `font-size` of the `<h1>` element, has a viewport-relative value with both a maximum and a minimum threshold. To achieve this we use `clamp(1.8rem, 2.5vw, 2.8rem)`. The viewport-relative value is `2.5vw` but it is clamped between `1.8rem` and `2.8rem`, so:

* if the calculated value of `2.5vw` is less than `1.8rem`, then `1.8rem` will be used
* if the calculated value of `2.5vw` is greater than `2.8rem`, then `2.8rem` will be used.

This prevents the heading text from getting too small in a very narrow window, or too big in a very wide window.

#### HTML

```html
<h1>Simple responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
```

#### CSS

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

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}
```

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

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

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

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

See also
--------

* `calc()`
* `max()`
* `min()`
* CSS Values


outline - CSS: Cascading Style Sheets

outline
=======

The **`outline`** CSS shorthand property sets most of the outline properties in a single declaration.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `outline-color`
* `outline-style`
* `outline-width`
Syntax
------

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

/\* color | style \*/
outline: #f66 dashed;

/\* style | width \*/
outline: inset thick;

/\* color | style | width \*/
outline: green solid 3px;

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

The `outline` property may be specified using one, two, or three of the values listed below. The order of the values does not matter. As with all shorthand properties, any omitted sub-values will be set to their initial value.

**Note:** The outline will be invisible for many elements if its style is not defined. This is because the style defaults to `none`. A notable exception is `input` elements, which are given default styling by browsers.

### Values

`<'outline-color'>`

Sets the color of the outline. Defaults to `invert` for browsers supporting it, `currentcolor` for the others. See `outline-color`.

`<'outline-style'>`

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

`<'outline-width'>`

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

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

Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.

There are a few properties that affect an outline's appearance. It is possible to change the style, color, and width using the `outline` property, the distance from the border using the `outline-offset` property, and corner angles using the `border-radius` property.

An outline is not required to be rectangular: While dealing with multiline text, some browsers will draw an outline for each line box separately, while others will wrap the whole text with a single outline.

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

Assigning `outline` a value of `0` or `none` will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.

* How to Design Useful and Usable Focus Indicators
* WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `outline-color`: `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `outline-color`: For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
* `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0`
* `outline-style`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `outline-color`: a color
* `outline-width`: a length
* `outline-style`: by computed value type
 |

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

outline =
  <'outline-color'>  ||
  <'outline-style'>  ||
  <'outline-width'>

```

Examples
--------

### Using outline to set a focus style

#### HTML

```html
<a href="#">This link has a special focus style.</a>
```

#### CSS

```css
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
```

#### Result

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

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

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

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

See also
--------

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


page - CSS: Cascading Style Sheets

page
====

The **`page`** CSS property is used to specify the named page, a specific type of page defined by the `@page` at-rule.

If there are multiple selectors that are using a named page consecutively then a forced page break using `break-after` may be needed.

Syntax
------

```css
/\* set a named page \*/
page: exampleName;
page: chapterIntro;

/\* Use ancestors named page \*/
page: auto; /\* default value \*/

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

### Values

`auto`

Default value. Use the value of the nearest ancestor with a non-`auto` value. If no ancestor has a named page value set, the used value for auto is the empty string.

`<custom-ident>`

Case-sensitive name defined in a `@page` at-rule.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

page =
  auto            |
  <custom-ident>

```

Examples
--------

### Named page example

#### HTML

There are two parts to this HTML:

* The print controls
* The content to be printed

The print controls allow the user to select how the `section`s in the `article` will be printed.

```html
<!-- print options -->
<fieldset id="printStyle">
  <legend>How would you like to print</legend>
  <label for="single"
 ><input type="radio" id="single" name="type" value="single" checked />No
    Pages</label
 >
  <label for="double"
 ><input type="radio" id="grouped" name="type" value="grouped" />Pages with
    Grouped Chapters</label
 >
  <label for="double"
 ><input type="radio" id="paged" name="type" value="paged" />Chapters
    Paged</label
 >
  <button id="print">Print</button>
</fieldset>
<!-- Content to be printed -->
<article id="print-area" data-print="single">
  <section id="toc">
    <h2>Table of contents</h2>
    <ul>
      <li>Foreword</li>
      <li>Introduction</li>
      <li>Chapter One - named pages</li>
      <li>Chapter Two - page orientation</li>
      <li>Chapter Three - page margins</li>
      <li>Conclusion</li>
    </ul>
  </section>
  <section id="foreword">
    <h2>Foreword</h2>
    <p>
      This book is all about how the CSS <code>@page</code> at-rule can help
      with printing HTML books.
    </p>
  </section>
  <section id="introduction">
    <h2>Introduction</h2>
    <p>
      This book is a concept to show how an <em>HTML</em> document can easily be
      printed out in pages.
    </p>
  </section>
  <section id="chapter1" class="chapter">
    <h2>Named pages</h2>
    <p>Lorem ipsum</p>
  </section>
  <section id="chapter2" class="chapter">
    <h2>Page Orientation</h2>
    <p>Lorem ipsum</p>
  </section>
  <section id="chapter3" class="chapter">
    <h2>Page Margins</h2>
    <p>There are 16 page margins that can be set:</p>
    <ul>
      <li>@top-left-corner</li>
      <li>@top-left</li>
      <li>@top-middle</li>
      <li>@top-right</li>
      <li>@top-right-corner</li>
      <li>@left-top</li>
      <li>@left-middle</li>
      <li>@left-bottom</li>
      <li>@right-top</li>
      <li>@right-middle</li>
      <li>@right-bottom</li>
      <li>@bottom-left-corner</li>
      <li>@bottom-left</li>
      <li>@bottom-middle</li>
      <li>@bottom-right</li>
      <li>@bottom-right-corner</li>
    </ul>
    <p>They can be used to show what appears in these parts of the margin</p>
  </section>
  <section id="conclusion">
    <h2>Conclusion</h2>
    <p>Now go ahead and write books.</p>
  </section>
</article>
```

#### CSS
```

fieldset {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  width: fit-content;
}
```

The first part of the CSS sets up the **named** pages, these include the size and orientation and also some content to go in the `@top-middle` margin of the printed pages.

```css
@page toc {
  size: a4 portrait;
  @top-middle {
    content: "Table of contents";
  }
}

@page foreword {
  size: a4 portrait;
  @top-middle {
    content: "Foreword";
  }
}

@page introduction {
  size: a4 portrait;
  @top-middle {
    content: "Introduction";
  }
}

@page conclusion {
  size: a4 portrait;
  @top-middle {
    content: "Conclusion";
  }
}

@page chapter {
  size: a4 landscape;
  @top-middle {
    content: "Chapter";
  }
}
```

The next part of the CSS uses attribute selectors to apply the print dimensions, orientation, and margins defined in the named `@page` rules defined in the previous CSS section to elements using the `page` property.

The sections with `class="chapter"` are concurrent and appear as one page. The `break-after: page;` is used to split them up, which splits each chapter into a separately printed page.

```css
@media print {
  fieldset {
    display: none;
  }
  section {
    font-size: 2rem;
    font-family: Roboto;
  }
  .chapter {
    border: tomato 2px solid;
  }
  [data-print="grouped"] > #toc,
 [data-print="paged"] > #toc {
    page: toc;
    font-family: Courier;
  }
  [data-print="grouped"] > #foreword,
 [data-print="paged"] > #foreword {
    page: foreword;
    font-family: Courier;
  }
  [data-print="grouped"] > #introduction,
 [data-print="paged"] > #introduction {
    page: introduction;
    font-family: Courier;
  }
  [data-print="grouped"] > #conclusion,
 [data-print="paged"] > #conclusion {
    page: conclusion;
    font-family: Courier;
  }
  [data-print="grouped"] > .chapter,
 [data-print="paged"] > .chapter {
    page: chapter;
  }
  [data-print="paged"] > .chapter {
    border: none;
    break-after: page;
  }
  .chapter > ul {
    columns: 2;
  }
}
```

#### JavaScript

The JavaScript updates the value of the `data-print` attribute, which is the attribute on which the named page is applied, when you select a different printing option:

```js
const printArea = document.querySelector("#print-area");
const printButton = document.querySelector("#print");
const printOption = document.querySelector("#printStyle");
printOption.addEventListener("change", (event) => {
  if (event.target.value === "single") {
    printArea.dataset.print = "single";
  } else if (event.target.value === "grouped") {
    printArea.dataset.print = "grouped";
  } else {
    printArea.dataset.print = "paged";
  }
});
printButton.addEventListener("click", () => {
  window.print();
});
```

#### Result

What is printed, and what is shown in the print preview dialog, will change depending on which print style radio button is selected.

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # using-named-pages |

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

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


inset-block-start - CSS: Cascading Style Sheets

inset-block-start
=================

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

Try it
------

Syntax
------

```css
/\* <length> values \*/
inset-block-start: 3px;
inset-block-start: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-block-start: 10%;

/\* Keyword value \*/
inset-block-start: auto;

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

### Values

The `inset-block-start` property takes the same values as the `left` property.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | logical-height of containing block |
| Computed value | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

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

inset-block-start =
  auto                 |
  <length-percentage>

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

```

Examples
--------

### Setting block start offset

#### 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;
  position: relative;
  inset-block-start: 20px;
  background-color: #c8c800;
}
```

#### Result

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

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

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

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

See also
--------

* The properties which defines other insets: `inset-block-end`, `inset-inline-start`, and `inset-inline-end`
* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* `writing-mode`, `direction`, `text-orientation`


<angle> - CSS: Cascading Style Sheets

<angle>
=======

The **`<angle>`** CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in `<gradient>`s and in some `transform` functions.

Try it
------

Syntax
------

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

Optionally, it may be preceded by a single `+` or `-` sign. Positive numbers represent clockwise angles, while negative numbers represent counterclockwise angles. For static properties of a given unit, any angle can be represented by various equivalent values. For example, `90deg` equals `-270deg`, and `1turn` equals `4turn`. For dynamic properties, like when applying an `animation` or `transition`, the effect will nevertheless be different.

### Units

`deg`

Represents an angle in degrees. One full circle is `360deg`. Examples: `0deg`, `90deg`, `14.23deg`.

`grad`

Represents an angle in gradians. One full circle is `400grad`. Examples: `0grad`, `100grad`, `38.8grad`.

`rad`

Represents an angle in radians. One full circle is 2π radians which approximates to `6.2832rad`. `1rad` is 180/π degrees. Examples: `0rad`, `1.0708rad`, `6.2832rad`.

`turn`

Represents an angle in a number of turns. One full circle is `1turn`. Examples: `0turn`, `0.25turn`, `1.2turn`.

Examples
--------

### Setting a clockwise right angle

|  |  |
| --- | --- |
| A diagram showing a clockwise 90-degree rotation along a circle by moving from the topmost point to the rightmost point. | `90deg = 100grad = 0.25turn ≈ 1.5708rad` |

### Setting a flat angle

|  |  |
| --- | --- |
| A diagram showing a clockwise 180-degree rotation along a circle by moving from the topmost point to the bottommost point. | `180deg = 200grad = 0.5turn ≈ 3.1416rad` |

### Setting a counterclockwise right angle

|  |  |
| --- | --- |
| A diagram showing a counterclockwise 90-degree rotation along a circle by moving from the topmost point to the leftmost point. | `-90deg = -100grad = -0.25turn ≈ -1.5708rad` |

### Setting a null angle

|  |  |
| --- | --- |
| A diagram showing a 0-degree rotation. There is no movement. | `0 = 0deg = 0grad = 0turn = 0rad` |

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

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

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

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

See also
--------

* CSS data types
* The `<gradient>` type
* CSS rotation transforms: `rotate()`, `rotate3d()`, `rotateX()`, `rotateY()`, and `rotateZ()`
* CSS transforms
* Using CSS transforms
* Using CSS gradients


justify-items - CSS: Cascading Style Sheets

justify-items
=============

The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

Try it
------

The effect of this property is dependent of the layout mode we are in:

* In block-level layouts, it aligns the items inside their containing block on the inline axis.
* For absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
* In table cell layouts, this property is *ignored* (more about alignment in block, absolute positioned and table layout)
* In flexbox layouts, this property is *ignored* (more about alignment in Flexbox)
* In grid layouts, it aligns the items inside their grid areas on the inline axis (more about alignment in grid layouts)
Syntax
------

```css
/\* Basic keywords \*/
justify-items: normal;
justify-items: stretch;

/\* Positional alignment \*/
justify-items: center; /\* Pack items around the center \*/
justify-items: start; /\* Pack items from the start \*/
justify-items: end; /\* Pack items from the end \*/
justify-items: flex-start; /\* Equivalent to 'start'. Note that justify-items is ignored in Flexbox layouts. \*/
justify-items: flex-end; /\* Equivalent to 'end'. Note that justify-items is ignored in Flexbox layouts. \*/
justify-items: self-start;
justify-items: self-end;
justify-items: left; /\* Pack items from the left \*/
justify-items: right; /\* Pack items from the right \*/

/\* Baseline alignment \*/
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/\* Overflow alignment (for positional alignment only) \*/
justify-items: safe center;
justify-items: unsafe center;

/\* Legacy alignment \*/
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

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

This property can take one of four different forms:

* Basic keywords: one of the keyword values `normal` or `stretch`.
* Baseline alignment: the `baseline` keyword, plus optionally one of `first` or `last`.
* Positional alignment: one of: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, or `right`. Plus optionally `safe` or `unsafe`.
* Legacy alignment: the `legacy` keyword, followed by one of `left` or `right`.
### Values

`normal`

The effect of this keyword is dependent of the layout mode we are in:

* In block-level layouts, the keyword is a synonym of `start`.
* In absolutely-positioned layouts, the keyword behaved like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In table cell layouts, this keyword has no meaning as this property is *ignored*.
* In flexbox layouts, this keyword has no meaning as this property is *ignored.*
* In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.

`start`

The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

`end`

The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

`flex-start`

For items that are not children of a flex container, this value is treated like `start`.

`flex-end`

For items that are not children of a flex container, this value is treated like `end`.

`self-start`

The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.

`self-end`

The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.

`center`

The items are packed flush to each other toward the center of the alignment container.

`left`

The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

`right`

The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

`baseline`, `first baseline`, `last baseline`

 Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`stretch`

If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size exactly fills the alignment container.

`safe`

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

`legacy`

Makes the value inherited by the box descendants. Note that if a descendant has a `justify-self: auto` value, the `legacy` keyword is not considered by the descend, only the `left`, `right`, or `center` value associated to it.

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

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

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

justify-items =
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  legacy                                              |
  legacy && [ left | right | center ]                 |
  anchor-center

<baseline-position> =
  [ first | last ]?  &&
  baseline

<overflow-position> =
  unsafe  |
  safe

<self-position> =
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

```

Examples
--------

### Simple demonstration

In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` (the default), which causes the grid items to stretch across the entire width of their cells.

If you hover or tab onto the grid container however, it is given a `justify-items` value of `center`, which causes the grid items to span only as wide as their content width, and align in the center of their cells.

#### HTML

```html
<article class="container" tabindex="0">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

article:hover,
article:focus {
  justify-items: center;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # justify-items-property |

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

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

See also
--------

* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `place-items` shorthand property
* The `justify-self` property
* The `align-items` property