recursal/MDN huggingface dataset:
scroll-margin-block-start
=========================

The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension 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-block-start: 10px;
scroll-margin-block-start: 1em;

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

### Values

`<length>`

An outset from the block start 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-block-start =   
  <length>    
  
```

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

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

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
CSS animations
==============

The **CSS animations** module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated element should render at a given time during the animation sequence. You can use the properties in the animations module to control the duration, number of repetitions, delayed start, and other aspects of an animation.

### Animations in action

To view the animation in the box below, click the checkbox 'Play the animation' or hover the cursor over the box. When the animating is active, the cloud at the top changes shape, snowflakes fall, and the snow level at the bottom rises. To pause the animation, uncheck the checkbox or move your cursor away from the box.

This sample animation uses `animation-iteration-count` to make the flakes fall repeatedly, `animation-direction` to make the cloud move back and forth, `animation-fill-mode` to raise the snow level in response to the cloud movement, and `animation-play-state` to pause the animation.

To see the code for this animation, view the source on GitHub.

Reference
---------

### Properties

* `animation` shorthand
* `animation-composition`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
* `animation-timeline`
### At-rules

* `@keyframes`
### Events

All animations, even those with 0 seconds duration, throw animation events.

* `animationstart`
* `animationend`
* `animationcancel`
* `animationiteration`
### Interfaces

* Web Animations API
* `AnimationEvent`
* `CSSKeyframeRule`
* `CSSKeyframesRule`
Guides
------

Using CSS animations

Step-by-step tutorial on how to create animations using CSS. This article describes the animation-related CSS properties and at-rule and how they interact with each other.

CSS animation tips and tricks

Tips and tricks to help you get the most out of CSS animations.

Related concepts
----------------

* `will-change` CSS property
* `<easing-function>` data type
* `prefers-reduced-motion` media query
* Bezier curve glossary term
Specifications
--------------

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

See also
--------

* CSS scroll-driven animations
* Properties in the transitions CSS module to trigger animations based on user actions
* The `<canvas>` HTML element along with canvas API and WebGL API to draw graphics and animations
* The `SVGAnimationElement` interface for all the animation-related element interfaces, including `SVGAnimateElement`, `SVGSetElement`, `SVGAnimateColorElement`, `SVGAnimateMotionElement`, and `SVGAnimateTransformElement`
box-ordinal-group
=================

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

**Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See flexbox for information about the current standard.

The **`box-ordinal-group`** CSS property assigns the flexbox's child elements to an ordinal group.

Ordinal groups may be used in conjunction with the `box-direction` property to control the order in which the direct children of a box appear. When the computed `box-direction` is normal, a box will display its elements starting from the lowest numbered ordinal group and ensure that those elements appear to the left (for horizontal boxes) or at the top (for vertical boxes) of the container. Elements with the same ordinal group are flowed in the order they appear in the source document tree. In the reverse direction, the ordinal groups are examined in the same order, except the elements appear reversed.

Syntax
------


```css
/\* <integer> values \*/
box-ordinal-group: 1;
box-ordinal-group: 5;

/\* Global values \*/
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;
```


The `box-ordinal-group` property is specified as any positive `<integer>`.

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

|  |  |
| --- | --- |
| Initial value | `1` |
| Applies to | children of box elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

box-ordinal-group =
  <integer>
```

Examples
--------

### Basic usage example

In an older version of the spec, `box-ordinal-group` was included to allow you to change the display order of flex children inside a flex container:


```css
article:nth-child(1) {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  box-ordinal-group: 1;
}
```


The modern flexbox equivalent is `order`.

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

* `flex`
* `flex-basis`
* `flex-grow`
* `flex-shrink`
font-synthesis-small-caps
=========================

The **`font-synthesis-small-caps`** CSS property lets you specify whether or not the browser may synthesize small-caps typeface when it is missing in a font family. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.

It is often convenient to use the shorthand property `font-synthesis` to control all typeface synthesis values.

Syntax
------


```css
/\* Keyword values \*/
font-synthesis-small-caps: auto;
font-synthesis-small-caps: none;

/\* Global values \*/
font-synthesis-small-caps: inherit;
font-synthesis-small-caps: initial;
font-synthesis-small-caps: revert;
font-synthesis-small-caps: revert-layer;
font-synthesis-small-caps: unset;
```

### Values

`auto`

Indicates that the missing small-caps typeface may be synthesized by the browser if needed.

`none`

Indicates that the synthesis of the missing small-caps typeface by the browser is not allowed.

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-synthesis-small-caps =   
  auto  |  
  none    
  
```

Examples
--------

### Disabling synthesis of small-caps typeface

This example shows turning off synthesis of the small-caps typeface by the browser in the `Montserrat` font.

#### HTML


```html
<p class="english">
  These are the default <span class="small-caps">small-caps</span>,
  <strong>bold</strong>, and <em>oblique</em> typefaces.
</p>

<p class="english no-syn">
  The <span class="small-caps">small-caps</span> typeface is turned off here but
  not the <strong>bold</strong> and <em>oblique</em> typefaces.
</p>
```


#### CSS


```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.small-caps {
  font-variant: small-caps;
}
.no-syn {
  font-synthesis-small-caps: none;
}
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis-small-caps |

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

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

See also
--------

* font-synthesis shorthand, font-synthesis-style, font-synthesis-weight
* `font-style`, `font-variant`, `font-variant-caps`, `font-weight`
* CanvasRenderingContext2D: fontVariantCaps property
isolation
=========

The **`isolation`** CSS property determines whether an element must create a new stacking context.

Try it
------

This property is especially helpful when used in conjunction with `mix-blend-mode` and `z-index`.

Syntax
------


```css
/\* Keyword values \*/
isolation: auto;
isolation: isolate;

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


The `isolation` property is specified as one of the keyword values listed below.

### Values

`auto`

A new stacking context is created only if one of the properties applied to the element requires it.

`isolate`

A new stacking context must be created.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     |  
  isolate    
  
```

Examples
--------

### Forcing a new stacking context for an element

#### HTML


```html
<div class="big-square ">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>
```


#### CSS


```css
.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: rgb(0, 255, 0);
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: rgb(0, 255, 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
```


#### Result

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

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

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

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

See also
--------

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode`
:only-of-type
=============

The **`:only-of-type`** CSS pseudo-class represents an element that has no siblings of the same type.

Try it
------

Syntax
------


```css
:only-of-type {
  /\* ... \*/
}
```

Examples
--------

### Styling elements with no siblings of the same type

#### HTML


```html
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
```


#### CSS


```css
main :only-of-type {
  color: red;
}
```


#### Result

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

| Specification |
| --- |
| Selectors Level 4 # only-of-type-pseudo |

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

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

See also
--------

* `:only-child`
* `:first-of-type`
* `:last-of-type`
* `:nth-of-type`
CSS compositing and blending
============================

The **CSS compositing and blending** module defines how an element's background layers can be blended together, how an element can be blended with its container, and whether the element must create a new stacking context.

The properties in this CSS module can be used to define the blending mode that should be used, if any, to blend an element's background images and colors into a single background image. This module provides 16 blending modes. You can also define how an element's borders, background, and content, including text, emojis, and images, should be blended with the background of its container.

### Compositing and blending in action

In this example, each box has a border, two striped background images, and a solid color background. The common background for all the boxes contains a pattern of circles. The three boxes in the second row are set to blend with the background of the container.

Notice how the background, border, and the content are all impacted as a result of the blending. To see the code for this sample, view the source on GitHub.

Reference
---------

### Properties

* `background-blend-mode`
* `isolation`
* `mix-blend-mode`
Related concepts
----------------

* `<blend-mode>` data type
* `backdrop-filter` CSS property
* `filter` CSS property
* `mask-composite` CSS property
* `background-color` CSS property
* `background-image` CSS property
* stacking context glossary term
* `<feBlend>` SVG filter primitive
* `<feComposite>` SVG filter primitive
Specifications
--------------

| Specification |
| --- |
| Compositing and Blending Level 2  |
| Compositing and Blending Level 1  |

See also
--------

* Properties in the CSS filter effects module enable applying filters effects, such as blurring and changing color intensity, to images, backgrounds, and borders.
* Compositing And Blending In CSS (2015)
* Editing Images in CSS: Blend Modes (2022)
* web.dev: blend modes (2021)
<alpha-value>
=============

The **`<alpha-value>`** CSS data type represents a value that can be either a `<number>` or a `<percentage>`, specifying the **alpha channel** or **transparency** of a color.

Syntax
------

The value of an `<alpha-value>` is given as either a `<number>` or a `<percentage>`.

If given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. Values outside the range of 0 to 1 are permitted, but are clamped to lie within the range 0 to 1.

If the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque.

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

<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

Interpolation
-------------

When animated, values of the `<alpha-value>` CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the easing function associated with the animation.

Examples
--------

### Setting text color opacity

 The `rgb()` function accepts a fourth optional value to specify an alpha value.
 The following example shows how to apply a color with 60% opacity using the alpha value:


```css
/\* <rgb()> \*/
color: rgb(34 12 64 / 60%);
```

### Setting shape image threshold

Here an alpha value is used to determine which parts of an image are considered part of a shape:


```css
/\* shape-image-threshold \*/
shape-image-threshold: 70%;
shape-image-threshold: 0.7;
```

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

| Specification |
| --- |
| CSS Color Module Level 4 # typedef-color-alpha-value |

See also
--------

* Fundamental text and font styling
* CSS data types
* CSS Color
* `<color>`
CSS scrollbars styling
======================

The **CSS scrollbars styling** module defines properties that you can use for visual styling of scrollbars. You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar *track*, which is the background of the scrollbar, and the color of the scrollbar *thumb*, which is the draggable handle of the scrollbar.

Scrollbar styling in action
---------------------------

This example defines a thin scrollbar with a red thumb and an orange track. To view the thumb, you will need to scroll the text. After the scrollbar is visible, hover over it to see the track.
```

.poem {
  width: 300px;
  height: 100px;
  border: 1px solid;
}
```



```css
.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
}
```


```
<blockquote class="poem">
  <h3>A Small Needful Fact</h3>
  <pre>
Is that Eric Garner worked
for some time for the Parks and Rec.
Horticultural Department, which means,
perhaps, that with his very large hands,
perhaps, in all likelihood,
he put gently into the earth
some plants which, most likely,
some of them, in all likelihood,
continue to grow, continue
to do what such plants do, like house
and feed small and necessary creatures,
like being pleasant to touch and smell,
like converting sunlight
into food, like making it easier
for us to breathe.
</pre
 >
  <p>
    - <a href="https://onbeing.org/poetry/a-small-needful-fact/">Ross Gay</a>
  </p>
</blockquote>
```


**Note:** When customizing scrollbars, ensure that the thumb and track have enough contrast with the surrounding background. Also ensure that the scrollbar hit area is large enough for people who use touch input.

Reference
---------

### CSS properties

* `scrollbar-width`
* `scrollbar-color`
Related concepts
----------------

* `overflow-block` CSS property
* `overflow-inline` CSS property
* `overflow-x` CSS property
* `overflow-y` CSS property
* `overflow` CSS shorthand property
* `overflow-clip-margin` CSS property
* `scrollbar-gutter` CSS property
* `scroll-behavior` CSS property
* `scroll-margin` CSS shorthand property
* `scroll-padding` CSS shorthand property
* `scroll-snap-align` CSS property
* `scroll-snap-stop` CSS property
* `scroll-snap-type` CSS property
* `::-webkit-scrollbar` pseudo-element
* scroll container glossary term
* `scrollbar` ARIA role
Specifications
--------------

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

See also
--------

* `scroll-timeline`, `scroll-timeline-axis`, `scroll-timeline-name`
* CSS overflow module
* CSS scroll snap module
:stalled
========

 The **`:stalled`** CSS pseudo-class selector represents an element that is playable, such as `<audio>` or `<video>`, when playback is stalled.
 A resource is considered to be stalled if the user has requested playback of a specific position in the media resource, but it has failed to receive any data for some amount of time.
 This is different from `:buffering` in that the media element is unexpectedly not loading data when stalled (e.g. due to a network error) for around 3 seconds (the exact time is user agent dependent).


**Note:** Like with the `:buffering` pseudo-class, the element is still considered to be "playing" when it is "stalled".
 If `:stalled` matches an element, `:playing` will also match that element.


Syntax
------


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

Examples
--------

### CSS


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

audio:stalled {
  background-color: red;
}
```

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

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

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

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

See also
--------

* `:buffering`
* `:muted`
* `:paused`
* `:playing`
* `:seeking`
* `:volume-locked`
* CSS selectors
* `stalled` event
CSS basic user interface
========================

The **CSS basic user interface** module lets you define the rendering and functionality of features related to the user interface including outline properties, visual feedback to pointing device and keyboard, and altering the default appearance of UI widgets.

Basic user interface properties can be used to improve user experience and accessibility by providing visual cues to elements that are being interacted with, including styling mouse cursors and keyboard directional focus navigation, and styling caret cursors when an editable element has focus. The module provides for providing outlines to focused (or not) elements without impacting an element's box model dimensions and styling. This UI module also enables the styling of user interface controls.

### Basic user interface in action

To view how basic user interface properties can alter the appearance of UI features, interact with the elements in this sample. Note that some features in this sample improve usability while others harm user experience.

The CSS `outline` and `outline-offset` properties were used to provide feedback to users which element currently has focus. An `accent-color` provides a theme color to all the form controls. The caret that appears when the text is edit has the same color thanks to the `caret-color` property. These can all be considered UI improvements.

Some features harm usability. The `cursor` property was used to change cursors from the browser default which is confusing. The `resize` property prevents the second `<textarea>` from being resizable while the `pointer-events` property prevents the third `<textarea>` from receiving click events. It is still focusable using the keyboard.

To see the code for this basic user interface sample, view the source on GitHub.

Reference
---------

### Properties

* `accent-color`
* `appearance`
* `caret`, shorthand for:
    + `caret-color`
    + `caret-shape`
* `cursor`
* `nav-down` 
Experimental
* `nav-left` 
Experimental
* `nav-right` 
Experimental
* `nav-up` 
Experimental
* `outline`, shorthand for:
    + `outline-color`
    + `outline-style`
    + `outline-width`
* `outline-offset`
* `pointer-events`
* `resize`
* `user-select`
Guides
------

Learn forms: advanced form styling

Explains how `appearance` can be used to style form controls.

Related concepts
----------------

* CSS `cursor` property
* SVG `cursor` attribute
* CSS `:focus`, `:focus-within`, and `:focus-visible` pseudoclasses
* `CaretPosition` Interface
Specifications
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |

See also
--------

* Tips for Designing Useful and Usable Focus Indicators (2016)