recursal/MDN huggingface dataset:
inset
=====

The **`inset`** CSS property is a shorthand that corresponds to the `top`, `right`, `bottom`, and/or `left` properties. It has the same multi-value syntax of the `margin` shorthand.

Try it
------

While part of the *CSS Logical Properties* specification, it does not define *logical* offsets. It defines *physical* offsets, regardless of the element's writing mode, directionality, and text orientation.

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

This property is a shorthand for the following CSS properties:

* `top`
* `right`
* `bottom`
* `left`
Syntax
------


```css
/\* <length> values \*/
inset: 10px; /\* value applied to all edges \*/
inset: 4px 8px; /\* top/bottom left/right \*/
inset: 5px 15px 10px; /\* top left/right bottom \*/
inset: 2.4em 3em 3em 3em; /\* top right bottom left \*/

/\* <percentage>s of the width (left/right) or height (top/bottom) of the containing block \*/
inset: 10% 5% 5% 5%;

/\* Keyword value \*/
inset: auto;

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

### Values

The `inset` property takes the same values as the `left` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `top`: `auto`
* `bottom`: `auto`
* `left`: `auto`
* `right`: `auto`
 |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| Computed value | as each of the properties of the shorthand:* `top`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `bottom`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `left`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `right`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length, percentage or calc(); |

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

inset =   
  <'top'>{1,4}    
  
```

Examples
--------

### Setting offsets for an element

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset |

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

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

See also
--------

* The longhand box offset properties: `top`, `right`, `bottom`, and `left`.
* The mapped logical shorthands: `inset-block` and `inset-inline`
* The `margin` shorthand multi-value syntax.
<time>
======

The **`<time>`** CSS data type represents a time value expressed in seconds or milliseconds. It is used in `animation`, `transition`, and related properties.

Syntax
------

The `<time>` data type consists of a `<number>` followed by one of the units listed below. Optionally, it may be preceded by a single `+` or `-` sign. As with all dimensions, there is no space between the unit literal and the number.

**Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0s` or `0ms`.

### Units

`s`

Represents a time in seconds. Examples: `0s`, `1.5s`, `-60s`.

`ms`

Represents a time in milliseconds. Examples: `0ms`, `150.25ms`, `-60000ms`.


**Note:** Conversion between `s` and `ms` follows the logical `1s` = `1000ms`.

Examples
--------

### Valid times
```

12s         Positive integer
-456ms      Negative integer
4.3ms       Non-integer
14mS        The unit is case-insensitive, although capital letters are not recommended.
+0s         Zero with a leading + and a unit
-0ms        Zero with a leading - and a unit
```

### Invalid times
```

0           Although unitless zero is allowed for <length>s, it's invalid for <time>s.
12.0        This is a <number>, not a <time>, because it's missing a unit.
7 ms        No space is allowed between the number and the unit.
```

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

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

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

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

See also
--------

* `<time-percentage>`
* CSS Values and Units
scroll-margin-bottom
====================

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

Try it
------

Syntax
------


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

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

### Values

`<length>`

An outset from the bottom edge of the scroll container.

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

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

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

scroll-margin-bottom =   
  <length>    
  
```

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

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

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
<calc-sum>
==========

The **`<calc-sum>`** CSS data type represents an expression which performs a calculation in any CSS math function. The expression executes a basic arithmetic operation of addition and subtraction between two values.

Syntax
------

The `<calc-sum>` type defines two numeric values and one of the following arithmetic operators between them.

`+`

Adds two numbers together.

`-`

Subtracts the right number from the left.

### Formal syntax
```

<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          
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
```

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

The operands in the expression may be any `<length>` syntax value. You can use `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>`.

Different unit types can be used in a single expression. For example, subtracting `px` from `%`, as in `calc(100% - 10px)`, is a valid expression.

Including CSS variables in `calc-sum` expressions is also allowed. The following code `calc(10px + var(--variable))`, is a valid expression.

The `+` and `-` operators **must be surrounded by whitespace**. For instance, `calc(50% -8px)` will be parsed as a percentage followed by a negative length — an invalid expression — while `calc(50% - 8px)` is a percentage followed by a subtraction operator and a length. Likewise, `calc(8px + -50%)` is treated as a length followed by an addition operator and a negative percentage.

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

#### No specification found

No specification data found for `css.types.calc-sum`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* `<calc-product>`
* `<calc-value>`
* `<calc-constant>`
:-moz-handler-disabled
======================

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

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

Syntax
------


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

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

Not part of any standard.

See also
--------

* `:-moz-handler-blocked`
* `:-moz-handler-crashed`
math-shift
==========

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

The `math-shift` property indicates whether superscripts inside MathML formulas should be raised by a normal or compact shift.

Syntax
------


```css
/\* Keyword values \*/
math-shift: normal;
math-shift: compact;

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

### Values

`normal`

The initial value, indicates normal rendering. Superscripts in MathML formulas use the superscriptShiftUp parameter from the OpenType MATH table.

`compact`

Indicates compact rendering. Superscripts in MathML formulas use the superscriptShiftUpCramped parameter from the OpenType MATH table, which is generally smaller.

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

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

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

math-shift =   
  normal   |  
  compact    
  
```

Examples
--------

### CSS


```css
math {
  math-shift: compact;
}
```

### MathML

The following MathML displays two versions of "x squared" using a font with an OpenType MATH table. Browser implementing the `math-shift` property should raise the superscripts using slightly different shifts.


```html
<math style="font-size: 64pt;">
  <msup style="math-shift: normal">
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <msup style="math-shift: compact">
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>
```

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

| Specification |
| --- |
| MathML Core # the-math-shift |

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

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

See also
--------

* `math-depth`
* `font-size`
@charset
========

The **`@charset`** CSS rule specifies the character encoding used in the style sheet. Although the first character in `@charset` is the `@` symbol, it is not an at-rule. The CSS syntax module deprecates this rule, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked, but it is fully supported in all browsers.

The following assertions apply to valid `@charset` usage:

* The `@charset` rule must be the first element in the style sheet and not be preceded by any character.
* `@charset` is not a nested statement and therefore cannot be used inside conditional group at-rules.
* If several `@charset` at-rules are defined, only the first one is used.
* `@charset` cannot be used inside a `style` attribute on an HTML element or inside the `<style>` element where the character set of the HTML page is relevant.


```css
@charset "utf-8";
```


This at-rule is useful when using non-ASCII characters in some CSS properties, like `content`.

As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result):

1. The value of the Unicode byte-order character placed at the beginning of the file.
2. The value given by the `charset` attribute of the `Content-Type:` HTTP header or the equivalent in the protocol used to serve the style sheet.
3. The `@charset` CSS at-rule.
4. Use the character encoding defined by the referring document: the `charset` attribute of the `<link>` element. This method is obsolete and should not be used.
5. Assume that the document is UTF-8.
Syntax
------


```css
@charset "UTF-8";
@charset "iso-8859-15";
```

### Formal syntax
```

@charset "<charset>";
```


*charset*

A `<string>` denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the IANA-registry, and must be double-quoted, following exactly one space character (U+0020), and immediately terminated with a semicolon. If several names are associated with an encoding, only the one marked with *preferred* must be used.

Examples
--------

### Valid and invalid charset declarations


```css
@charset "UTF-8"; /\* Set the encoding of the style sheet to Unicode UTF-8 \*/
```



```css
@charset 'iso-8859-15'; /\* Invalid, wrong quotes used \*/
@charset "UTF-8"; /\* Invalid, more than one space \*/
 @charset "UTF-8"; /\* Invalid, there is a character (a space) before the at-rule \*/
@charset UTF-8; /\* Invalid, the charset is a CSS <string> and requires double-quotes \*/
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

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

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

See also
--------

* Character set glossary entry
* Unicode glossary entry
Initial value
=============

The **initial value** of a CSS property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not:

* For inherited properties, the initial value is used on the *root element only*, as long as no specified value is supplied.
* For non-inherited properties, the initial value is used on *all elements*, as long as no specified value is supplied.

You can explicitly specify the initial value by using the `initial` keyword.

**Note:** The initial value should not be confused with the value specified by the browser's style sheet.

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

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

See also
--------

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

The **CSS positioned layout** module defines how to position elements on a web page.

Reference
---------

### Properties

* `top`
* `right`
* `bottom`
* `left`
* `inset`
* `inset-inline`
* `inset-inline-start`
* `inset-inline-end`
* `inset-block`
* `inset-block-start`
* `inset-block-end`
* `float`
* `clear`
* `position`
* `z-index`
* `transform`
Guides
------

Understanding z-index

Presents the notion of stacking context and explains how z-ordering works, with several examples.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |
<frequency>
===========

The **`<frequency>`** CSS data type represents a frequency dimension, such as the pitch of a speaking voice. It is not currently used in any CSS properties.

Syntax
------

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

### Units

`Hz`

Represents a frequency in hertz. Examples: `0Hz`, `1500Hz`, `10000Hz`.

`kHz`

Represents a frequency in kilohertz. Examples: `0kHz`, `1.5kHz`, `10kHz`.


**Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0Hz` or `0kHz`. Though the units are case-insensitive, it is good practice to use a capital "H" for `Hz` and `kHz`, as specified in the SI.

Examples
--------

Valid frequency values:
```

12Hz     Positive integer
4.3Hz    Non-integer
14KhZ    The unit is case-insensitive, though non-SI capitalization is not recommended.
+0Hz     Zero, with a leading + and a unit
-0kHz    Zero, with a leading - and a unit
```


Invalid frequency values:
```

12.0     This is a <number>, not an <frequency>, because it is missing a unit.
7 Hz     No space is allowed between the number and the unit.
0        Although unitless zero is an allowable <length>, it's an invalid <frequency>.
```

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

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

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

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

See also
--------

* `<frequency-percentage>`
* CSS Values and Units
:visited
========

The **`:visited`** CSS pseudo-class applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The `:visited` pseudo-class applies only to `<a>` and `<area>` elements that have an `href` attribute.

Try it
------

Styles defined by the `:visited` and unvisited `:link` pseudo-classes can be overridden by any subsequent user-action pseudo-classes (`:hover` or `:active`) that have at least equal specificity. To style links appropriately, put the `:visited` rule after the `:link` rule but before the `:hover` and `:active` rules, as defined by the *LVHA-order*: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive.

Privacy restrictions
--------------------

For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

* Allowable CSS properties are `color`, `background-color`, `border-color`, `border-bottom-color`, `border-left-color`, `border-right-color`, `border-top-color`, `column-rule-color`, `outline-color`, `text-decoration-color`, and `text-emphasis-color`.
* Allowable SVG attributes are `fill` and `stroke`.
* The alpha component of the allowed styles will be ignored. The alpha component of the element's non-`:visited` state will be used instead. In Firefox when the alpha component is `0`, the style set in `:visited` will be ignored entirely.
* Although these styles can change the appearance of colors to the end user, the `window.getComputedStyle` method will lie and always return the value of the non-`:visited` color.
* The `<link>` element is never matched by `:visited`.

**Note:** For more information on these limitations and the reasons behind them, see Privacy and the :visited selector.

Syntax
------


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

Examples
--------

Properties that would otherwise have no color or be transparent cannot be modified with `:visited`. Of the properties that can be set with this pseudo-class, your browser probably has a default value for `color` and `column-rule-color` only. Thus, if you want to modify the other properties, you'll need to give them a base value outside the `:visited` selector.

### HTML


```html
<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>
```

### CSS


```css
a {
  /\* Specify non-transparent defaults to certain properties,
 allowing them to be styled with the :visited state \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

See also
--------

* Privacy and the :visited selector
* Link-related pseudo-classes: `:link`, `:active`, `:hover`
CSS color adjustment
====================

The **CSS color adjustment** module provides a model and controls automatic color adjustment by the user agent to handle user preferences, such as "Dark Mode", contrast adjustment, and other color scheme preferences.

Together with the `@media` features `prefers-color-scheme`, `prefers-contrast` and `forced-colors`, this module defines how and when colors are automatically adjusted by the browser.

Reference
---------

### Properties

* `color-scheme`
* `forced-color-adjust`
* `print-color-adjust`
Related concepts
----------------

* `<color>` CSS data type
* Related `@media` features:
    + `prefers-color-scheme`
    + `prefers-contrast`
    + `forced-colors`
* Properties affected by forced colors mode
    + `accent-color`
    + `background-color`
    + `background-image`
    + `border-color`
    + `box-shadow`
    + `caret-color`
    + `color`
    + `color-scheme`
    + `column-rule-color`
    + `fill`
    + `flood-color`
    + `lighting-color`
    + `outline-color`
    + `scrollbar-color`
    + `stop-color`
    + `stroke`
    + `text-decoration-color`
    + `text-emphasis-color`
    + `text-shadow`
    + `-webkit-tap-highlight-color`
Specifications
--------------

| Specification |
| --- |
| CSS Color Adjustment Module Level 1  |

See also
--------

* CSS colors module
::-webkit-meter-suboptimum-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-meter-suboptimum-value`** pseudo-element styles the `<meter>` element when the value attribute falls outside of the low-high range and is not equivalent to the optimum value.

Yellow is the default color.

Syntax
------


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

Examples
--------

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

### HTML


```html
Normal:
<meter min="0" max="10" low="3" high="7" optimum="6" value="2">
  Score 2/10
</meter>
<br />
Styled:
<meter id="styled" min="0" max="10" low="3" high="7" optimum="6" value="2">
  Score 2/10
</meter>
```

### CSS


```css
body {
  font-family: monospace;
}

.safari meter {
  /\* Reset the default appearance for Safari only \*/
  /\* .safari class is added via JavaScript \*/
  -webkit-appearance: none;
}

#styled::-webkit-meter-suboptimum-value {
  background: linear-gradient(to bottom, #ff7, #990 45%, #990 55%, #ff7);
  height: 100%;
  box-sizing: border-box;
}
```

### JavaScript


```js
// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-\*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.

const is_safari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (is_safari) {
  document.body.classList.add("safari");
}
```

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

The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-optimum-value`