Viewport concepts - CSS: Cascading Style Sheets

Viewport concepts
=================

This article explains the concept of the viewport — what it is, its impact in terms of CSS, SVG, and mobile devices — and differentiates between the visual viewport and the layout viewport.

What is a viewport?
-------------------

A viewport represents the area in computer graphics being currently viewed. In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc. That is the part of the document you are viewing.

Documents like this article may be very long. Your viewport is everything that is currently visible, notably, the "what is a viewport" section, and perhaps some of the navigation menu. The size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in. Content outside the viewport, such as the *See Also* section in this document, is likely to not be visible onscreen until scrolled into view.

* On larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser window.
* On most mobile devices and when the browser is in fullscreen mode, the viewport is the entire screen.
* In fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport.

To recap, the viewport is basically the part of the document that is currently visible.

### Viewport sizes are mutable

The width of the viewport is not always the width of the window. If you query the width or height of the window and document in Chrome or Firefox, you may get:

```js
document.documentElement.clientWidth; /\* 1200 \*/
window.innerWidth; /\* 1200 \*/
window.outerWidth; /\* 1200 \*/
```

```js
document.documentElement.clientHeight; /\* 800 \*/
window.innerHeight; /\* 800 \*/
window.outerHeight; /\* 900 \*/
```

There are several DOM properties that can help you query viewport size, and other similar lengths:

* The document element's `Element.clientWidth` is the inner width of a document in CSS pixels, including padding (but not borders, margins, or vertical scrollbars, if present). **This is the viewport width**.
* The `Window.innerWidth` is the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.
* The `Window.outerWidth` is the width of the outside of the browser window including all the window chrome.

In an experiment with these, the `innerWidth` and `outerWidth` was seen to be the same, but the `outerHeight` was 100px taller than the `innerHeight`. This is because the `outerHeight` includes the browser chrome: measurements were taken on a browser with an address bar and bookmarks bar totalling 100px in height, but no chrome on the left or right of the window.

The area within the `innerHeight` and `innerWidth` is generally considered the **layout viewport**. The browser chrome is not considered part of the viewport.

When zoomed in, both Firefox and Chrome report the new CSS pixel size for `innerWidth` and `clientWidth`. The values returned for the `outerWidth` and `outerHeight` depend on the browser: Firefox reports the new value in CSS pixels, but Chrome returns the length in the default pixel size. When zoomed in you may get:

```js
document.documentElement.clientWidth; /\* 800 \*/
window.innerWidth; /\* 800 \*/
window.outerWidth; /\* 800 in Firefox, 1200 in chrome \*/
```

```js
document.documentElement.clientHeight; /\* 533 \*/
window.innerHeight; /\* 533 \*/
window.outerHeight; /\* 596 in Firefox, 900 in chrome \*/
```

The viewport was originally 1200 x 800 pixels. Upon zooming in, the viewport became 800 x 533 pixels. This is the *layout viewport*. Sticky headers or footers, with the following styles, will stick to the top and bottom of the *layout viewport* respectively.

```css
body > header {
  position: fixed;
  top: 0;
}
body > footer {
  position: fixed;
  bottom: 0;
}
```

We got the 800 x 533 measurement when we zoomed in using the keyboard. The header and footer stayed flush against the top and bottom of the window. But what if we had pinched-zoomed on a tablet? What if a dynamic keyboard pops open on a phone?

The web contains two viewports, the **layout viewport** and the **visual viewport**. The visual viewport is the part of the web page that is currently visible in the browser and can change. When the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.

Sticky headers or footers, as discussed above, stick to the top and bottom of the *layout viewport*, and therefore remain in view when we zoom in with the keyboard. If you pinch-zoom, the layout viewport may not be fully visible. If you magnify from the middle of the layout viewport, the content will expand in all four directions. If you have a sticky header or footer, they will still be stuck to the top or bottom of the layout viewport, but they may not be visible at the top and bottom of the device's screen — which is the visual viewport. The visual viewport is the currently visible portion of the layout viewport. If you scroll down, you are changing the contents of the visual viewport and bringing the bottom of the layout viewport into view, displaying the sticky footer, which will then stay stuck at the bottom.

The visual viewport is the visual portion of a screen not including on-screen keyboards, areas outside of a pinch-zoom area, or other feature that doesn't scale with the dimensions of a page. The visual viewport is the same size as the layout viewport or smaller.

For a page containing iframes, objects, or external SVG, both the containing pages and each included file has their own unique window object. Only the top-level window has a visual viewport that may be distinct from the layout viewport. For included documents, the visual viewport and layout viewport are the same.

### CSS

The layout viewport and visual viewport described above are not the only viewports you will encounter. Any sub-viewport that is fully or partially displayed within the layout viewport is considered a visual viewport.

We generally think of width and height media queries as being relative to the width and height of the browser window. They are actually relative to the viewport, which is the window in the main document but is the intrinsic size of the element's parent in a nested browsing context like objects, iframes and SVG. In CSS, we also have length units based on the viewport size. A `vh` unit is 1% of the layout viewport's height. Similarly, the `vw` unit is 1% of the layout viewport's width.

#### `<iframe>`

Inside an iframe, the visual viewport is the size of the inner width and height of the iframe, rather than the parent document. You can set any height and width on an iframe, but the whole document may not be visible.

If you use viewport length units in your CSS within the iframe document, `1vh` will be 1% of the height of the iframe, and `1vw` will be 1% of the width of the document.

```css
iframe {
  width: 50vw;
}
```

If the iframe is set to 50vw, it will be 50% of the width of the `1200px` parent document in our example above, or `600px`, with `1vw` being `6px`. When zoomed in, the iframe shrinks to `400px` and `1vw` becomes `4px`.

A width-based media query within the iframe document is relative to the iframe's viewport.

```css
@media screen and (min-width: 500px) {
  p {
    color: red;
  }
}
```

If the above CSS is included in the iframe, the paragraphs will become red when the user has zoomed in, but this style does not apply in the non-zoomed-in state.

#### SVG

In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport. The size of the viewport can be defined using the width and height attributes of the `<svg>` element.

```html
<svg height="300" width="400"></svg>
```

In this example, the viewport has an aspect ratio of 3:4 and is, by default, 400 by 300 units, with a unit generally being a CSS pixel.

SVG also has an internal coordinate system defined via the viewBox attribute, which is not related to this viewport discussion.

If you include an SVG file in your HTML, the viewport of the SVG is the initial containing block, or the width and height of the SVG container. Using the `@media` query in your SVG's CSS is relative to that container, not the browser.

```css
@media screen and (min-width: 400px) and (max-width: 500px) {
  /\* CSS goes here \*/
}
```

Generally, when you write the above media query, the styles are applied if the viewport, generally the browser window, is between 400px and 500px, inclusive. The width media query in the SVG is based on the element in which the SVG is contained — the `<img>` if the source is an SVG file, the SVG itself if the SVG is included directly into the HTML, or the parent if the parent element has a width assigned and — not the viewport's width. With the above media query being in our SVG file, the CSS is applied if the SVG container is between 400 and 500px.

### JavaScript

The Visual Viewport API provides a mechanism for querying and modifying the properties of the visual viewport.

Mobile Viewports
----------------

Mobile devices come in all shapes and sizes, with screens of differing device pixel ratios. The mobile browser's viewport is the area of the window in which web content can be seen, which is not necessarily the same size as the rendered page. Mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 320px, a website might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 320px space, which, depending on the design, is illegible for many if not everyone. To tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following:

```html
<meta name="viewport" content="width=device-width" />
```

The `width` property controls the size of the viewport. It should preferably be set to `device-width`, which is the width of the screen in CSS pixels at a scale of 100%. There are other properties, including `maximum-scale`, `minimum-scale`, and `user-scalable`, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted.

See also
--------

* Visual Viewport API
* `<meta>`, specifically `<meta name="viewport">`
* Using the viewport meta tag to control layout on mobile browsers


<flex> - CSS: Cascading Style Sheets

<flex>
======

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

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

* Learn more
* See full compatibility
* Report feedback
The **`<flex>`** CSS data type denotes a flexible length within a grid container. It is used in `grid-template-columns`, `grid-template-rows` and other related properties.

Syntax
------

The `<flex>` data type is specified as a `<number>` followed by the unit `fr`. The `fr` unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number.

Examples
--------

### Examples of correct values for the fr data type
```

1fr    /* Using an integer value */
2.5fr  /* Using a float value */
```

### Example of use in a tracklisting for CSS Grid layout

```css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}
```

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # fr-unit |

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

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

See also
--------

* CSS Grid Layout


background-origin - CSS: Cascading Style Sheets

background-origin
=================

The **`background-origin`** CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

Try it
------

Note that `background-origin` is ignored when `background-attachment` is `fixed`.

Syntax
------

```css
/\* Keyword values \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

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

The `background-origin` property is specified as one of the keyword values listed below.

### Values

`border-box`

The background is positioned relative to the border box.

`padding-box`

The background is positioned relative to the padding box.

`content-box`

The background is positioned relative to the content box.

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

|  |  |
| --- | --- |
| Initial value | `padding-box` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | a repeatable list |

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

background-origin =
  <visual-box>#

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

```

Examples
--------

### Setting background origins

```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```

```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```

```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

### Using two gradients

In this example the box has a thick dotted border. The first gradient uses the `padding-box` as the `background-origin` and therefore the background sits inside the border. The second uses the `content-box` and so only displays behind the content.

```css
.box {
  margin: 10px 0;
  color: #fff;
  background: linear-gradient(
      90deg,
      rgb(131 58 180 / 100%) 0%,
      rgb(253 29 29 / 60%) 60%,
      rgb(252 176 69 / 100%) 100%
    ), radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}
```

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

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

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

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

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

See also
--------

* `background-clip`


grid-row - CSS: Cascading Style Sheets

grid-row
========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`grid-row`** CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `grid-row-end`
* `grid-row-start`
Syntax
------

```css
/\* Keyword values \*/
grid-row: auto;
grid-row: auto / auto;

/\* <custom-ident> values \*/
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/\* <integer> + <custom-ident> values \*/
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/\* span + <integer> + <custom-ident> values \*/
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

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

This property is specified as one or two `<grid-line>` values.

If two `<grid-line>` values are given, they are separated by `/`. The `grid-row-start` longhand is set to the value before the slash, and the `grid-row-end` longhand is set to the value after the slash.

Each `<grid-line>` value can be specified as:

* either the `auto` keyword
* or a `<custom-ident>` value
* or an `<integer>` value
* or both `<custom-ident>` and `<integer>`, separated by a space
* or the keyword `span` together with either a `<custom-ident>` or an `<integer>` or both.
### Values

`auto`

Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.

`<custom-ident>`

If there is a named line with the name `<custom-ident>-start`/`<custom-ident>-end`, it contributes the first such line to the grid item's placement.

**Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).

Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

`<integer> && <custom-ident>?`

Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

An `<integer>` value of `0` is invalid.

`span && [ <integer> || <custom-ident> ]`

Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is n lines from the opposite edge.

If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

If the `<integer>` is omitted, it defaults to `1`. Negative integers or 0 are invalid.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `grid-row-start`: `auto`
* `grid-row-end`: `auto`
 |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `grid-row-start`: as specified
* `grid-row-end`: as specified
 |
| Animation type | discrete |

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

grid-row =
  <grid-line> [ / <grid-line> ]?

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

Examples
--------

### Setting grid row size and location

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(6, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}
```

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # placement-shorthands |

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

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

See also
--------

* Related CSS properties: `grid-row-start`, `grid-row-end`, `grid-column`, `grid-column-start`, `grid-column-end`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Video tutorial: *Line-based placement*


<basic-shape> - CSS: Cascading Style Sheets

<basic-shape>
=============

The **`<basic-shape>`** CSS data type represents a shape used in the `clip-path`, `shape-outside`, and `offset-path` properties.

Try it
------

Syntax
------

The `<basic-shape>` data type is defined with one of the basic shape functions listed below.

When creating a shape, the reference box is defined by each property that uses `<basic-shape>` values. The coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box.

The default reference box is the `margin-box`, as demonstrated in the below image which shows a circle created using `shape-outside: circle(50%)`. The shape is being defined with reference to the margin box.

![An image showing a circle inspected with the Firefox DevTools Shape Inspector. The different parts of the box model are highlighted.](/en-US/docs/Web/CSS/basic-shape/shapes-reference-box.png)

### Shape functions

The following shapes are supported. All `<basic-shape>` values use functional notation and are defined here using the value definition syntax.

``inset()``

Defines an inset rectangle.

```css
inset( <length-percentage>{1,4} [ round <`border-radius`> ]? )
```

When all of the first four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the position of the edges of the inset rectangle. These arguments follow the syntax of the `margin` shorthand, which lets you set all four insets with one, two, three, or four values.

The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS `border-radius` shorthand property.

A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area.

``rect()``

Defines a rectangle using the specified distances from the top and left edges of the reference box.

```css
rect( [ <length-percentage> | auto ]{4} [ round <`border-radius`> ]? )
```

You specify four values to create the rectangle. Each of the four values is either a `<length>`, a `<percentage>`, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values.

The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS `border-radius` shorthand property.

``xywh()``

Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle.

```css
xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <`border-radius`> ]? )
```

The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the `border-radius` shorthand syntax.

``circle()``

Defines a circle using a radius and a position.

```css
circle( <shape-radius>? [ at <position> ]? )
```

The `<shape-radius>` argument represents *r*, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`.

The `<position>` argument defines the center of the circle. This defaults to center if omitted.

``ellipse()``

Defines an ellipse using two radii and a position.

```css
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
```

The `<shape-radius>` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box.

The position argument defines the center of the ellipse. This defaults to center if omitted.

``polygon()``

Defines a polygon using an SVG `fill-rule` and a set of vertices.

```css
polygon( <fill-rule>? [ <shape-arg> <shape-arg> ]# )
```

`<fill-rule>` represents the `fill-rule` used to determine the interior of the polygon. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`.

Each pair argument in the list represents *xi* and *yi* - the x and y axis coordinates of the vertex of the polygon at position i.

``path()``

Defines a shape using an SVG `fill-rule` and an SVG path definition.

```css
path( [ <fill-rule>, ]? <string> )
```

The optional `<fill-rule>` represents the `fill-rule` used to determine the interior of the path. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`.

The required <string> is an SVG Path string encompassed in quotes

The arguments not defined above are defined as follows:

```css
<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
```

Defines a radius for a circle or ellipse. If omitted it defaults to `closest-side`.

`closest-side` uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.

`farthest-side` uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.

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

### Computed values of basic shapes

The values in a `<basic-shape>` function are computed as specified, with these exceptions:

* Omitted values are included and compute to their defaults.
* A `<position>` value in `circle()` or `ellipse()` is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.
* A `<border-radius>` value in `inset()` is computed as an expanded list of all eight `<length>` or percentage values.
### Interpolation of basic shapes

When animating between one `<basic-shape>` and another, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as `<length>`, `<percentage>`, or `calc()` where possible. If list values are not one of those types but are identical, those values do interpolate.

* Both shapes must use the same reference box.
* If both shapes are the same type, that type is `ellipse()` or `circle()`, and none of the radii use the `closest-side` or `farthest-side` keywords, interpolate between each value in the shape functions.
* If both shapes are of type `inset()`, interpolate between each value in the shape functions.
* If both shapes are of type `polygon()`, both polygons have the same number of vertices, and use the same `<fill-rule>`, interpolate between each value in the shape functions.
* If both shapes are of type `path()`, both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers.
* In all other cases no interpolation occurs.
Examples
--------

### Animated polygon

In this example, we use the @keyframes at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.

#### HTML

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

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}
```

#### Result

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # basic-shape-functions |

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

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

See also
--------

* Properties that use this data type: `clip-path`, `shape-outside`
* CSS shapes module
* Overview of CSS shapes
* Edit Shape Paths in CSS — Firefox Developer Tools


::-moz-page - CSS: Cascading Style Sheets

::-moz-page
===========

**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-page`** CSS pseudo-element is a Mozilla extension that represents an individual page when printed or in a print preview.

Syntax
------

```css
::-moz-page {
  /\* ... \*/
}
```

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

* `::-moz-page-sequence`
* `::-moz-scrolled-page-sequence`


::backdrop - CSS: Cascading Style Sheets

::backdrop
==========

The **`::backdrop`** CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.

Try it
------

Syntax
------

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

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

Backdrops appear in the following instances:

* Elements which have been placed in fullscreen mode using the Fullscreen API `Element.requestFullscreen()` method.
* `<dialog>` elements that have been shown in the top layer via a `HTMLDialogElement.showModal()` call.
* Popover elements that have been shown in the top layer via a `HTMLElement.showPopover()` call.

When multiple elements have been placed into the top layer, each one has its own `::backdrop` pseudo-element.

```css
/\* Backdrop is only displayed when dialog is opened with dialog.showModal() \*/
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}
```

Elements are placed in a last-in/first out (LIFO) stack in the top layer. The `::backdrop` pseudo-element makes it possible to obscure, style, or completely hide everything located below a top layer element.

`::backdrop` neither inherits from nor is inherited by any other elements. No restrictions are made on what properties apply to this pseudo-element.

Examples
--------

### Styling the backdrop for fullscreen video

In this example, the backdrop style used when a video is shifted to fullscreen mode is configured to be a grey-blue color rather than the black it defaults to in most browsers.

```css
video::backdrop {
  background-color: #448;
}
```

The resulting screen looks like this:

![An almost full-screen video player with purple above and below the player as the video player doesn't completely fill the screen.](/en-US/docs/Web/CSS/::backdrop/bbb-backdrop.png)

See this example in action, after changing the color of the background cause the video to go fullscreen to see the change to the backdrop color.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

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

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

See also
--------

* `:fullscreen` pseudo-class
* `<dialog>` HTML element
* Fullscreen API
* `popover` HTML global attribute
* Popover API


acos() - CSS: Cascading Style Sheets

acos()
======

The **`acos()`** CSS function is a trigonometric function that returns the inverse cosine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an `<angle>` between `0deg` and `180deg`.

Syntax
------

```css
/\* Single <number> values \*/
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/\* Other values \*/
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));
```

### Parameter

The `acos(number)` function accepts only one value as its parameter.

`number`

A calculation which resolves to a `<number>` between `-1` and `1`.

### Return value

The inverse cosine of an `number` will always return an `<angle>` between `0deg` and `180deg`.

* If `number` is less than `-1` or greater than `1`, the result is `NaN`.
* If `number` is exactly `1`, the result is `0`.
### Formal syntax
```

<acos()> =
  acos( <calc-sum> )

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

### Rotate elements

The `acos()` function can be used to `rotate` elements as it return an `<angle>`.

#### HTML

```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```

#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```

```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(acos(1));
}
div.box-2 {
  transform: rotate(acos(0.5));
}
div.box-3 {
  transform: rotate(acos(0));
}
div.box-4 {
  transform: rotate(acos(-0.5));
}
div.box-5 {
  transform: rotate(acos(-1));
}
```

#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

See also
--------

* `sin()`
* `cos()`
* `tan()`
* `asin()`
* `atan()`
* `atan2()`


:enabled - CSS: Cascading Style Sheets

:enabled
========

The **`:enabled`** CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.

Try it
------

Syntax
------
```

:enabled
```

Examples
--------

The following example makes the color of text and button `<input>`s green when enabled, and gray when disabled. This helps the user understand which elements can be interacted with.

### HTML

```html
<form action="url\_of\_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>
```

### CSS

```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

See also
--------

* `:disabled`


CSS pseudo-elements - CSS: Cascading Style Sheets

CSS pseudo-elements
===================

The **CSS pseudo-element** module defines abstract elements that are not directly present in the document tree. These abstract elements, called pseudo-elements, represent portions of the render tree that can be selected and styled. Pseudo-elements are used to create abstractions about the document tree beyond those provided by the document tree.

Pseudo-elements are prefixed with a double colon (`::`). You add pseudo-elements to selectors (as in `p::first-line`) to target and style these faux elements.

Pseudo-elements enable targeting entities not included in HTML and sections of content that cannot be targeted otherwise without adding extra markup. Consider the placeholder of an `<input>` element. This is an abstract element and not a distinct node in the document tree. You can select this placeholder by using the `::placeholder` pseudo-element. As another example, the `::selection` pseudo-element matches the content currently highlighted by a user, allowing you to style what is matched as the user interacts with the content and changes the selection. Similarly, the `::first-line` pseudo-element targets the first line of an element, updating automatically if the character count of the first line changes, without having to query the element's line length.

Reference
---------

### Selectors

* `::after`
* `::before`
* `::file-selector-button`
* `::first-letter`
* `::first-line`
* `::grammar-error`
* `::marker`
* `::placeholder`
* `::selection`
* `::spelling-error`
* `::target-text`
### Interfaces

* `CSSPseudoElement` interface
    + `CSSPseudoElement.element` property
    + `CSSPseudoElement.type` property
### Terms

* Pseudo-element glossary term
Guides
------

CSS pseudo-elements

Alphabetical list of pseudo-elements defined by all the CSS specifications and WebVTT.

Building blocks: Pseudo-classes and pseudo-elements

Part of CSS building blocks section on selectors. This article defines what a pseudo-element is and how it can be combined with pseudo-classes and be used for generating content with `::before` and `::after` pseudo-elements.

How to create fancy boxes using pseudo-elements

Example of styling generated content using `::before` and `::after` pseudo-elements for visual effects.

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

* `::backdrop`
* Web Video Text Tracks Format (WebVTT) cues:
    + `::cue`
    + `::cue()`
    + `::cue-region`
* CSS scoping module
    + `:host`
    + `:host()`
    + `:host-context()`
    + `::slotted()`
* CSS shadow parts module
    + `::part`
* CSS selectors
    + Attribute selectors
    + Combinators
    + Class selectors
    + ID selectors
    + Type selectors
    + Pseudo-classes
    + Universal selectors
* `placeholder` attribute of the `<input>` element
* `:placeholder-shown` selector
* CSS generated content
    + `content` property
    + `quotes` property
* Text fragments
* `AnimationEvent.pseudoElement` property
* `KeyframeEffect.pseudoElement` property
* `TransitionEvent.pseudoElement` property
Specifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |

See also
--------

* Specificity
* CSS selectors module
* CSS shadow-parts module
* CSS generated content module
* CSS positioned layout module


::target-text - CSS: Cascading Style Sheets

::target-text
=============

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

The **`::target-text`** CSS pseudo-element represents the text that has been scrolled to if the browser supports text fragments. It allows authors to choose how to highlight that section of text.

```css
::target-text {
  background-color: pink;
}
```

Syntax
------

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

Examples
--------

### Highlighting text fragments

```css
::target-text {
  background-color: rebeccapurple;
  color: white;
}
```

To see this CSS in action follow the link to scroll-to-text demo.

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-target-text |

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

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

See also
--------

* Text fragments


:-moz-loading - CSS: Cascading Style Sheets

:-moz-loading
=============

**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-loading`** CSS pseudo-class is a Mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet. Note that images that are *in the process* of loading *are not* matched by this pseudo-class.

**Note:** This selector is mainly intended to be used by theme developers.

Syntax
------

```css
:-moz-loading {
  /\* ... \*/
}
```

Examples
--------

### Setting a background for images that are loading

```css
:-moz-loading {
  background-color: #aaa;
  background-image: url(loading-animation.gif) center no-repeat;
}
```

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

Not part of any standard.

See also
--------

* `:-moz-broken`, `:-moz-suppressed`, `:-moz-user-disabled`


:out-of-range - CSS: Cascading Style Sheets

:out-of-range
=============

The **`:out-of-range`** CSS pseudo-class represents an `<input>` element whose current value is outside the range limits specified by the `min` and `max` attributes.

Try it
------

This pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.

**Note:** This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be "in-range" nor "out-of-range."

Syntax
------

```css
:out-of-range {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<form action="" id="form1">
  <p>Values between 1 and 10 are valid.</p>
  <ul>
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12" />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>
```

### CSS

```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgb(0 255 0 / 25%);
}

input:out-of-range {
  background-color: rgb(255 0 0 / 25%);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

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

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

See also
--------

* `:in-range`
* Form data validation


:seeking - CSS: Cascading Style Sheets

:seeking
========

 The **`:seeking`** CSS pseudo-class selector represents an element that is playable, such as `<audio>` or `<video>`, when the playable element is seeking a playback position in the media resource.
 A resource is considered to be seeking if the user has requested playback of a specific position in the media resource, but the media element has not yet reached that position.

 Seeking is different from `:buffering` in that the media element is not currently loading data, but is instead skipping to a new position in the media resource.
 For more information, see the Media buffering, seeking, and time ranges guide.

Syntax
------

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

Examples
--------

### CSS

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

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

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

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

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

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

See also
--------

* `:buffering`
* `:muted`
* `:paused`
* `:playing`
* `:stalled`
* `:volume-locked`
* CSS selectors


hyphenate-limit-chars - CSS: Cascading Style Sheets

hyphenate-limit-chars
=====================

The **`hyphenate-limit-chars`** CSS property specifies the minimum word length to allow hyphenation of words as well as the minimum number of characters before and after the hyphen.

This property provides you with fine-grained control over hyphenation in text. This control enables you to avoid awkward hyphenations and set appropriate hyphenation for different languages, which, in turn, allows for better typography.

In the interactive example above, the default minimum word length setting of `hyphenate-limit-chars` is too large for either of the long words to be hyphenated, and so the output looks untidy. However, by choosing the other value option, the minimum word length limit is reduced. This allows both the long words to be hyphenated, making for a neater layout.

Syntax
------

```css
/\* Numeric values \*/
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4;
hyphenate-limit-chars: 10;

/\* Keyword values \*/
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;

/\* Mix of numeric and keyword values \*/
hyphenate-limit-chars: 10 auto 4;
hyphenate-limit-chars: 10 auto;
hyphenate-limit-chars: auto 3;

/\* Global values \*/
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: initial;
hyphenate-limit-chars: revert;
hyphenate-limit-chars: revert-layer;
hyphenate-limit-chars: unset;
```

The `hyphenate-limit-chars` property takes 1–3 values that can be numeric or `auto`, as explained below.

### Values

`x y z`

The first value is the minimum word length before words should be hyphenated. The second value is the minimum number of characters before the hyphen. The third value is the minimum number of characters after the hyphen.

`x y`

The first value is the minimum word length before words should be hyphenated. The second value is the minimum number of characters before the hyphen. The minimum number of characters after the hyphen will be set equal to the second value.

`x`

The value is the minimum word length before words should be hyphenated. The minimum number of characters before and after the hyphen will be set to `auto`.

If `auto` is set for any of the values, the user agent will choose an appropriate value for the current layout. Unless the user agent can calculate a better value, the following default values will be used:

* Minimum word length to allow hyphenation: 5
* Minimum number of characters before the hyphen: 2
* Minimum number of characters after the hyphen: 2

**Note:** If a word is shorter than any of the provided values, it will not be hyphenated.

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

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

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

hyphenate-limit-chars =
  [ auto | <integer> ]{1,3}

```

Examples
--------

```css
p {
  hyphens: auto;
  hyphenate-limit-chars: 10 3 4;
}
```

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

| Specification |
| --- |
| CSS Text Module Level 4 # propdef-hyphenate-limit-chars |

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

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

See also
--------

* `hyphens`
* CSS Text module


scroll-snap-stop - CSS: Cascading Style Sheets

scroll-snap-stop
================

The **`scroll-snap-stop`** CSS property defines whether or not the scroll container is allowed to "pass over" possible snap positions.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
scroll-snap-stop: normal;
scroll-snap-stop: always;

/\* Global values \*/
scroll-snap-stop: inherit;
scroll-snap-stop: initial;
scroll-snap-stop: revert;
scroll-snap-stop: revert-layer;
scroll-snap-stop: unset;
```

### Values

`normal`

When the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions.

`always`

The scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions.

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

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

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

scroll-snap-stop =
  normal  |
  always

```

Examples
--------

### Setting different snap stops

The example below demonstrates the contrast between the `always` and `normal` values of `scroll-snap-stop`. The difference in the two `scroll-snap-stop` values is more noticeable when the `scroll-snap-type` property is set to `mandatory`, which is what is used in this example.

#### HTML

```html
<p>scroll-snap-stop: always (X Mandatory)</p>
<div class="x mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on odd child elements</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on even child elements</p>
<div class="x mandatory-scroll-snapping always-stop-even">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (X Mandatory)</p>
<div class="x mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

#### CSS
```

/\* setup \*/
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
  text-align: center;
}

div[class] {
  font-size: 3rem;
  display: flex;
  overflow: auto;
  flex: none;
}

.x {
  width: 50%;
  min-width: 15rem;
  height: 6rem;
  flex-flow: row nowrap;
}

.y {
  width: 30%;
  min-width: 12rem;
  height: 12rem;
  flex-flow: column nowrap;
}

div > div {
  flex: none;
  outline: 1px solid #333;
}

.x > div {
  width: 90%;
  height: 100%;
}

.y > div {
  width: 100%;
  height: 80%;
}

/\* coloration \*/
div > div:nth-child(even) {
  background-color: #87ea87;
}

div > div:nth-child(odd) {
  background-color: #87ccea;
}
```

```css
/\* setting up mandatory scroll-snap on parent \*/
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

/\* defining scroll-snap alignment on children \*/
div > div {
  scroll-snap-align: center;
}

/\* defining scroll-snap stop on children \*/
.always-stop > div {
  scroll-snap-stop: always;
}

.always-stop-odd > div:nth-of-type(odd) {
  scroll-snap-stop: always;
}

.always-stop-even > div:nth-of-type(even) {
  scroll-snap-stop: always;
}

.normal-stop > div {
  scroll-snap-stop: normal;
}
```

#### Result

Scroll from left to right and from top to bottom in the X and Y boxes below, respectively. In the X and Y boxes where the `scroll-snap-stop` property is set to `always`, the scrolling is forced to stop at the snap point even when you scroll fast. However, in the boxes where the `scroll-snap-stop` property is set to `normal`, the snap points are skipped when you scroll fast.

If required, you can be selective about the items that are `always` stopped at inside the scroll container. This is demonstrated in the example below by targeting odd and even items; you can choose a different strategy based on your requirement. In the example below, scrolling does not "pass over" odd and even items in the second and third boxes, respectively.

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-stop |

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

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

See also
--------

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


::-webkit-progress-value - CSS: Cascading Style Sheets

::-webkit-progress-value
========================

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

The **`::-webkit-progress-value`** CSS pseudo-element represents the filled-in portion of the bar of a `<progress>` element. It is a child of the `::-webkit-progress-bar` pseudo-element.

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

Syntax
------

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

Examples
--------

This example will only work in browsers based on Blink or WebKit.

### HTML

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

### CSS

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

::-webkit-progress-value {
  background-color: orange;
}
```

### Result

### Result screenshot

A progress bar using the style above would look like this:

![A long orange and grey box. The left 20% is orange. The right 80% is grey.](/en-US/docs/Web/CSS/::-webkit-progress-value/progress-value.png)

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

Not part of any standard.

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

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

See also
--------

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


::view-transition-group - CSS: Cascading Style Sheets

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

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

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

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

The **`::view-transition-group`** CSS pseudo-element represents a single view transition group.

During a view transition, `::view-transition-group` is included in the associated pseudo-element tree as explained in The view transition process. It is only ever a child of `::view-transition`, and has a `::view-transition-image-pair` as a child.

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

```css
html::view-transition-group(\*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}
```

By default, selected elements initially mirror the size and position of the `::view-transition-old` pseudo-element representing the "old" view state, or the `::view-transition-new` pseudo-element representing the "new" view state if there isn't an "old" view state.

If there's both an "old" and "new" view state, styles in the view transition style sheet animate this pseudo-element's `width` and `height` from the size of the "old" view state's border box to that of the "new" view state's border box.

**Note:** View transition style sheet styles are dynamically generated during the view transition; see the specification setup transition pseudo-elements and update pseudo-element styles sections for more details.

In addition, the element's transform is animated from the "old" view state's screen space transform to the new view state's screen space transform. This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.

Syntax
------

```css
::view-transition-group(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` can be one of the following values:

`*`

Causes the pseudo-element to match all view transition groups.

`root`

Causes the pseudo-element to match the default `root` view transition group created by the user agent to contain the view transition for the overall page, meaning any element not assigned to its own specific view transition group via the `view-transition-name` property.

`<custom-ident>`

Causes the pseudo-element to match a specific view transition group created by assigning the given `<custom-ident>` to an element via the `view-transition-name` property.

Examples
--------

```css
view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}
```

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

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

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

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

See also
--------

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


break-before - CSS: Cascading Style Sheets

break-before
============

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

Try it
------

Syntax
------

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

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

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

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

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

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

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

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

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

### Values

#### Generic break values

`auto`

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

`avoid`

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

`always`
Experimental

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

`all`
Experimental

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

#### Page break values

`avoid-page`

Avoids any page break right before the principal box.

`page`

Forces a page break right before the principal box.

`left`

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

`right`

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

`recto`

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

`verso`

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

#### Column break values

`avoid-column`

Avoids any column break right before the principal box.

`column`

Forces a column break right before the principal box.

#### Region break values

`avoid-region`
Experimental

Avoids any region break right before the principal box.

`region`
Experimental

Forces a region break right before the principal box.

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

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

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

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

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

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

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

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

```

Examples
--------

### Breaking into neat columns

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

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

#### HTML

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

  <h2>Subheading</h2>

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

  <h2>Subheading</h2>

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

  <h2>Subheading</h2>

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

  <h2>Subheading</h2>

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

#### CSS

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

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

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

p {
  line-height: 1.5;
}

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

### Result

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

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

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

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

See also
--------

* Multiple-column Layout
* Breaking Boxes With CSS Fragmentation


Type selectors - CSS: Cascading Style Sheets

Type selectors
==============

The CSS **type selector** matches elements by node name. In other words, it selects all elements of the given type within a document.

```css
/\* All <a> elements. \*/
a {
  color: red;
}
```

Type selectors can be namespaced when using `@namespace`. This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.

* `ns|h1` - matches `<h1>` elements in namespace *ns*
* `*|h1` - matches all `<h1>` elements
* `|h1` - matches all `<h1>` elements without any declared namespace
Syntax
------

```css
element { style properties }
```

Examples
--------

### CSS

```css
span {
  background-color: skyblue;
}
```

### HTML

```html
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
```

### Result

### Namespaces

In this example the selector will only match `<h1>` elements in the example namespace.

```css
@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

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

See also
--------

* CSS Selectors
* Learn CSS: Selectors


column-span - CSS: Cascading Style Sheets

column-span
===========

The **`column-span`** CSS property makes it possible for an element to span across all columns when its value is set to `all`.

Try it
------

An element that spans more than one column is called a **spanning element**.

Syntax
------

```css
/\* Keyword values \*/
column-span: none;
column-span: all;

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

The `column-span` property is specified as one of the keyword values listed below.

### Values

`none`

The element does not span multiple columns.

`all`

The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.

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

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

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

column-span =
  none  |
  all

```

Examples
--------

### Making a heading span columns

In this example, the heading is made to span across all the columns of the article.

#### HTML

```html
<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>
```

#### CSS

```css
article {
  columns: 3;
}

h2 {
  column-span: all;
}
```

#### Result

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-span |

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

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

See also
--------

* Spanning and balancing columns
* Inline-level elements
* `HTMLSpanElement`


overlay - CSS: Cascading Style Sheets

overlay
=======

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

The **`overlay`** CSS property specifies whether an element appearing in the top layer (for example, a shown popover or modal `<dialog>` element) is actually rendered in the top layer. This property is only relevant within a list of `transition-property` values, and only if `allow-discrete` is set as the `transition-behavior`.

It is important to note that `overlay` can *only* be set by the browser — author styles cannot change the `overlay` value of any element. You can, however, add `overlay` to the list of transition properties set on an element. This causes its removal from the top layer to be deferred so it can be animated instead of disappearing immediately.

**Note:** When transitioning `overlay`, you need to set `transition-behavior: allow-discrete` on the transition so that it will animate. `overlay` animations differ from normal discrete animations in that the visible (i.e. `auto`) state will always be shown for the full duration of the transition, regardless of whether it is the start or end state.

Syntax
------

```css
/\* Keyword values \*/
overlay: auto;
overlay: none;

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

### Values

`auto`

The element is rendered in the top layer if it is promoted to the top layer.

`none`

The element is not rendered in the top layer.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Discrete behavior except when animating to or from `none` is visible for the entire duration |

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

overlay =
  none  |
  auto

```

Examples
--------

### Transitioning a popover

In this example, a popover is animated as it transitions from hidden to shown and back again.

#### HTML

The HTML contains a `<div>` element declared as a popover using the popover attribute, and a `<button>` element designated as the popover's display control using its popovertarget attribute.

```html
<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>
```

#### CSS

The `overlay` property is only present in the list of transitioned properties. As `overlay` is a user-agent controlled property, it is not declared in the pre-transition or post-transition states.

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

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;

  /\* Final state of the exit animation \*/
  opacity: 0;
  transform: scaleX(0);

  transition:
    opacity 0.7s,
    transform 0.7s,
    overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /\* Equivalent to
 transition: all 0.7s allow-discrete; \*/
}

/\* Needs to be included after the previous [popover]:popover-open
 rule to take effect, as the specificity is the same \*/
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

/\* Transition for the popover's backdrop \*/

[popover]::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /\* Equivalent to
 transition: all 0.7s allow-discrete; \*/
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/\* Nesting selectors (&) cannot represent pseudo-elements, so this
 starting-style rule cannot be nested. \*/

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}
```

The two properties we want to animate are `opacity` and `transform`): we want the popover to fade in and out while growing and shrinking in the horizontal direction. We set a starting state for these properties on the default hidden state of the popover element (selected via `[popover]`), and an end state on the open state of the popover (selected via the `:popover-open` pseudo-class). We then set a `transition` property to animate between the two.

Because the animated element is being promoted to the top layer when shown and removed from the top layer when hidden, `overlay` is added to the list of transitioned elements. This ensures that the removal of the element from the top layer is deferred until the animation has ended. This doesn't make a huge difference for simple animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. Note that the `transition-behavior: allow-discrete` value is also set in the shorthand to enable discrete transitions.

The following steps are also required to get the animation working in both directions:

* A starting state for the animation is set inside the `@starting-style` at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type. `@starting-style` allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear.
* `display` is also added to the list of transitioned elements so that the animated element is visible (set to `display: block`) throughout both the entry and exit animation. Without this, the exit animation would not be visible; in effect, the popover would just disappear. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur.

You'll note that we've also included a transition on the `::backdrop` that appears behind the popover when it opens, to provide a nice darkening animation. `[popover]:popover-open::backdrop` is needed to select the backdrop when the popover is open.

#### Result

The code renders as follows:

**Note:** Because popovers change from `display: none` to `display: block` each time they are shown, the popover transitions from its `@starting-style` styles to its `[popover]:popover-open` styles every time the entry transition occurs. When the popover closes, it transitions from its `[popover]:popover-open` state to the default `[popover]` state.

It is possible for the style transition on entry and exit to be different in such cases. See our Demonstration of when starting styles are used example for a proof of this.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # overlay |

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

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

See also
--------

* CSS transitions module
* `@starting-style`
* `transition-behavior`
* Four new CSS features for smooth entry and exit animations on developer.chrome.com (2023)


scroll-timeline-axis - CSS: Cascading Style Sheets

scroll-timeline-axis
====================

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

The **`scroll-timeline-axis`** CSS property is used to specify the scrollbar direction that will be used to provide the timeline for a *named scroll progress timeline* animation, which is progressed through by scrolling a scrollable element (*scroller*) between top and bottom (or left and right). `scroll-timeline` is set on the scroller that will provide the timeline. See CSS scroll-driven animations for more details.

**Note:** If the scroller element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress 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
/\* Logical property values \*/
scroll-timeline-axis: block;
scroll-timeline-axis: inline;
/\* Non-logical property values \*/
scroll-timeline-axis: y;
scroll-timeline-axis: x;
```

### Values

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

`block`

The scrollbar on the block axis of the scroller element, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `y`, while for vertical writing modes, it is the same as `x`. This is the default value.

`inline`

The scrollbar on the inline axis of the scroller element, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as `x`, while for vertical writing modes, this is the same as `y`.

`y`

The scrollbar on the vertical axis of the scroller element.

`x`

The scrollbar on the horizontal axis of the scroller element.

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

|  |  |
| --- | --- |
| Initial value | `block` |
| Applies to | scroll containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

scroll-timeline-axis =
  [ block | inline | x | y ]#

```

Examples
--------

### Defining the axis of the scroll progress timeline

In this example, a scroll progress timeline named `--myScroller` is defined using the `scroll-timeline-name` property on the `:root` element (`<html>`). This timeline is then applied to the animation on the element with the `animation` class using `animation-timeline: --myScroller`.

To demonstrate the effect of `scroll-timeline-axis`, a horizontal (non-default) scrollbar is used in this example to drive the animation.

#### HTML

The HTML for the example is shown below.

```html
<body>
  <div class="content"></div>
  <div class="box animation"></div>
</body>
```

#### CSS

 The CSS for the container sets the `:root` as the source of a scroll progress timeline named `--myScroller` using the `scroll-timeline-name` property.
 The scroll axis is set using `scroll-timeline-axis: x;` (Chromium) and `scroll-timeline-axis: horizontal;` (Firefox) — this causes the *horizontal scrollbar* position to determine the animation timeline.

The width of the `.content` element is set to a large value to make it overflow the `:root` element.

Also worth noting is that the `.animation` element has the timeline applied to it using `animation-timeline: --myScroller;`, and it also has an `animation-duration` applied to it so that the example will work in Firefox.

```css
:root {
  scroll-timeline-name: --myScroller;

  /\* Chromium supports the new x/y syntax \*/
  scroll-timeline-axis: x;
  /\* Firefox still supports the old horizontal/vertical syntax \*/
  scroll-timeline-axis: horizontal;
}

body {
  margin: 0;
  overflow-y: hidden;
}

.content {
  height: 100vh;
  width: 2000px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 25px;
  left: 25px;
}

.animation {
  animation: rotate-appear;
  animation-timeline: --myScroller;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    top: 0%;
  }

  to {
    rotate: 720deg;
    top: 100%;
  }
}
```

#### Result

Scroll the horizontal bar at the bottom to see the square animate as you scroll.

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

| Specification |
| --- |
| Scroll-driven Animations # propdef-scroll-timeline-axis |

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-name`
* `timeline-scope`
* CSS scroll-driven animations


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

border-block-end-style
======================

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

Try it
------

Syntax
------

```css
/\* <'border-style'> values \*/
border-block-end-style: dashed;
border-block-end-style: dotted;
border-block-end-style: groove;

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

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

### Values

`<'border-style'>`

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

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

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

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

border-block-end-style =
  <line-style>

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

```

Examples
--------

### Dashed 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-lr;
  border: 5px solid blue;
  border-block-end-style: dashed;
}
```

#### Results

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

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

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


attr() - CSS: Cascading Style Sheets

attr()
======

**Note:** The `attr()` function can be used with any CSS property, but support for properties other than `content` is experimental, and support for the type-or-unit parameter is sparse.

The **`attr()`** CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.

Try it
------

Syntax
------

```css
/\* Simple usage \*/
attr(data-count);
attr(title);

/\* With type \*/
attr(src url);
attr(data-count number);
attr(data-width px);

/\* With fallback \*/
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");
```

### Values

`attribute-name`

The name of an attribute on the HTML element referenced in the CSS.

`<type-or-unit>`
Experimental

A keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of `<type-or-unit>` as a value for the given attribute is invalid, the `attr()` expression will be invalid too. If omitted, it defaults to `string`. The list of valid values are:

`string`

The attribute value is treated as a CSS `<string>`. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.

Default value: an empty string.

`color`
Experimental

The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS `<string>` value. Leading and trailing spaces are stripped.

Default value: `currentcolor`.

`url`
Experimental

 The attribute value is parsed as a string that is used inside a CSS `url()` function.
 Relative URL are resolved relatively to the original document, not relatively to the style sheet.
 Leading and trailing spaces are stripped.

Default value: the URL `about:invalid` that points to a non-existent document with a generic error condition.

`integer`
Experimental

 The attribute value is parsed as a CSS `<integer>`. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
 Leading and trailing spaces are stripped.

Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

`number`
Experimental

 The attribute value is parsed as a CSS `<number>`. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
 Leading and trailing spaces are stripped.

Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

`length`
Experimental

 The attribute value is parsed as a CSS `<length>` dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
 If the given unit is a relative length, `attr()` computes it to an absolute length.
 Leading and trailing spaces are stripped.

Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

`em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc`
Experimental

 The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<length>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
 If the given unit is a relative length, `attr()` computes it to an absolute length.
 Leading and trailing spaces are stripped.

Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

`angle`
Experimental

 The attribute value is parsed as a CSS `<angle>` dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
 Leading and trailing spaces are stripped.

Default value: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value.

`deg`, `grad`, `rad`
Experimental

 The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as an `<angle>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
 Leading and trailing spaces are stripped.

Default value: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value.

`time`
Experimental

 The attribute value is parsed as a CSS `<time>` dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
 Leading and trailing spaces are stripped.

Default value: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value.

`s`, `ms`
Experimental

 The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as an `<time>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
 Leading and trailing spaces are stripped.

Default value: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value.

`frequency`
Experimental

The attribute value is parsed as a CSS `<frequency>` dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.

Default value: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value.

`Hz`, `kHz`
Experimental

 The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<frequency>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
 Leading and trailing spaces are stripped.

Default value: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value.

`%`
Experimental

 The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<percentage>`. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
 If the given value is used as a length, `attr()` computes it to an absolute length.
 Leading and trailing spaces are stripped.

Default value: `0%`, or, if `0%` is not a valid value for the property, the property's minimum value.

`<fallback>`
Experimental

The value to be used if the associated attribute is missing or contains an invalid value. If not set, CSS will use the default value defined for each `<type-or-unit>`.

### Formal syntax
```

<attr()> =
  attr( <attr-name> <attr-type>? , <declaration-value>? )

<attr-name> =
  [ <ident-token> '|' ]? <ident-token>

<attr-type> =
  string            |
  url               |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>

```

Examples
--------

### content property

In this example, we prepend the value of the `data-foo` `data-*` global attribute to the contents of the `<p>` element.

#### HTML

```html
<p data-foo="hello">world</p>
```

#### CSS

```css
[data-foo]::before {
  content: attr(data-foo) " ";
}
```

#### Result

### color value

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

In this example, we set the CSS value of `background-color` to the value of the `data-background` `data-*` global attribute assigned to the `<div>` element.

#### HTML

```html
<div class="background" data-background="lime">
  background expected to be red if your browser does not support advanced usage
  of attr()
</div>
```

#### CSS
```

.background {
  height: 100vh;
}
```

```css
.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}
```

#### Result

### using fallback

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

In this example, we append the value of `data-browser` `data-*` global attribute to the `<p>` element. If the `data-browser` attribute is missing from the `<p>` element, we append the *fallback* value of "**Unknown**".

#### HTML

```html
<p data-browser="Firefox">My favorite browser is:</p>
<p>Your favorite browser is:</p>
```

#### CSS

```css
p::after {
  content: " " attr(data-browser, "Unknown");
  color: tomato;
}
```

#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 5 # attr-notation |

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

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

See also
--------

* Attribute selectors
* HTML `data-*` attributes
* SVG `data-*` attributes


CSS multi-column layout - CSS: Cascading Style Sheets

CSS multi-column layout
=======================

 The **CSS multi-column layout** module lets you divide content across multiple columns. By using the properties in this module, you can define the preferred number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.
Multi-column layout in action
-----------------------------

In this example, the 1967 speech from Canada's centennial, *A Lament for Confederation*, by Chief Dan George, is displayed across multiple columns, similar to the way articles are displayed in printed newspapers. If you have JavaScript enabled, controls enable changing the preferred column number and width, the width of the gap between columns, whether the title and a sample blockquote should be contained in a single column or made to span all columns, and whether breaking within the paragraphs should be avoided.

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

**Note:** Multiple-column layout is closely related to paged media. Each column box is a fragment, much like each printed page is a fragment of a document. Using the properties defined in the CSS fragmentation module, you can control how content breaks between columns and pages.

Reference
---------

### Properties

* `break-after`
* `break-before`
* `break-inside`
* `column-fill`
* `column-gap`
* `column-span`
* `column-rule` shorthand
    + `column-rule-color`
    + `column-rule-style`
    + `column-rule-width`
* `columns` shorthand
    + `column-count`
    + `column-width`

**Note:** Bear in mind that setting container height and line length can pose challenges for people with visual or cognitive disabilities. WCAG Success Criterion 1.4.8 states that even when the text size is doubled, content should not need to be scrolled.

Guides
------

Basic concepts of multi-column layout

An overview of the Multiple-column Layout specification

Styling columns

How to use column rules and manage the spacing between columns.

Spanning and balancing

How to make elements span across all columns and control the way columns are filled.

Handling overflow in multi-column layout

What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.

Handling content breaks in multi-column layout

Introduction to the Fragmentation specification and how to control where column content breaks.

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

* `orphans` CSS property
* `widows` CSS property
* `overflow` CSS property
* `gap` CSS property
* `height`, `max-height`, and `block-size` CSS properties
* `width`, `max-width`, and `inline-size` CSS properties
* `<line-style>` enumerated data type
* Block formatting context guide
Specifications
--------------

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1  |

See also
--------

* Learn: multiple-column layout
* CSS fragmentation module
* CSS flexible box layout module
* CSS grid layout module
* CSS paged media module


z-index - CSS: Cascading Style Sheets

z-index
=======

The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.

Try it
------

For a positioned box (that is, one with any `position` other than `static`), the `z-index` property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.
Syntax
------

```css
/\* Keyword value \*/
z-index: auto;

/\* <integer> values \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* Negative values to lower the priority \*/

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

The `z-index` property is specified as either the keyword `auto` or an `<integer>`.

### Values

`auto`

The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is `0`.

`<integer>`

This `<integer>` is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | an integer |
| Creates stacking context | yes |

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

z-index =
  auto       |
  <integer>  |
  inherit

```

Examples
--------

### Visually layering elements

#### HTML

```html
<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>
```

#### CSS

```css
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* put .gold-box above .green-box and .dashed-box \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* put .green-box above .dashed-box \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```

#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

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

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

See also
--------

* CSS `position` property
* Understanding CSS z-indexes