recursal/MDN huggingface dataset:
word-spacing
============

The **`word-spacing`** CSS property sets the length of space between words and between tags.

Try it
------

Syntax
------


```css
/\* Keyword value \*/
word-spacing: normal;

/\* <length> values \*/
word-spacing: 3px;
word-spacing: 0.3em;

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

### Values

`normal`

The normal inter-word spacing, as defined by the current font and/or the browser.

`<length>`

Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font.

Examples
--------

### HTML


```html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>
```

### CSS


```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

Accessibility concerns
----------------------

A large positive or negative `word-spacing` value will make the sentences the styling is applied to unreadable. For text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. For text styled with a large negative value, the words will overlap each other to the point where the beginning and end of each word is unrecognizable.

Legible `word-spacing` must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | refer to the width of the affected glyph |
| Computed value | absolute `<length>` |
| Animation type | a length |

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

word-spacing =   
  normal    |  
  <length>    
  
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # word-spacing-property |

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

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

See also
--------

* `letter-spacing`
padding-top
===========

The **`padding-top`** CSS property sets the height of the padding area on the top of an element.

Try it
------

An element's padding area is the space between its content and its border.

![The effect of the CSS padding-top property on the element box](/en-US/docs/Web/CSS/padding-top/padding-top.svg)

**Note:** The `padding` property can be used to set paddings on all four sides of an element with a single declaration.

Syntax
------


```css
/\* <length> values \*/
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/\* <percentage> value \*/
padding-top: 10%;

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


The `padding-top` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by `writing-mode`) of the containing block. Must be nonnegative.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

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

padding-top =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting top padding using pixels and percentages


```css
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 10px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

See also
--------

* Introduction to the CSS basic box model
* `padding-right`, `padding-bottom`, `padding-left` and the `padding` shorthand
* The mapped logical properties: `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` and the shorthands `padding-block` and `padding-inline`
:-moz-user-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-user-disabled`** CSS pseudo-class is a Mozilla extension that matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.

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

Syntax
------


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

Examples
--------

### Styling user-disabled elements


```css
:-moz-user-disabled {
  background-color: lightgray;
  padding: 8px;
}
```

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

Not part of any standard.

See also
--------

* `:-moz-broken`, `:-moz-loading`, `:-moz-suppressed`
:autofill
=========

The **`:autofill`** CSS pseudo-class matches when an `<input>` element has its value autofilled by the browser. The class stops matching if the user edits the field.

Try it
------

**Note:** The user agent style sheets of many browsers use `!important` in their `:-webkit-autofill` style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:


```css
background-color: rgb(232 240 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;
```


This means that you cannot set the `background-color`, `background-image`, or `color` in your own rules.

Syntax
------


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

Examples
--------

The following example demonstrates the use of the `:autofill` pseudo-class to change the border of a text field that has been autocompleted by the browser. For the best browser compatibility use both `:-webkit-autofill` and `:autofill`.


```css
input {
  border: 3px solid grey;
  border-radius: 3px;
}

input:-webkit-autofill {
  border: 3px solid blue;
}
input:autofill {
  border: 3px solid blue;
}
```



```html
<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>
```

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

| Specification |
| --- |
| HTML Standard # selector-autofill |

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

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

See also
--------

* Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off
* WebKit bug 66032: Allow site authors to override autofilled fields' colors.
* Mozilla bug 740979: implement `:-moz-autofill` pseudo-class on input elements with an autofilled value
* User Interface Module Level 4: more selectors
:first
======

The **`:first`** CSS pseudo-class, used with the `@page` at-rule, represents the first page of a printed document. (See `:first-child` for general first element of a node.)


```css
/\* Selects the first page when printing \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```


**Note:** You can't change all CSS properties with this pseudo-class. You can only change the margins, `orphans`, `widows`, and page breaks of the document. Furthermore, you may only use absolute-length units when defining the margins. All other properties will be ignored.

Syntax
------


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

Examples
--------

### HTML


```html
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>
```

### CSS


```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript


```js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});
```

### Result

Press the "Print!" button to print the example. The words on the first page should be somewhere around the center, while other pages will have their contents at the default position.

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

See also
--------

* `@page`
* Other page-related pseudo-classes: `:left`, `:right`
:active
=======

The **`:active`** CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

Try it
------

The `:active` pseudo-class is commonly used on `<a>` and `<button>` elements. Other common targets of this pseudo-class include elements that are *contained in* an activated element, and form elements that are being activated through their associated `<label>`.

Styles defined by the `:active` pseudo-class will be overridden by any subsequent link-related pseudo-class (`:link`, `:hover`, or `:visited`) that has at least equal specificity. To style links appropriately, put the `:active` rule after all other link-related rules, as defined by the *LVHA-order*: `:link` — `:visited` — `:hover` — `:active`.

**Note:** On systems with multi-button mice, CSS specifies that the `:active` pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.

Syntax
------


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

Examples
--------

### Active links

#### HTML


```html
<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>
```


#### CSS


```css
/\* Unvisited links \*/
a:link {
  color: blue;
}
/\* Visited links \*/
a:visited {
  color: purple;
}
/\* Hovered links \*/
a:hover {
  background: yellow;
}
/\* Active links \*/
a:active {
  color: red;
}

/\* Active paragraphs \*/
p:active {
  background: #eee;
}
```


#### Result

### Active form elements

#### HTML


```html
<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
```


#### CSS


```css
form :active {
  color: red;
}

form button {
  background: white;
}
```


#### Result

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

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

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

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

See also
--------

* Link-related pseudo-classes: `:link`, `:visited`, and `:hover`
mask-border-source
==================

The **`mask-border-source`** CSS property sets the source image used to create an element's mask border.

The `mask-border-slice` property is used to divide the source image into regions, which are then dynamically applied to the final mask border.

Syntax
------


```css
/\* Keyword value \*/
mask-border-source: none;

/\* <image> values \*/
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);

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

### Values

`none`

No mask border is used.

`<image>`

Image reference to use for the mask border.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| 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, but with `url()` values made absolute |
| Animation type | discrete |

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

mask-border-source =   
  none     |  
  <image>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

### Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the source of the border mask.


```css
mask-border-source: url(image.jpg);
```


Chromium-based browsers support an outdated version of this property — `mask-box-image-source` — with a prefix:


```css
-webkit-mask-box-image-source: url(image.jpg);
```


**Note:** The `mask-border` page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

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

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

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

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

See also
--------

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-width`
::-moz-page-sequence
====================

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

The **`::-moz-page-sequence`** CSS pseudo-element is a Mozilla extension that represents the background of a print preview.

Syntax
------


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

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

Not part of any standard.

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

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

See also
--------

* `::-moz-page`
* `::-moz-scrolled-page-sequence`
-webkit-mask-repeat-x
=====================

**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-mask-repeat-x` property specifies whether and how a mask image is repeated (tiled) horizontally.

Syntax
------


```css
/\* Keyword values \*/
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;

/\* Multiple values \*/
-webkit-mask-repeat-x: repeat, no-repeat, space;

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

### Values

repeat

The mask image is repeated both horizontally and vertically.

no-repeat

The mask image is not repeated; only one copy of the mask image is drawn. The remainder of the masked element's content is not displayed.

repeat

The mask image is repeated both horizontally and vertically.

space

The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The `mask-position` property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn't enough room to display one image.

round

As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.

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

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

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

-webkit-mask-repeat-x =
  repeat | no-repeat | space | round
```

Examples
--------

### Using a repeating or non-repeating mask image


```css
.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: repeat;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: no-repeat;
}
```

### Using multiple mask images

You can specify a different `<repeat-style>` for each mask image, separated by commas:


```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-x: repeat, space;
}
```


Each image is matched with the corresponding repeat style, from first specified to last.

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

`-webkit-mask-repeat`, `-webkit-mask-repeat-y`
Animatable CSS properties
=========================

CSS Animations and Transitions rely on the concept of **animatable** properties, and all CSS properties are animatable unless otherwise specified. Each property's *animation type* determines how values combine - interpolate, add, or accumulate - for this property. Transitions only involve interpolation, whereas animations may use all three combination methods.

**Note:** The animation type for each CSS property is listed in its "Formal definition" table (E.g., `color`).

**Note:** The interpolation method for each CSS data type is described in its "Interpolation" section (E.g., `<length>`).

Animation types
---------------

There are mainly four animation types as defined in the Web Animations specification:

Not animatable

The property is not animatable. It is not processed when listed in an animation keyframe and is unaffected by transitions.

**Note:** An animation effect targeting only properties that are not animatable will still exhibit the usual behavior for an animation effect (E.g., firing the `animationstart` event).

Discrete

The property's values are not additive, and interpolation swaps from the start value to the end value at `50%`. Specifically, denoting by `p` the progress value:

* If `p < 0.5`, then `V_result = V_start`;
* If `p ≥ 0.5`, then `V_result = V_end`.

By computed value

Corresponding individual components of the computed values are combined using the indicated procedure for that value type. If the number of components or the types of corresponding components do not match, or if any component value uses discrete animation and the two corresponding values do not match, then the property values combine as discrete.

Repeatable list

Same as by computed value except that if the two lists have differing numbers of items, they are first repeated to the least common multiple numbers of items. Each item is then combined by computed value. If a pair of values cannot be combined or any component value uses discrete animation, then the property values combine as discrete.

Some properties have specific interpolation behavior not covered by these four types. In this case, refer to the property's "Interpolation" section (E.g., `visibility`).

Animating custom properties
---------------------------

For custom properties registered using the `registerProperty()` method, the animation type is by computed value, with the computed value type determined by the property's syntax definition.

For unregistered custom properties, the animation type is discrete.

See also
--------

* Using CSS Animations
* Using CSS Transitions
-webkit-box-reflect
===================

**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-box-reflect`** CSS property lets you reflect the content of an element in one specific direction.

Syntax
------


```css
/\* Direction values \*/
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/\* Offset value \*/
-webkit-box-reflect: below 10px;

/\* Mask value \*/
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/\* Global values \*/
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: revert;
-webkit-box-reflect: revert-layer;
-webkit-box-reflect: unset;
```

### Values

`above`*,* `below`*,* `right`*,* `left`

Are keywords indicating in which direction the reflection is to happen.

`<length>`

Indicates the size of the reflection.

`<image>`

Describes the mask to be applied to the reflection.

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

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

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

-webkit-box-reflect =
  [ above | below | right | left ]? <length>? <image>?
```

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

Not part of any standard. The standard way to do reflection in CSS is to use the CSS `element()` function.

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

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

See also
--------

* The Apple documentation.
* The Webkit specification.
* Lea Verou's article on reflection using CSS features on the standard track.