recursal/MDN huggingface dataset:
<number>
========

The **`<number>`** CSS data type represents a number, being either an integer or a number with a fractional component.

Syntax
------

The syntax of `<number>` extends the syntax of `<integer>`. A fractional value is represented by a `.` followed by one or more decimal digits, and may be appended to an integer. There is no unit associated with numbers.

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

When animated, values of the `<number>` 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
--------

### Valid numbers
```

12          A raw <integer> is also a <number>.
4.01        Positive fraction
-456.8      Negative fraction
0.0         Zero
+0.0        Zero, with a leading +
-0.0        Zero, with a leading -
.60         Fractional number without a leading zero
10e3        Scientific notation
-3.4e-2     Complicated scientific notation
```

### Invalid numbers
```

12.         Decimal points must be followed by at least one digit.
+-12.2      Only one leading +/- is allowed.
12.1.1      Only one decimal point is allowed.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # numbers |

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

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

See also
--------

* `<integer>`
math-style
==========

The `math-style` property indicates whether MathML equations should render with normal or compact height.

Syntax
------


```css
/\* Keyword values \*/
math-style: normal;
math-style: compact;

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

### Values

`normal`

The initial value, indicates normal rendering.

`compact`

The math layout on descendants tries to minimize the logical height.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |

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

math-style =   
  normal   |  
  compact    
  
```

Examples
--------

### Changing the style of a formula to compact

#### CSS


```css
math {
  math-style: normal;
}
.compact {
  math-style: compact;
}
```


#### HTML


```html
<p>
  Normal height
  <math>
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  and compact height
  <math class="compact">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  equations.
</p>
```


#### Result

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

| Specification |
| --- |
| MathML Core # the-math-style-property |

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

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

See also
--------

* `math-depth`
* `font-size`
font-synthesis-style
====================

The **`font-synthesis-style`** CSS property lets you specify whether or not the browser may synthesize the oblique typeface when it is missing in a font family.

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

Syntax
------


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

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

### Values

`auto`

Indicates that the missing oblique typeface may be synthesized by the browser if needed.

`none`

Indicates that the synthesis of the missing oblique 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-style =   
  auto  |  
  none    
  
```

Examples
--------

### Disabling synthesis of oblique typeface

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

#### HTML


```html
<p class="english">
  This is the default <em>oblique typeface</em> and
  <strong>bold typeface</strong>.
</p>

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


#### CSS


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

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


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis-style |

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

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

See also
--------

* font-synthesis shorthand, font-synthesis-small-caps, font-synthesis-weight
* `font-style`, `font-variant`, `font-weight`
image-resolution
================

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

The **`image-resolution`** CSS property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as `background-image` images.

The image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the `image-resolution` property allows a different resolution to be specified.

Syntax
------


```css
image-resolution: from-image;
image-resolution: 300dpi;
image-resolution: from-image 300dpi;
image-resolution: 300dpi snap;

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

### Values

``<resolution>``

Specifies the intrinsic resolution explicitly.

`from-image`

Uses the intrinsic resolution as specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to `1dppx` (1 image pixel per CSS px unit).

`snap`

If the `snap` keyword is provided, the computed resolution is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image's native resolution similarly adjusted.


**Note:** As vector formats such as SVG do not have an intrinsic resolution, this property has no effect on vector images.

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

|  |  |
| --- | --- |
| Initial value | `1dppx` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified, except with <resolution> possibly altered by computed for 'snap' value |
| Animation type | discrete |

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

image-resolution =   
  [ from-image || <resolution> ]  &&  
  snap?                             
  
```

Examples
--------

### Setting a high dpi for print

When printing the document, use a higher resolution.


```css
@media print {
  .myimage {
    image-resolution: 300dpi;
  }
}
```

### Use image resolution with fallback

Uses the resolution from the image. If the image does not have a resolution, use 300dpi rather than the default 1dppx.


```css
.myimage {
  image-resolution: from-image 300dpi;
}
```

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

| Specification |
| --- |
| CSS Images Module Level 4 # the-image-resolution |

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

No browser currently supports this property.

See also
--------

* Other image-related CSS properties: `object-fit`, `object-position`, `image-orientation`, `image-rendering`.
* Chromium bug: 1086473.
border-block
============

The **`border-block`** CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.

Try it
------

`border-block` can be used to set the values for one or more of `border-block-width`, `border-block-style`, and `border-block-color` setting both the start and end in the block dimension at once. The physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top` and `border-bottom` or `border-right`, and `border-left` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

The borders in the other dimension can be set with `border-inline`, which sets `border-inline-start`, and `border-inline-end`.

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

This property is a shorthand for the following CSS properties:

* `border-block-color`
* `border-block-style`
* `border-block-width`
Syntax
------


```css
border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

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

### Values

The `border-block` is specified with one or more of the following, in any order:

`<'border-width'>`

The width of the border. See `border-width`.

`<'border-style'>`

The line style of the border. See `border-style`.

`<color>`

The color of the border.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-block-width`: `medium`
* `border-block-style`: `none`
* `border-block-color`: `currentcolor`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-block-width`: absolute length; `0` if the border style is `none` or `hidden`
* `border-block-style`: as specified
* `border-block-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-width`: by computed value type
* `border-block-style`: discrete
* `border-block-color`: by computed value type
 |

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

border-block =   
  <'border-block-start'>    
  
```

Examples
--------

### Border with 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-rl;
  border-block: 5px dashed blue;
}
```


#### Results

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block |

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top`, `border-right`, `border-bottom`, or `border-left`.
* `writing-mode`, `direction`, `text-orientation`
page-break-inside
=================

**Warning:** This property has been replaced by the `break-inside` property.

The **`page-break-inside`** CSS property adjusts page breaks *inside* the current element.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
page-break-inside: auto;
page-break-inside: avoid;

/\* Global values \*/
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: revert-layer;
page-break-inside: unset;
```

### Values

`auto`

Initial value. Automatic page breaks (neither forced nor forbidden).

`avoid`

Avoid page breaks inside the element.

Page break aliases
------------------

The `page-break-inside` property is now a legacy property, replaced by `break-inside`.

For compatibility reasons, `page-break-inside` should be treated by browsers as an alias of `break-inside`. This ensures that sites using `page-break-inside` continue to work as designed. A subset of values should be aliased as follows:

| page-break-inside | break-inside |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

page-break-inside =   
  avoid    |  
  auto     |  
  inherit    
  
```

Examples
--------

### Avoiding page breaks inside elements

#### HTML


```html
<div class="page">
  <p>This is the first paragraph.</p>
  <section class="list">
    <span>A list</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph, it contains more text.</p>
  <p>
    This is the fourth paragraph. It has a little bit more text than the third
    one.
  </p>
</div>
```


#### CSS


```css
.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}
```


#### Result

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # page-break-inside |

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

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

See also
--------

* `break-before`, `break-after`, `break-inside`
* `page-break-after`, `page-break-before`
* `orphans`, `widows`
:-moz-locale-dir(ltr)
=====================

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

The **`:-moz-locale-dir(ltr)`** CSS pseudo-class is a Mozilla extension that matches an element if the user interface is being displayed left-to-right. This is determined by the preference `intl.uidirection.locale` (where `locale` is the current locale) being set to "ltr".

**Note:** This selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (This can vary from window to window, and even from tab to tab.) It also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics.

**Warning:** This selector does not work properly from HTML; it always matches, regardless of whether the UI locale is left-to-right or right-to-left.

Syntax
------


```css
:-moz-locale-dir(ltr) {
  /\* ... \*/
}
```

Examples
--------

This example doesn't work if you're not using Firefox, and may not work even in Firefox due to an issue with the selector not working properly with HTML content. It was designed for use with `XUL`.

### HTML


```html
<p>If you're using a left-to-right interface, this should be red.</p>
```

### CSS


```css
p:-moz-locale-dir(ltr) {
  color: red;
}
```

### Result

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

Not part of any standard.

See also
--------

* `:dir(…)`
* `:-moz-locale-dir(rtl)`
offset-distance
===============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`offset-distance`** CSS property specifies a position along an `offset-path` for an element to be placed.

Try it
------

Syntax
------


```css
/\* Default value \*/
offset-distance: 0;

/\* the middle of the offset-path \*/
offset-distance: 50%;

/\* a fixed length positioned along the path \*/
offset-distance: 40px;

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


``<length-percentage>``

A length that specifies how far the element is along the path (defined with `offset-path`).

100% represents the total length of the path (when the `offset-path` is defined as a basic shape or `path()`).

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | refer to the total path length |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | a length, percentage or calc(); |

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

offset-distance =   
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Using offset-distance in an animation

The motion aspect in CSS Motion Path typically comes from animating the `offset-distance` property. If you want to animate an element along its full path, you would define its `offset-path` and then set up an animation that takes the `offset-distance` from `0%` to `100%`.

#### HTML


```html
<div id="motion-demo"></div>
```


#### CSS


```css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```


#### Result

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

| Specification |
| --- |
| Motion Path Module Level 1 # offset-distance-property |

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

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

See also
--------

* `offset`
* `offset-anchor`
* `offset-path`
* `offset-position`
* `offset-rotate`
border-block-end-color
======================

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

Try it
------

Syntax
------


```css
border-block-end-color: yellow;
border-block-end-color: #f5f6f7;

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


Related properties are `border-block-start-color`, `border-inline-start-color`, and `border-inline-end-color`, which define the other border colors of the element.

### Values

`<color>`

The color of the border.

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

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

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

border-block-end-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Border color with 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;
  border: 10px solid blue;
  border-block-end-color: red;
}
```


#### Results

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

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

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`
margin-inline-start
===================

The **`margin-inline-start`** CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. 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-start: 10px; /\* An absolute length \*/
margin-inline-start: 1em; /\* relative to the text size \*/
margin-inline-start: 5%; /\* relative to the nearest block container's width \*/

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

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


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

### Values

The `margin-inline-start` 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-start =   
  <'margin-top'>    
  
```

Examples
--------

### Setting inline start 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-start: 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-end`
* The mapped physical properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation`