recursal/MDN huggingface dataset:
column-fill
===========

The **`column-fill`** CSS property controls how an element's contents are balanced when broken into columns.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

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


The `column-fill` property is specified as one of the keyword values listed below. The initial value is `balance` so the content will be balanced across the columns.

### Values

`auto`

Columns are filled sequentially. Content takes up only the room it needs, possibly resulting in some columns remaining empty.

`balance`

Content is equally divided between columns. In fragmented contexts, such as paged media, only the last fragment is balanced. Therefore in paged media, only the last page would be balanced.

`balance-all` 
Experimental

Content is equally divided between columns. In fragmented contexts, such as paged media, all fragments are balanced.

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

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

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

column-fill =   
  auto         |  
  balance      |  
  balance-all    
  
```

Examples
--------

### Balancing column content

#### HTML


```html
<p class="fill-auto">
  This paragraph fills columns one at a time. Since all of the text can fit in
  the first column, the others are empty.
</p>

<p class="fill-balance">
  This paragraph attempts to balance the amount of content in each column.
</p>
```


#### CSS


```css
p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}
```


#### Result

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # cf |

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

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

**Warning:** There are some interoperability issues and bugs with `column-fill` across browsers, due to unresolved issues in the specification.

In particular, when using `column-fill: auto` to fill columns sequentially, Chrome will only consult this property if the multicol container has a size in the block dimension (e.g., height in a horizontal writing mode). Firefox will always consult this property, therefore filling the first column with all of the content in cases where there is no size.

See also
--------

* Multiple-column Layout
* `column-count`
* `column-width`
font-smooth
===========

**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 **`font-smooth`** CSS property controls the application of anti-aliasing when fonts are rendered.

Syntax
------


```css
/\* Keyword values \*/
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/\* <length> value \*/
font-smooth: 2em;

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


**Note:** WebKit implements a similar property, but with different values: **`-webkit-font-smoothing`**. It only works on macOS.

* `auto` - Let the browser decide (Uses subpixel anti-aliasing when available; this is the default)
* `none` - Turn font smoothing off; display text with jagged sharp edges.
* `antialiased` - Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to anti-aliasing for light text on dark backgrounds makes it look lighter.
* `subpixel-antialiased` - On most non-retina displays, this will give the sharpest text.

**Note:** Firefox implements a similar property, but with different values: **`-moz-osx-font-smoothing`**. It only works on macOS.

* `auto` - Allow the browser to select an optimization for font smoothing, typically `grayscale`.
* `grayscale` - Render text with grayscale anti-aliasing, as opposed to the subpixel. Switching from subpixel rendering to anti-aliasing for light text on dark backgrounds makes it look lighter.

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

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

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

font-smooth =
  auto | never | always | <absolute-size> | <length>
```

Examples
--------

### Basic usage example

The following example shows the Safari/Chromium and Firefox equivalents that turn on font-smoothing on macOS. In both cases the smoothed font should look slightly lighter in weight.

For those of you not on a macOS system, here is a screenshot (the live version appears later on):

![Two texts examples one with the font-smooth property and another one without](/en-US/docs/Web/CSS/font-smooth/smoothing.png)

#### HTML


```html
<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>
```


#### CSS


```css
html {
  background-color: black;
  color: white;
  font-size: 3rem;
}

p {
  text-align: center;
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```


#### Result

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

* Please Stop "Fixing" Font Smoothing – UsabilityPost
* Laissez-faire font smoothing and anti-aliasing
scroll-margin-left
==================

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

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

### Values

`<length>`

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

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-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
::-webkit-meter-even-less-good-value
====================================

**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-meter-even-less-good-value`** styles the `<meter>` element when the value and the optimum attributes fall outside the low-high range, but in opposite zones. To illustrate, it applies when *value* < *low* < *high* < *optimum* or *value* > *high* > *low* > *optimum*.

Red is the default color.

Syntax
------


```css
::-webkit-meter-even-less-good-value {
  /\* ... \*/
}
```

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

Not part of any standard.

Examples
--------

### HTML


```html
Normal:
<meter min="0" max="10" low="3" high="7" optimum="8" value="2">
  Score 2/10
</meter>
<br />
Styled:
<meter id="styled" min="0" max="10" low="3" high="7" optimum="8" value="2">
  Score 2/10
</meter>
```

### CSS


```css
body {
  font-family: monospace;
}

.safari meter {
  /\* Reset the default appearance for Safari only \*/
  /\* .safari class is added via JavaScript \*/
  -webkit-appearance: none;
}

#styled::-webkit-meter-even-less-good-value {
  background: linear-gradient(to bottom, #f77, #900 45%, #900 55%, #f77);
  height: 100%;
  box-sizing: border-box;
}
```

### JavaScript


```js
// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-\*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.

const is_safari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (is_safari) {
  document.body.classList.add("safari");
}
```

### Result

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

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

See also
--------

The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
scroll-padding
==============

The **`scroll-padding`** shorthand property sets scroll padding on all sides of an element at once, much like the `padding` property does for padding on an element.

Try it
------

The `scroll-padding-*` properties define offsets for 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.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `scroll-padding-bottom`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
Syntax
------


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

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

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

### Values

`<length-percentage>`

An inwards offset from the corresponding 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 the user agent is free to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `scroll-padding-bottom`: `auto`
* `scroll-padding-left`: `auto`
* `scroll-padding-right`: `auto`
* `scroll-padding-top`: `auto`
 |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as each of the properties of the shorthand:* `scroll-padding-bottom`: as specified
* `scroll-padding-left`: as specified
* `scroll-padding-right`: as specified
* `scroll-padding-top`: as specified
 |
| Animation type | by computed value type |

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

scroll-padding =   
  [ auto | <length-percentage [0,∞]> ]{1,4}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-padding |

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
counter-set
===========

The **`counter-set`** CSS property sets CSS counters to the given values.

The `counter-set` property will create a new counter for each named counter in the list of space-separated counter and value pairs that doesn't already exist. If a named counter in the list is missing a value, the value of the counter will be set to `0`.

Try it
------

**Note:** The counter's value can be incremented or decremented using the `counter-increment` CSS property.

Syntax
------


```css
/\* Set "my-counter" to 0 \*/
counter-set: my-counter;

/\* Set "my-counter" to -1 \*/
counter-set: my-counter -1;

/\* Set "counter1" to 1, and "counter2" to 4 \*/
counter-set: counter1 1 counter2 4;

/\* Cancel any counter that could have been set in less specific rules \*/
counter-set: none;

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


The `counter-set` property is specified as either one of the following:

* A `<custom-ident>` naming the counter, followed optionally by an `<integer>`. You may specify as many counters to reset as you want, with each name or name-number pair separated by a space.
* The keyword value `none`.
### Values

`<custom-ident>`

The name of the counter to set.

`<integer>`

The value to set the counter to on each occurrence of the element. Defaults to `0` if not specified. If there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a starting value of `0` (though it may then immediately set or increment that value to something different).

`none`

No counter set is to be performed. This can be used to override a `counter-set` defined in a less specific rule.

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

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

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

counter-set =   
  [ <counter-name> <integer>? ]+  |  
  none                              
  
```

Examples
--------

### Setting named counters


```css
h1 {
  counter-set: chapter section 1 page;
  /\* Sets the chapter and page counters to 0,
 and the section counter to 1 \*/
}
```

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # propdef-counter-set |

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

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

See also
--------

* Using CSS Counters
* `counter-increment`
* `counter-reset`
* `@counter-style`
* `counter()` and `counters()` functions
* `content` property
* CSS lists and counters module
* CSS counter styles module
margin-inline-end
=================

The **`margin-inline-end`** CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the `margin-top`, `margin-right`, `margin-bottom` or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

Syntax
------


```css
/\* <length> values \*/
margin-inline-end: 10px; /\* An absolute length \*/
margin-inline-end: 1em; /\* relative to the text size \*/
margin-inline-end: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-inline-end: auto;

/\* Global values \*/
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: revert;
margin-inline-end: revert-layer;
margin-inline-end: unset;
```


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

### Values

The `margin-inline-end` property takes the same values as the `margin-left` property.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

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

margin-inline-end =   
  <'margin-top'>    
  
```

Examples
--------

### Setting inline end margin

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


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-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
* `margin-inline-start`
* The mapped physical properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation`
:focus
======

The **`:focus`** CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's `Tab` key.

Try it
------

**Note:** This pseudo-class applies only to the focused element itself. Use `:focus-within` if you want to select an element that *contains* a focused element.

Syntax
------


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

Examples
--------

### HTML


```html
<div><input class="red-input" value="I'll be red when focused." /></div>
<div><input class="blue-input" value="I'll be blue when focused." /></div>
```

### CSS


```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```

### Result

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

Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

* Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### `:focus { outline: none; }`

Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.

* Quick Tip: Never remove CSS outlines
Specifications
--------------

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

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

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

See also
--------

* `:focus-visible`
* `:focus-within`
asin()
======

The **`asin()`** CSS function is a trigonometric function that returns the inverse sine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an `<angle>` between `-90deg` and `90deg`.

Syntax
------


```css
/\* Single <number> values \*/
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));

/\* Other values \*/
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));
```

### Parameter

The `asin(number)` function accepts only one value as its parameter.

`number`

A calculation which resolves to a `<number>` between `-1` and `1`.

### Return value

The inverse sine of an `number` will always return an `<angle>` between `-90deg` and `90deg`.

* If `number` is less than `-1` or greater than `1`, the result is `NaN`.
* If `number` is `0⁻`, the result is `0⁻`.
### Formal syntax
```

<asin()> =   
  asin( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

Examples
--------

### Rotate elements

The `asin()` function can be used to `rotate` elements as it return an `<angle>`.

#### HTML


```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```


#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```



```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(asin(1));
}
div.box-2 {
  transform: rotate(asin(0.5));
}
div.box-3 {
  transform: rotate(asin(0));
}
div.box-4 {
  transform: rotate(asin(-0.5));
}
div.box-5 {
  transform: rotate(asin(-1));
}
```


#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

See also
--------

* `sin()`
* `cos()`
* `tan()`
* `acos()`
* `atan()`
* `atan2()`
overscroll-behavior-y
=====================

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

See `overscroll-behavior` for a full explanation.

Syntax
------


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

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


The `overscroll-behavior-y` 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-y =   
  contain  |  
  none     |  
  auto       
  
```

Examples
--------

### Preventing an underlying element from scrolling vertically


```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```


See `overscroll-behavior` for a full example and explanation.

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`