recursal/MDN huggingface dataset:
<time-percentage>
=================

The **`<time-percentage>`** CSS data type represents a value that can be either a `<time>` or a `<percentage>`.

Syntax
------

Refer to the documentation for `<time>` and `<percentage>` for details of the individual syntaxes allowed by this type.

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

<time-percentage> =   
  <time>        |  
  <percentage>    
  
```

Examples
--------

### Use in calc()

Where a `<time-percentage>` is specified as an allowable type, this means that the percentage resolves to a time and therefore can be used in a `calc()` expression.

### Valid percentages
```

50%
+50%        Optional plus sign
-50%        Negative percentages are not valid for all properties that accept percentages
```

### Invalid percentages
```

50 %        Space not allowed between the number and the percentage sign
```

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

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

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

See also
--------

* `<percentage>`
* `<time>`
* CSS Values and Units
scroll-padding-top
==================

The **`scroll-padding-top`** property defines offsets for the top of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
scroll-padding-top: auto;

/\* <length> values \*/
scroll-padding-top: 10px;
scroll-padding-top: 1em;
scroll-padding-top: 10%;

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

### Values

``<length-percentage>``

An inwards offset from the top edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

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

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

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-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
:buffering
==========

The **`:buffering`** CSS pseudo-class selector represents an element that is playable, such as `<audio>` or `<video>`, when the playable element is buffering a media resource.

 An element is considered as buffering when that element cannot continue playing because it is trying to load media data but does not yet have enough data to begin or continue playback.
 For more information, see the Media buffering, seeking, and time ranges guide.


**Note:** An element is still considered to be `:playing` when it is "buffering".
 If `:buffering` matches an element, `:playing` will also match that element.


Syntax
------


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

Examples
--------

### CSS


```css
:buffering {
  outline: 5px solid red;
}

video:buffering {
  outline: 5px solid blue;
}
```

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

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

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

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

See also
--------

* `:muted`
* `:paused`
* `:playing`
* `:seeking`
* `:stalled`
* `:volume-locked`
* CSS selectors
border-start-end-radius
=======================

The **`border-start-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.

Try it
------

This property affects the corner between the block-start and the inline-end sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the `border-top-right-radius` property.

Syntax
------


```css
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-start-end-radius: 10px;
border-start-end-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-start-end-radius: 1em 2em;

/\* Global values \*/
border-start-end-radius: inherit;
border-start-end-radius: initial;
border-start-end-radius: revert;
border-start-end-radius: revert-layer;
border-start-end-radius: unset;
```

### Values

`<length-percentage>`

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS `<length>` data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | two absolute `<length>`s or `<percentage>`s |
| Animation type | a length, percentage or calc(); |

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

border-start-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Border radius with vertical text

#### HTML


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


#### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-end-radius: 10px;
}
```


#### Results

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

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

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical property: `border-bottom-left-radius`
* `writing-mode`, `direction`, `text-orientation`
scroll-padding-left
===================

The `scroll-padding-left` property defines offsets for the left of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
scroll-padding-left: auto;

/\* <length> values \*/
scroll-padding-left: 10px;
scroll-padding-left: 1em;
scroll-padding-left: 10%;

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

### Values

`<length-percentage>`

An inwards offset from the left edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-padding-left =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-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
<relative-size>
===============

The **`<relative-size>`** CSS data type describes relative size keywords. The `<relative-size>` keywords define a size relative to the computed size of the parent element. This data type is used in the `font` shorthand and `font-size` properties.

Syntax
------
```

<relative-size> = smaller | larger
```

### Values

The `<relative-size>` data type is defined using a keyword value chosen from the list below.

`smaller`

A relative size one size smaller than the inherited size.

`larger`

A relative size one size larger than the inherited size.

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

The `<relative-size>` keywords are relative to the current size of the element. If the inherited size is defined using an `<absolute-size>` keyword, the `<relative-size>` value equates to the adjacent size in the `<absolute-size>` table. Otherwise, the relative increase or decrease in size is between 120% and 150%.

Examples
--------

### Comparing the keyword values


```html
<ul>
  <li class="smaller">font-size: smaller;</li>
  <li>font-size is not specified</li>
  <li class="larger">font-size: larger;</li>
</ul>
```



```css
li {
  margin-bottom: 0.3em;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # valdef-font-size-relative-size |

See also
--------

* CSS `<absolute-size>` data type
* CSS `font` and `font-size` properties
* CSS fonts module
Comments
========

A CSS **comment** is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet. By design, comments have no effect on the layout of a document.

Syntax
------

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines.


```css
/\* Comment \*/
```

Examples
--------


```css
/\* A one-line comment \*/

/\*
A comment
which stretches
over several
lines
\*/

/\* The comment below is used to
 disable specific styling \*/
/\*
span {
 color: blue;
 font-size: 1.5em;
}
\*/
```

Notes
-----

The `/* */` comment syntax is used for both single and multiline comments. There is no other way to specify comments in external style sheets. However, when using the `<style>` element, you may use `<!-- -->` to hide CSS from older browsers, although this is not recommended. As with most programming languages that use the `/* */` comment syntax, comments cannot be nested. In other words, the first instance of `*/` that follows an instance of `/*` closes the comment.

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

* CSS 2.1 Syntax and basic data types #comments
See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements
animation-play-state
====================

The **`animation-play-state`** CSS property sets whether an animation is running or paused.

Try it
------

Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

Syntax
------


```css
/\* Single animation \*/
animation-play-state: running;
animation-play-state: paused;

/\* Multiple animations \*/
animation-play-state: paused, running, running;

/\* Global values \*/
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;
```

### Values

`running`

The **animation** is currently **playing**.

`paused`

The **animation** is currently **paused**.


**Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the `animation-name`s appear. For situations where the number of animations and `animation-*` property values do not match, see Setting multiple animation property values.

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

|  |  |
| --- | --- |
| Initial value | `running` |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

animation-play-state =   
  <single-animation-play-state>#    
  
<single-animation-play-state> =   
  running  |  
  paused     
  
```

Examples
--------

### Pausing an animation

This animation is paused, but runs when you hover over it.

#### HTML


```html
<div class="box"></div>
```


#### CSS


```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```


#### Result

Hover over the rectangle to play the animation.

See CSS animations for examples.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-play-state |

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

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

See also
--------

* Using CSS animations
* JavaScript `AnimationEvent` API
* Other related animation properties: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-timeline`, `animation-timing-function`
:defined
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`:defined`** CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the `CustomElementRegistry.define()` method).


```css
/\* Selects any defined element \*/
:defined {
  font-style: italic;
}

/\* Selects any instance of a specific custom element \*/
simple-custom:defined {
  display: block;
}
```

Syntax
------


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

Examples
--------

### Hiding elements until they are defined

The following snippets are taken from our defined-pseudo-class demo (see it live also).

In this demo we define a very simple trivial custom element:


```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```


Then insert a copy of this element into the document, along with a standard `<p>`:


```html
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>
```


In the CSS we first include the following rules:


```css
/\* Give the two elements distinctive backgrounds \*/
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

/\* Both the custom and the built-in element are given italic text \*/
:defined {
  font-style: italic;
}
```


Then provide the following two rules to hide any instances of our custom element that are not defined, and display instances that are defined as block level elements:


```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```


This is useful if you have a complex custom element that takes a while to load into the page — you might want to hide instances of the element until definition is complete, so that you don't end up with flashes of ugly unstyled elements on the page

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

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

See also
--------

* Web components
font-kerning
============

The **`font-kerning`** CSS property sets the use of the kerning information stored in a font.

Try it
------

*Kerning* defines how letters are spaced. In *well-kerned* fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be.

In the image below, for instance, the examples on the left do not use kerning, while the ones on the right do:

![Example of font-kerning](/en-US/docs/Web/CSS/font-kerning/font-kerning.png)

Syntax
------


```css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

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

### Values

`auto`

The browser determines whether font kerning should be used or not. For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.

`normal`

Font kerning information stored in the font must be applied.

`none`

Font kerning information stored in the font is disabled.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

font-kerning =   
  auto    |  
  normal  |  
  none      
  
```

Examples
--------

### Enabling and disabling kerning

#### HTML


```html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
```


#### CSS


```css
div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}
```


#### JavaScript


```js
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const nokern = document.getElementById("nokern");

input.addEventListener("keyup", () => {
  kern.textContent = input.value; /\* Update content \*/
  nokern.textContent = input.value;
});

kern.textContent = input.value; /\* Initialize content \*/
nokern.textContent = input.value;
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-kerning-prop |

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

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

See also
--------

* `font-variant`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-alternates`, `font-synthesis`, `letter-spacing`
padding-inline-start
====================

The **`padding-inline-start`** CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Try it
------

Syntax
------


```css
/\* <length> values \*/
padding-inline-start: 10px; /\* An absolute length \*/
padding-inline-start: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-inline-start: 5%; /\* A padding relative to the block container's width \*/

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

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

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

The `padding-inline-start` property is defined in the specification as taking the same values as the `padding-top` property. However, the physical property it maps to depends on the values set for `writing-mode`, `direction`, and `text-orientation`. Therefore, it could map to `padding-bottom`, `padding-right`, or `padding-left`.

It relates to `padding-block-start`, `padding-block-end`, and `padding-inline-end`, which define the other paddings of the element.

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` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as `<length>` |
| Animation type | a length |

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

padding-inline-start =   
  <'padding-top'>    
  
```

Examples
--------

### Setting inline start padding for vertical text

#### 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;
  padding-inline-start: 20px;
  background-color: #c8c800;
}
```


#### Result

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

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

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`