recursal/MDN huggingface dataset:
CSSOM view
==========

The **CSSOM view** module lets you manipulate the visual view of a document, in particular its scrolling behavior.

Reference
---------

### Properties

* `scroll-behavior`
Guides
------

Coordinate systems

A guide to the coordinate systems used to specify the position of a location in a display context, whether that context is a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing.

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

* cssom glossary term
Specifications
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
overscroll-behavior-x
=====================

The **`overscroll-behavior-x`** CSS property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.

See `overscroll-behavior` for a full explanation.

Syntax
------


```css
/\* Keyword values \*/
overscroll-behavior-x: auto; /\* default \*/
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/\* Global values \*/
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;
```


The `overscroll-behavior-x` property is specified as a keyword chosen from the list of values below.

### Values

`auto`

The default scroll overflow behavior occurs as normal.

`contain`

Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

`none`

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

overscroll-behavior-x =   
  contain  |  
  none     |  
  auto       
  
```

Examples
--------

### Preventing an underlying element from scrolling horizontally

In our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other. The outer box has a large `width` set on it so the page will scroll horizontally. The inner box has a small width (and `height`) set on it so it sits comfortably inside the viewport, but its content is given a large `width` so it will scroll horizontally.

By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this, you can set `overscroll-behavior-x: contain` on the inner box:


```css
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}
```

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |

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

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

See also
--------

* Take control of your scroll: customizing pull-to-refresh and overflow effects
* The mapped logical properties: `overscroll-behavior-inline`, `overscroll-behavior-block`
:left
=====

The **`:left`** CSS pseudo-class, used with the `@page` at-rule, represents all left-hand pages of a printed document.


```css
/\* Selects any left-hand pages when printing \*/
@page :left {
  margin: 2in 3in;
}
```


Whether a given page is "left" or "right" is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a `:right` page; if it has a major writing direction of right-to-left then it will be a `:left` page.

**Note:** This pseudo-class can be used to change only the `margin`, `padding`, `border`, and `background` properties of the *page box*. All other properties will be ignored, and only the page box, not the document content on the page, will be affected.

Syntax
------


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

Examples
--------

### Setting a margin for left-hand pages


```css
@page :left {
  margin: 2in 3in;
}
```

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: `:first`, `:right`
text-size-adjust
================

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

The **`text-size-adjust`** CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. The `text-size-adjust` property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.

Syntax
------


```css
/\* Keyword values \*/
text-size-adjust: none;
text-size-adjust: auto;

/\* <percentage> value \*/
text-size-adjust: 80%;

/\* Global values \*/
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: revert;
text-size-adjust: revert-layer;
text-size-adjust: unset;
```


The `text-size-adjust` property is specified as `none`, `auto`, or a `<percentage>`.

### Values

`none`

Disables the browser's inflation algorithm.

`auto`

Enables the browser's inflation algorithm. This value is used to cancel a `none` value previously set with CSS.

`<percentage>`

Enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size.

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

|  |  |
| --- | --- |
| Initial value | `auto` for smartphone browsers supporting inflation, `none` in other cases (and then not modifiable). |
| Applies to | all elements |
| Inherited | yes |
| Percentages | yes, refer to the corresponding size of the text font |
| Computed value | as specified |
| Animation type | by computed value type |

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

text-size-adjust =   
  auto                |  
  none                |  
  <percentage [0,∞]>    
  
```

Examples
--------

### Basic disabling usage

As hinted at above, on a properly designed responsive site the `text-size-adjust` behavior is not needed, so developers can elect to turn it off by specifying a value of none:


```css
p {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
```

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

| Specification |
| --- |
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |

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

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

See also
--------

* Apple's documentation
* Google Chrome behavior description
* Gecko's behavior description, by L. David Baron
:muted
======

The **`:muted`** CSS pseudo-class selector represents an element that is capable of making sound, such as `<audio>` or `<video>`, but is muted (forced silent).

 Muted is different from `:volume-locked` in that the page author has control over whether a media element can be muted or un-muted.
 User agents may set media `muted` value according to use preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise).
 An element that is `:volume-locked` cannot be muted, un-muted, or have its volume changed via JavaScript because of an operating system or user agent preference.

Syntax
------


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

Examples
--------

### CSS


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

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

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

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

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

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

See also
--------

* `:buffering`
* `:paused`
* `:playing`
* `:seeking`
* `:stalled`
* `:volume-locked`
* CSS selectors
* `muted` property of `HTMLMediaElement` objects
-webkit-tap-highlight-color
===========================

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

**`-webkit-tap-highlight-color`** is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.

Syntax
------


```css
-webkit-tap-highlight-color: red;
-webkit-tap-highlight-color: transparent; /\* for removing the highlight \*/

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

### Values

A `<color>`.

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

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

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

-webkit-tap-highlight-color =
  <color>
```

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

Not part of any standard. Apple has a description in the Safari Web Content Guide.

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

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

See also
--------

* WebKit CSS extensions
* Related CSS pseudo-classes:
    + `:hover`
    + `:active`
    + `:visited`
padding-block-start
===================

The **`padding-block-start`** CSS property defines the logical block 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-block-start: 10px; /\* An absolute length \*/
padding-block-start: 1em; /\* A length relative to the text size \*/

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

/\* Global values \*/
padding-block-start: inherit;
padding-block-start: initial;
padding-block-start: revert;
padding-block-start: revert-layer;
padding-block-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) of the containing block. Must be nonnegative.

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

The `padding-block-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-end`, `padding-inline-start`, 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-block-start =   
  <'padding-top'>    
  
```

Examples
--------

### Setting block 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-block-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`
perspective
===========

The **`perspective`** CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

Try it
------

Syntax
------


```css
/\* Keyword value \*/
perspective: none;

/\* <length> values \*/
perspective: 20px;
perspective: 3.5em;

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

### Values

`none`

Indicates that no perspective transform is to be applied.

`<length>`

A `<length>` giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the children of the element. Negative values are syntax errors. If the value is smaller than `1px`, it is clamped to `1px`.

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

 Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
 Large values of `perspective` cause a small transformation;
 small values of `perspective` cause a large transformation.

The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the `perspective` CSS property — are not drawn.

The *vanishing point* is by default placed at the center of the element, but its position can be changed using the `perspective-origin` property.

Using this property with a value other than `none` creates a new stacking context. Also, in that case, the object will act as a containing block for `position: fixed` elements that it contains.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | the absolute length or `none` |
| Animation type | a length |
| Creates stacking context | yes |

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

perspective =   
  none            |  
  <length [0,∞]>    
  
```

Examples
--------

### Setting perspective

An example showing how a cube varies if the `perspective` is set at different positions is given in Using CSS transforms > Setting perspective.

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-property |

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

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

See also
--------

* Using CSS Transforms
-webkit-text-stroke-color
=========================

The **`-webkit-text-stroke-color`** CSS property specifies the stroke 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-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200 100 0);

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

### Values

`<color>`

The color of the stroke.

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

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

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

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

Examples
--------

### Varying the stroke color

#### HTML


```html
<p>Text with stroke</p>
<input type="color" value="#ff0000" />
```


#### CSS


```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; /\* Can be changed in the live sample \*/
}
```


```
const colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", (evt) => {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});
```


#### Results

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-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-fill-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
flex-shrink
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
The **`flex-shrink`** CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.

In use, `flex-shrink` is used alongside the other flex properties `flex-grow` and `flex-basis`, and normally defined using the `flex` shorthand.

Try it
------

Syntax
------


```css
/\* <number> values \*/
flex-shrink: 2;
flex-shrink: 0.6;

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


The `flex-shrink` property is specified as a single `<number>`.

### Values

`<number>`

See `<number>`. Negative values are invalid. Defaults to 1.

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

|  |  |
| --- | --- |
| Initial value | `1` |
| Applies to | flex items, including in-flow pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | a number |

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

flex-shrink =   
  <number [0,∞]>    
  
```

Examples
--------

### Setting flex item shrink factor

#### HTML


```html
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p>
<p>The width of D and E is less than the others.</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
```


#### CSS


```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgb(0 0 0 / 20%);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```


#### Result

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis*
scroll-padding-bottom
=====================

The `scroll-padding-bottom` property defines offsets for the bottom 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-bottom: auto;

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

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

### Values

`<length-percentage>`

An inwards offset from the bottom 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-bottom =   
  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