recursal/MDN huggingface dataset:
Custom properties (--\*): CSS variables
=======================================

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

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

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

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

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

Syntax
------


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


`<declaration-value>`

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


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

Example
-------

### HTML


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

### CSS


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

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

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

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

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

### Result

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

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

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

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

See also
--------

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

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


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


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


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


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


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

Syntax
------


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


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

Examples
--------

### A table of contents

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

#### HTML


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

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


#### CSS


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

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

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


#### Result

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

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

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

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

See also
--------

* Using the :target pseudo-class in selectors
:future
=======

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


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

Syntax
------


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

Examples
--------

### CSS


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

### HTML


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

### WebVTT
```

WEBVTT FILE

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

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

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

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

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

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

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

See also
--------

* Web Video Text Tracks Format (WebVTT)
* `:current`
* `:past`
mask-mode
=========

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

Syntax
------


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

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

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


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

### Values

`alpha`

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

`luminance`

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

`match-source`

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

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

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

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

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

mask-mode =   
  <masking-mode>#    
  
<masking-mode> =   
  alpha         |  
  luminance     |  
  match-source    
  
```

Examples
--------

### Using alpha mask mode

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

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

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

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

See also
--------

* Clipping and Masking in CSS
fit-content
===========

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

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

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

Syntax
------


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

Examples
--------

### Using fit-content for box sizing

#### HTML


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


#### CSS


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

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


#### Result

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

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

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

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

See also
--------

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

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


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

Syntax
------


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

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

Examples
--------

### CSS


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

### HTML


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

### WebVTT
```

WEBVTT FILE

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

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

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

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

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

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

There is no browser implementing this feature.

See also
--------

* Web Video Text Tracks Format (WebVTT)
* `:past`
* `:future`
::-moz-range-progress
=====================

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

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

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

Syntax
------


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

Examples
--------

### HTML


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

### CSS


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

### Result

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

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

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

Not part of any standard.

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

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

See also
--------

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

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

Try it
------

Syntax
------


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

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

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

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

### Values

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

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

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

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

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

Examples
--------

### Setting block start offset

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block-start: 20px;
  background-color: #c8c800;
}
```


#### Result

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

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

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

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

See also
--------

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

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

Try it
------

Syntax
------

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

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

### Units

`deg`

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

`grad`

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

`rad`

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

`turn`

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

Examples
--------

### Setting a clockwise right angle

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

### Setting a flat angle

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

### Setting a counterclockwise right angle

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

### Setting a null angle

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

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

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

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

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

See also
--------

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

The **`text-orientation`** CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when `writing-mode` is not `horizontal-tb`). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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


The `text-orientation` property is specified as a single keyword from the list below.

### Values

`mixed`

Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value.

`upright`

Lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword causes all characters to be considered as left-to-right: the used value of `direction` is forced to be `ltr`.

`sideways`

Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.

`sideways-right`

An alias to `sideways` that is kept for compatibility purposes.

`use-glyph-orientation`

On SVG elements, this keyword leads to use the value of the deprecated SVG properties `glyph-orientation-vertical` and `glyph-orientation-horizontal`.

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

|  |  |
| --- | --- |
| Initial value | `mixed` |
| Applies to | all elements, except table row groups, rows, column groups, and columns |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |

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

text-orientation =   
  mixed     |  
  upright   |  
  sideways    
  
```

Examples
--------

### HTML


```html
<p>Lorem ipsum dolet semper quisquam.</p>
```

### CSS


```css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```

### Result

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-orientation |

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

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

See also
--------

* The other vertical-script related CSS properties: `writing-mode`, `text-combine-upright`, and `unicode-bidi`.
* CSS Logical properties
* Styling vertical text (Chinese, Japanese, Korean and Mongolian)
* Extensive browsers support test results: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text\_orientation
forced-color-adjust
===================

The **`forced-color-adjust`** CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.

Syntax
------


```css
forced-color-adjust: auto;
forced-color-adjust: none;

/\* Global values \*/
forced-color-adjust: inherit;
forced-color-adjust: initial;
forced-color-adjust: revert;
forced-color-adjust: revert-layer;
forced-color-adjust: unset;
```


The `forced-color-adjust` property's value must be one of the following keywords.

### Values

`auto`

The element's colors are adjusted by the user agent in forced colors mode. This is the default.

`none`

The element's colors are not automatically adjusted by the user agent in forced colors mode.

Usage notes
-----------

This property should only be used to makes changes that will support a user's color and contrast requirements. For example, if you become aware that the color optimizations made by the user agent result in a poor experience when in a high contrast or dark mode. Using this property would enable tweaking of the result in that mode to provide a better experience. **It should not be used to prevent user choices being respected**.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements and text |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |

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

forced-color-adjust =   
  auto                   |  
  none                   |  
  preserve-parent-color    
  
```

Examples
--------

### Preserving colors

In the example below the first box will use the color scheme that the user has set. For example in Windows High Contrast mode black scheme it will have a black background and white text. The second box will preserve the site colors set on the `.box` class.

By using the `forced-colors` media feature you could add any other optimizations for forced color mode alongside the `forced-color-adjust` property.

#### CSS


```css
.box {
  border: 5px solid grey;
  background-color: #ccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}
```


#### HTML


```html
<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>
```


#### Result

The following screenshot shows the image above in Windows High Contrast Mode:

![The example above in high contrast mode shows the first box with a black background the second with the grey background of the CSS.](/en-US/docs/Web/CSS/forced-color-adjust/windows-high-contrast.jpg)

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

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # forced-color-adjust-prop |

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

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

See also
--------

* Applying color to HTML elements using CSS
* Styling for Windows high contrast with standards for forced colors.
* `print-color-adjust`
:-moz-handler-blocked
=====================

**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-handler-blocked`** CSS pseudo-class is a Mozilla extension that matches elements that can't be displayed because their handlers have been blocked.

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

Syntax
------


```css
:-moz-handler-blocked {
  /\* ... \*/
}
```

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

Not part of any standard.

See also
--------

* `:-moz-handler-crashed`
* `:-moz-handler-disabled`