recursal/MDN huggingface dataset:
<dashed-ident>
==============

The **`<dashed-ident>`** CSS data type denotes an arbitrary string used as an identifier.

Syntax
------

The syntax of `<dashed-ident>` is similar to CSS identifiers (such as property names), except that it is case-sensitive. It starts with two dashes, followed by the user-defined identifier.

The double dash at the beginning makes them easily identifiable when reading through a CSS code block, and helps to avoid name clashes with standard CSS keywords.

Just like `<custom-ident>` `<dashed-ident>`s are defined by the user, but unlike `<custom-ident>` CSS will never define a `<dashed-ident>`.

Examples
--------

### Using with CSS custom properties

When `<dashed-ident>` is used with CSS custom properties, the property is declared first and then used within a CSS var() function.


```css
html {
  --primary-color: red;
  --secondary-color: blue;
  --tertiary-color: green;
}

h1,
h4 {
  color: var(--primary-color);
}

h2,
h5 {
  color: var(--secondary-color);
}

h3,
h6 {
  color: var(--tertiary-color);
}
```

### Using with @color-profile

When `<dashed-ident>` is used with the @color-profile at-rule, the at-rule is declared first and then used within a CSS color() function.


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

.header {
  background-color: color(--my-color-profile 0% 70% 20% 0%);
}
```

### Using with @font-palette-values

When `<dashed-ident>` is used with the @font-palette-values at-rule, the at-rule is declared first and then used as the value for the font-palette property.


```css
@font-palette-values --my-palette {
  font-family: Bixa;
  base-palette: 1;
  override-colors: 0 #ff0000;
}

h1,
h2,
h3,
h4 {
  font-palette: --my-palette;
}
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # dashed-idents |

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

*As this type is not a real type but a convenience type used to simplify the definition of other CSS syntax, there is no browser compatibility information as such.*

See also
--------

* <ident>
* <custom-ident>
<dimension>
===========

The **`<dimension>`** CSS data type represents a `<number>` with a unit attached to it, for example `10px`.

CSS uses dimensions to specify distances (`<length>`), durations (`<time>`), frequencies (`<frequency>`), resolutions (`<resolution>`), and other quantities.

Syntax
------

The syntax of `<dimension>` is a `<number>` immediately followed by a unit which is an identifier. Unit identifiers are case insensitive.

Examples
--------

### Valid dimensions
```

12px      12 pixels
1rem      1 rem
1.2pt     1.2 points
2200ms    2200 milliseconds
5s        5 seconds
200hz     200 Hertz
200Hz     200 Hertz (values are case insensitive)
```

### Invalid dimensions
```

12 px       The unit must come immediately after the number.
12"px"      Units are identifiers and therefore unquoted.
3sec        The seconds unit is abbreviated "s" not "sec".
```

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

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

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

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

See also
--------

* CSS data types
* Learn to style HTML using CSS
* CSS distances (`<length>`), durations (`<time>`), frequencies (`<frequency>`), and resolutions (`<resolution>`)
:link
=====

The **`:link`** CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited `<a>` or `<area>` element that has an `href` attribute.

Try it
------

Styles defined by the `:link` and `:visited` 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 `:link` rule before all other link-related rules, as defined by the *LVHA-order*: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive.

**Note:** Use `:any-link` to select an element independent of whether it has been visited or not.

Syntax
------


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

Examples
--------

By default, most browsers apply a special `color` value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the `background-color` values are likely to remain, as most browsers do not set that property on visited links by default.

### HTML


```html
<a href="#ordinary-target">This is an ordinary link.</a><br />
<a href="">You've already visited this link.</a><br />
<a>Placeholder link (won't get styled)</a>
```

### CSS


```css
a:link {
  background-color: gold;
  color: green;
}
```

### Result

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

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

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

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

See also
--------

* Link-related pseudo-classes: `:visited`, `:hover`, `:active`
max-inline-size
===============

The **`max-inline-size`** CSS property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the `max-width` or the `max-height` property, depending on the value of `writing-mode`.

If the writing mode is vertically oriented, the value of `max-inline-size` relates to the maximal height of the element; otherwise, it relates to the maximal width of the element. A related property is `max-block-size`, which defines the other dimension of the element.

Try it
------

Syntax
------


```css
/\* <length> values \*/
max-inline-size: 300px;
max-inline-size: 25em;

/\* <percentage> values \*/
max-inline-size: 75%;

/\* Keyword values \*/
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content;
max-inline-size: fit-content(20em);

/\* Global values \*/
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: revert;
max-inline-size: revert-layer;
max-inline-size: unset;
```

### Values

The `max-inline-size` property takes the same values as the `max-width` and `max-height` properties.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | same as `width` and `height` |
| Inherited | no |
| Percentages | inline-size of containing block |
| Computed value | same as `max-width` and `max-height` |
| Animation type | a length, percentage or calc(); |

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

max-inline-size =   
  <'max-width'>    
  
```

Examples
--------

### Setting maximum inline size in pixels

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-inline-size: 200px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `max-width` and `max-height`
* `writing-mode`
:-moz-suppressed
================

**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-suppressed`** CSS pseudo-class is a Mozilla extension that matches elements representing images that were suppressed because loading images from the specified site has been blocked.

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

Syntax
------


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

Examples
--------

### Styling elements that have been blocked


```css
:-moz-suppressed {
  background: yellow;
  padding: 8px;
}
```

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

Not part of any standard.

See also
--------

* `:-moz-broken`, `:-moz-loading`, `:-moz-user-disabled`
-webkit-text-fill-color
=======================

The **`-webkit-text-fill-color`** CSS property specifies the fill color of characters of text. If this property is not set, the value of the `color` property is used.

Syntax
------


```css
/\* <color> values \*/
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100 200 0);

/\* Global values \*/
-webkit-text-fill-color: inherit;
-webkit-text-fill-color: initial;
-webkit-text-fill-color: revert;
-webkit-text-fill-color: revert-layer;
-webkit-text-fill-color: unset;
```

### Values

`<color>`

The foreground fill color of the element's text content.

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

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

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

-webkit-text-fill-color =   
  <color>    
  
```

Examples
--------

### Changing the fill color

#### CSS


```css
p {
  margin: 0;
  font-size: 3em;
  -webkit-text-fill-color: green;
}
```


#### HTML


```html
<p>This text is green.</p>
```


#### Results

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-fill-color |

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

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

See also
--------

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
accent-color
============

The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.

Try it
------

Browsers that support `accent-color` currently apply it to the following HTML elements:

* `<input type="checkbox">`
* `<input type="radio">`
* `<input type="range">`
* `<progress>`

 Each user agent has an accent color, with variations to ensure legibility and
 contrast. That accent color is not used by every user-interface control nor in
 every state of the control. The `accent-color` is only applied to user-interface
 controls that use an accent color in the states where it is applicable.

Syntax
------


```css
/\* Keyword values \*/
accent-color: auto;

/\* <color> values \*/
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

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

### Values

`auto`

Represents a UA-chosen color, which should match the accent color of the platform, if any.

`<color>`

Specifies the color to be used as the accent color.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | `auto` is computed as specified and `<color>` values are computed as defined for the `color` property. |
| Animation type | by computed value type |

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

accent-color =   
  auto     |  
  <color>    
  
```

Examples
--------

### Setting a custom accent color

#### HTML


```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```


#### CSS


```css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}
```


#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # widget-accent |

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

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

See also
--------

* `background-color`, `border-color`, `caret-color`, `color`, `column-rule-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`: Other color-related properties
* `<color>`: Related data type
* `<input>`: Related HTML element
* Applying color to HTML elements using CSS
atan2()
=======

The **`atan2()`** CSS function is a trigonometric function that returns the inverse tangent of two values between `-infinity` and `infinity`. The function accepts two arguments and returns the number of radians representing an `<angle>` between `-180deg` and `180deg`.

Syntax
------


```css
/\* Two <number> values \*/
transform: rotate(atan2(3, 2));

/\* Two <dimension> values \*/
transform: rotate(atan2(1rem, -0.5rem));

/\* Two <percentage> values \*/
transform: rotate(atan2(20%, -30%));

/\* Other values \*/
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));
```

### Parameters

The `atan2(y, x)` function accepts two comma-separated values as its parameters. Each value can be a `<number>`, a `<dimension>`, or a `<percentage>`. Both values must be of the same type, although if they are `<dimension>` they can be of different units (example: `atan2(100px, 5vw)` is valid).

`y`

The y-coordinate of the point. A calculation which resolves to a `<number>`, a `<dimension>`, or a `<percentage>`.

`x`

The x-coordinate of the point. A calculation which resolves to a `<number>`, a `<dimension>`, or a `<percentage>`.

### Return value

Given two values `x` and `y`, the function `atan2(y, x)` calculates and returns the `<angle>` between the positive x-axis and the ray from the origin to the point `(x, y)`.

### Formal syntax
```

<atan2()> =   
  atan2( <calc-sum> , <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 `atan2()` 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(atan2(3, 2));
}
div.box-2 {
  transform: rotate(atan2(3%, -2%));
}
div.box-3 {
  transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
  transform: rotate(atan2(1, 0.5));
}
div.box-5 {
  transform: rotate(atan2(1rem, -0.5rem));
}
```


#### 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()`
* `acos()`
* `atan()`
::file-selector-button
======================

The **`::file-selector-button`** CSS pseudo-element represents the button of an `<input>` of `type="file"`.

Try it
------

Syntax
------


```css
selector::file-selector-button
```

Examples
--------

### Basic example

#### HTML


```html
<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>
```


#### CSS
```

form {
  display: flex;
  gap: 1em;
  align-items: center;
}
```



```css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}
```


#### Result

Note that `::file-selector-button` is a whole element, and as such matches the rules from the UA stylesheet. In particular, fonts and colors won't necessarily inherit from the `input` element.

### Fallback example

#### HTML


```html
<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>
```


#### CSS
```

form {
  display: flex;
  gap: 1em;
  align-items: center;
}
```



```css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::-ms-browse:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}
```


#### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |

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

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

See also
--------

* WebKit CSS extensions
* File and Directory Entries API
* File and Directory Entries API support in Firefox
* `<input type="file">`
user-modify
===========

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

The **`user-modify`** property has no effect in Firefox. It was originally planned to determine whether or not the content of an element can be edited by a user.

**Warning:** This property has been replaced by the `contenteditable` attribute.

Syntax
------


```css
/\* Keyword values \*/
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;

/\* Global values \*/
user-modify: inherit;
user-modify: initial;
user-modify: revert;
user-modify: unset;
```


The `-moz-user-modify` property is specified as one of the keyword values from the list below.

### Values

`read-only`

Default value. Contents are read-only.

`read-write`

The user is able to read and write contents.

`read-write-plaintext-only` 
Non-standard

Deprecated

Same as `read-write`, but rich text formatting will be lost.

`write-only`

The user is able to edit the content, but not to read it.

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

Value not found in DB!Formal syntax
-------------

Error: could not find syntax for this itemExamples
--------

### HTML


```html
<div class="readwrite">The user is able to change this text.</div>
```

### CSS


```css
.readwrite {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
}
```

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-input`
* `-moz-user-select`
border-top-color
================

The **`border-top-color`** CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties `border-color` or `border-top`.

Try it
------

Syntax
------


```css
/\* <color> values \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255 0 0);
border-top-color: hsl(100deg 50% 25% / 75%);
border-top-color: currentcolor;
border-top-color: transparent;

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


The `border-top-color` property is specified as a single value.

### Values

`<color>`

The color of the top border.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | computed color |
| Animation type | a color |

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

border-top-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### A simple div with a border

#### HTML


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

See also
--------

* The border-related CSS shorthand properties: `border`, `border-top`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-bottom-color`, and `border-left-color`.
* The other border-related CSS properties applying to the same border: `border-top-style` and `border-top-width`.
* The default `currentcolor` color value.