recursal/MDN huggingface dataset:
::view-transition-image-pair
============================

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-image-pair`** CSS pseudo-element represents a container for a view transition's "old" and "new" view states — before and after the transition.

During a view transition, `::view-transition-image-pair` is included in the associated pseudo-element tree as explained in The view transition process. It is only ever a child of a `::view-transition-group`. In terms of children, it can have a `::view-transition-new` or a `::view-transition-old`, or both.

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


```css
html::view-transition-image-pair(\*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```


During a view transition, `::view-transition-image-pair` has `isolation: isolate` set on it in the view transition style sheet so that its children can be blended with non-normal blend modes without affecting other visual outputs.

Syntax
------


```css
::view-transition-image-pair(<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-image-pair(root) {
  isolation: auto;
}
```

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

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

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
-moz-user-input
===============

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

In Mozilla applications, **`-moz-user-input`** determines if an element will accept user input.

For elements that normally take user input, such as a `<textarea>`, the initial value of `-moz-user-input` is `enabled`.

**Note:** `-moz-user-input` was one of the proposals leading to the proposed CSS 3 `user-input` property, which has not yet reached Candidate Recommendation (call for implementations). A similar property, `user-focus`, was proposed in early drafts of a predecessor of the User Interface for CSS3 specification, but was rejected by the working group.

Syntax
------


```css
/\* Keyword values \*/
-moz-user-input: none;
-moz-user-input: enabled;
-moz-user-input: disabled;

/\* Global values \*/
-moz-user-input: inherit;
-moz-user-input: initial;
-moz-user-input: unset;
```

### Values

`none` 
Deprecated

Non-standard

The element does not respond to user input, and it does not become `:active`.

`enabled` 
Deprecated

Non-standard

The element accepts user input. For textboxes, this is the default behavior. **Please note that this value is no longer supported in Firefox 60 onwards (Firefox bug 1405087).**

`disabled` 
Deprecated

Non-standard

The element does not accept user input. However, this is not the same as setting `disabled` to true, in that the element is drawn normally. **Please note that this value is no longer supported in Firefox 60 onwards (Firefox bug 1405087).**

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

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

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

-moz-user-input =
  auto | none | enabled | disabled
```

Examples
--------

### Disabling user input for an element


```css
input.example {
  /\* The user will be able to select the text, but not change it. \*/
  -moz-user-input: disabled;
}
```

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-user-focus`
* `-moz-user-modify`
* `-moz-user-select`
-webkit-mask-attachment
=======================

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

If a `mask-image` is specified, `-webkit-mask-attachment` determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.

Syntax
------


```css
/\* Keyword values \*/
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/\* Multiple values \*/
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

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

### Values

scroll

If `scroll` is specified, the mask image scrolls within the viewport along with the block that contains the mask image.

fixed

If `fixed` is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport.

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

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

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

-webkit-mask-attachment =
  <attachment>#
```

Examples
--------

### Fixing a mask image to the viewport


```css
body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}
```

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

* `mask`
* `mask-clip`
* `-webkit-mask-box-image`
* `mask-origin`
* `mask-image`
* `-webkit-mask-composite`
* `mask-repeat`
mask-clip
=========

The **`mask-clip`** CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.

Syntax
------


```css
/\* <coord-box> values \*/
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/\* Keyword values \*/
mask-clip: no-clip;

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

/\* Multiple values \*/
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

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


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

### Values

`content-box`

The painted content is clipped to the content box.

`padding-box`

The painted content is clipped to the padding box.

`border-box`

The painted content is clipped to the border box.

`fill-box`

The painted content is clipped to the object bounding box.

`stroke-box`

The painted content is clipped to the stroke bounding box.

`view-box`

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

`no-clip`

The painted content is not clipped.

`border` 
Non-standard

This keyword behaves the same as `border-box`.

`padding` 
Non-standard

This keyword behaves the same as `padding-box`.

`content` 
Non-standard

This keyword behaves the same as `content-box`.

`text` 
Non-standard

This keyword clips the mask image to the text of the element.

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

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

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

mask-clip =   
  [ <coord-box> | no-clip ]#    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

Examples
--------

### Clipping a mask to the border box

Change the `mask-clip` value to any of the allowed values detailed above. If viewing the example in a Chromium-based browser change the value of `-webkit-mask-clip`.

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

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

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

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

See also
--------

* Clipping and Masking in CSS
empty-cells
===========

The **`empty-cells`** CSS property sets whether borders and backgrounds appear around `<table>` cells that have no visible content.

Try it
------

This property has an effect only when the `border-collapse` property is `separate`.

Syntax
------


```css
/\* Keyword values \*/
empty-cells: show;
empty-cells: hide;

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


The `empty-cells` property is specified as one of the keyword values listed below.

### Values

`show`

Borders and backgrounds are drawn like in normal cells.

`hide`

No borders or backgrounds are drawn.

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

|  |  |
| --- | --- |
| Initial value | `show` |
| Applies to | table-cell elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

empty-cells =   
  show  |  
  hide    
  
```

Examples
--------

### Showing and hiding empty table cells

#### HTML


```html
<table class="table\_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table\_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
```


#### CSS


```css
.table\_1 {
  empty-cells: show;
}

.table\_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}
```


#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # empty-cells |

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

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

See also
--------

* `border-collapse`
* Styling tables
:paused
=======

The **`:paused`** CSS pseudo-class selector represents an element that is playable, such as `<audio>` or `<video>`, when that element is "paused" (i.e. not "playing").

 A resource is paused if the user explicitly paused it, or if it is in a non-activated or other non-playing state, like "loaded, hasn't been activated yet".
 This is different from `:buffering` or `:stalled`, which are states that occur while the resource is considered "playing".

Syntax
------


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

Examples
--------

### CSS


```css
:paused {
  border: 5px solid orange;
}
```

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

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

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

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

See also
--------

* `:buffering`
* `:muted`
* `:playing`
* `:seeking`
* `:stalled`
* `:volume-locked`
* CSS selectors
mask-border-mode
================

The **`mask-border-mode`** CSS property specifies the blending mode used in a mask border.

Syntax
------


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

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

### Values

`luminance`

The luminance values of the mask border image are used as the mask values.

`alpha`

The alpha values of the mask border image are used as the mask values.

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

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

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

mask-border-mode =   
  luminance  |  
  alpha        
  
```

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

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

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

This property is not supported by any browser yet.

See also
--------

* `mask-border`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`
:volume-locked
==============

The **`:volume-locked`** CSS pseudo-class selector represents an element that is capable of making sound, such as `<audio>` or `<video>`, but the audio volume of the media element is currently "locked" by the user.

 User agents may set media `muted` or `volume` values according to user preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise).
 An element that is `:volume-locked` cannot be muted, un-muted, or have its volume changed via JavaScript. The locked status is an operating system or user agent preference.

Syntax
------


```css
:volume-locked {
  /\* ... \*/
}
```

Examples
--------

### CSS


```css
:volume-locked {
  border: 5px solid green;
}

video:volume-locked {
  border: 5px solid aqua;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # selectordef-volume-locked |

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

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

See also
--------

* `:buffering`
* `:muted`
* `:paused`
* `:playing`
* `:seeking`
* `:stalled`
* CSS selectors
* `volume` property of `HTMLMediaElement` objects
::-moz-color-swatch
===================

**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-color-swatch`** CSS pseudo-element is a Mozilla extension that represents the color selected in an `<input>` of `type="color"`.

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

Syntax
------


```css
::-moz-color-swatch {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<input type="color" value="#de2020" />
```

### CSS


```css
input[type="color"]::-moz-color-swatch {
  border-radius: 10px;
  border-style: none;
}
```

### Result

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

Not part of any standard.

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

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

See also
--------

* Similar pseudo-elements used by other browsers:
    + `::-webkit-color-swatch`, pseudo-element supported by WebKit and Blink (Safari, Chrome, and Opera)
@color-profile
==============

The **`@color-profile`** CSS at-rule defines and names a color profile which can later be used in the `color()` function to specify a color.

Syntax
------


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

### Descriptors

`src`

Specifies the URL to retrieve the color-profile information from.

`rendering-intent`

If the color profile contains more than one rendering intent, this descriptor allows one to be selected as the one to use to define how to map the color to smaller gamuts than this profile is defined over.

If used, it must be one of the following keywords:

`relative-colorimetric`

Media-relative colorimetric is required to leave source colors that fall inside the destination medium gamut unchanged relative to the respective media white points. Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.

`absolute-colorimetric`

ICC-absolute colorimetric is required to leave source colors that fall inside the destination medium gamut unchanged relative to the adopted white (a perfect reflecting diffuser). Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.

`perceptual`

This method is often the preferred choice for images, especially when there are substantial differences between the source and destination (such as a screen display image reproduced on a reflection print). It takes the colors of the source image and re-optimizes the appearance for the destination medium using proprietary methods.

`saturation`

This option was created to preserve the relative saturation (chroma) of the original, and to keep solid colors pure. However, it experienced interoperability problems like the perceptual intent.


Examples
--------

This example is from the specification and demonstrates using offset printing to ISO 12647-2:2004 using the CGATS/SWOP TR005 2007 characterization data on grade 5 paper with an ink limit of 300% Total Area Coverage, and medium gray component replacement (GCR).

The `src` descriptor specifies the URL to retrieve the color-profile information from.


```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
.header {
  background-color: color(--swop5c 0% 70% 20% 0%);
}
```

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

@color-profile =   
  @color-profile [ <dashed-ident> | device-cmyk ] { <declaration-list> }    
  
```

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

| Specification |
| --- |
| CSS Color Module Level 5 # at-profile |

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

There is no browser implementing this feature.
overflow-clip-margin
====================

The **`overflow-clip-margin`** CSS property determines how far outside its bounds an element with `overflow: clip` may be painted before being clipped. The bound defined by this property is called the *overflow clip edge* of the box.

Syntax
------


```css
/\* <length> values \*/
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

/\* <visual-box> | <length> \*/
overflow-clip-margin: content-box 5px;

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


The `<visual-box>` value, which defaults to `padding-box`, specifies the box edge to use as the overflow clip edge origin. The `<length>` value specified in `overflow-clip-margin` must be nonnegative.

**Note:** If the element does not have `overflow: clip` then this property will be ignored.

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

|  |  |
| --- | --- |
| Initial value | `0px` |
| Applies to | all elements |
| Inherited | no |
| Computed value | the computed <length> and a <visual-box> keyword |
| Animation type | discrete |

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

overflow-clip-margin =   
  <visual-box>    ||  
  <length [0,∞]>    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

Examples
--------

### HTML


```html
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
</div>
```

### CSS


```css
.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}
```

### Result

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-clip-margin |

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

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

See also
--------

* Related CSS properties: `text-overflow`, `white-space`, `overflow`, `overflow-inline`, `overflow-x`, `overflow-y`, `clip`, `display`
:past
=====

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


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

Syntax
------


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

Examples
--------

### CSS


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

### HTML


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

### WebVTT
```

WEBVTT FILE

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

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

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

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

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

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

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

See also
--------

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