recursal/MDN huggingface dataset:
mask-type
=========

The **`mask-type`** CSS property sets whether an SVG `<mask>` element is used as a *luminance* or an *alpha* mask. It applies to the `<mask>` element itself.

This property may be overridden by the `mask-mode` property, which has the same effect but applies to the element where the mask is used. Alpha masks will generally be faster to render.

Syntax
------


```css
/\* Keyword values \*/
mask-type: luminance;
mask-type: alpha;

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


The `mask-type` property is specified as one of the keyword values listed below.

### Values

`luminance`

Is a keyword indicating that the associated mask image is a luminance mask, i.e., that its relative luminance values must be used when applying it.

`alpha`

Is a keyword indicating that the associated mask image is an alpha mask, i.e., that its alpha channel values must be used when applying it.

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

|  |  |
| --- | --- |
| Initial value | `luminance` |
| Applies to | `<mask>` elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

mask-type =   
  luminance  |  
  alpha        
  
```

Examples
--------

### Setting an alpha mask

#### HTML


```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```


#### CSS


```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128 128 128);
  border: solid 1px black;
  mask: url("#m");
}
```


#### Result

### Setting a luminance mask

#### HTML


```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask
 id="m"
 maskContentUnits="objectBoundingBox"
 style="mask-type:luminance">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```


#### CSS


```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128 128 128);
  border: solid 1px black;
  mask: url("#m");
}
```


#### Result

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-type |

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

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

See also
--------

* Other mask-related properties: `mask`, `mask-mode`
-moz-user-focus
===============

**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-user-focus`** CSS property is used to indicate whether an element can have the focus.

By setting its value to `ignore`, you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence.

Syntax
------


```css
/\* Keyword values \*/
-moz-user-focus: normal;
-moz-user-focus: ignore;

/\* Global values \*/
-moz-user-focus: inherit;
-moz-user-focus: initial;
-moz-user-focus: unset;
```

### Values

`ignore`

The element does not accept keyboard focus and will be skipped in the tab order.

`normal`

The element can accept keyboard focus.

`none`

?

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

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

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

-moz-user-focus =
  ignore | normal | none
```

Examples
--------

### HTML


```html
<input class="ignored" value="The user cannot focus on this element." />
```

### CSS


```css
.ignored {
  -moz-user-focus: ignore;
}
```

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

* `-moz-user-input`
* `user-modify`
* `-moz-user-select`
caption-side
============

The **`caption-side`** CSS property puts the content of a table's `<caption>` on the specified side. The values are relative to the `writing-mode` of the table.

Try it
------

Syntax
------


```css
/\* Directional values \*/
caption-side: top;
caption-side: bottom;

/\* Logical values \*/
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

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


The `caption-side` property is specified as one of the keyword values listed below.

### Values

`top`

The caption box should be positioned above the table.

`bottom`

The caption box should be positioned below the table.

`block-start`

The caption box should be positioned at the block start edge of the table.

`block-end`

The caption box should be positioned at the block end edge of the table.

`inline-start`

The caption box should be positioned at the inline start edge of the table.

`inline-end`

The caption box should be positioned at the inline end edge of the table.

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

|  |  |
| --- | --- |
| Initial value | `top` |
| Applies to | table-caption elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

caption-side =   
  top     |  
  bottom    
  
```

Examples
--------

### Setting captions above and below

#### HTML


```html
<table class="top">
  <caption>
    Caption ABOVE the table
  </caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    Caption BELOW the table
  </caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>
```


#### CSS


```css
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}
```


#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-caption-side |
| CSS Logical Properties and Values Level 1 # caption-side |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
min-inline-size
===============

The **`min-inline-size`** CSS property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the `min-width` or the `min-height` property, depending on the value of `writing-mode`.

Try it
------

Syntax
------


```css
/\* <length> values \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* <percentage> values \*/
min-inline-size: 10%;

/\* Keyword values \*/
min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content;
min-inline-size: fit-content(20em);

/\* Global values \*/
min-inline-size: inherit;
min-inline-size: initial;
min-inline-size: revert;
min-inline-size: revert-layer;
min-inline-size: unset;
```


If the writing mode is vertically oriented, the value of `min-inline-size` relates to the minimum height of the element; otherwise, it relates to the minimum width of the element. A related property is `min-block-size`, which defines the other dimension of the element.

### Values

The `min-inline-size` property takes the same values as the `min-width` and `min-height` properties.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | same as `width` and `height` |
| Inherited | no |
| Percentages | inline-size of containing block |
| Computed value | same as `min-width` and `min-height` |
| Animation type | a length, percentage or calc(); |

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

min-inline-size =   
  <'min-width'>    
  
```

Examples
--------

### Setting minimum inline size for vertical text

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `min-width` and `min-height`
* `writing-mode`
border-left-style
=================

The **`border-left-style`** CSS property sets the line style of an element's left `border`.

Try it
------

**Note:** The specification doesn't define how borders of different styles connect in the corners.

Syntax
------


```css
/\* Keyword values \*/
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

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


The `border-left-style` property is specified as a single `<line-style>` keyword value.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

border-left-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### Setting border-left-style

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-left-style example classes \*/
.b1 {
  border-left-style: none;
}
.b2 {
  border-left-style: hidden;
}
.b3 {
  border-left-style: dotted;
}
.b4 {
  border-left-style: dashed;
}
.b5 {
  border-left-style: solid;
}
.b6 {
  border-left-style: double;
}
.b7 {
  border-left-style: groove;
}
.b8 {
  border-left-style: ridge;
}
.b9 {
  border-left-style: inset;
}
.b10 {
  border-left-style: outset;
}
```


#### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-style |

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

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

See also
--------

* The other style-related border properties: `border-bottom-style`, `border-right-style`, `border-top-style`, and `border-style`.
* The other left-border-related properties: `border-left`, `border-left-color`, and `border-left-width`.
border-inline-end-style
=======================

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

Try it
------

Syntax
------


```css
/\* <'border-style'> values \*/
border-inline-end-style: dashed;
border-inline-end-style: dotted;
border-inline-end-style: groove;

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


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

### Values

`<'border-style'>`

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

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

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

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

border-inline-end-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### Setting inline-end-style

#### 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: 5px solid blue;
  border-inline-end-style: dashed;
}
```


#### Results

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

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

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-style`, `border-right-style`, `border-bottom-style`, or `border-left-style`.
* `writing-mode`, `direction`, `text-orientation`
mod()
=====

The **`mod()`** CSS function returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (`%`). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor.

> 
> For example, the CSS `mod(21, -4)` function returns the remainder of `-1`. When dividing 21 by -4, the result is 5 with a remainder of -1. The full calculation is `21 / -4 = -4 * 5 - 1`.
> 
> 
> 

Syntax
------


```css
/\* Unitless <number> \*/
line-height: mod(7, 2); /\* 1 \*/
line-height: mod(14, 5); /\* 4 \*/
line-height: mod(3.5, 2); /\* 1.5 \*/

/\* Unit based <percentage> and <dimension> \*/
margin: mod(15%, 2%); /\* 1% \*/
margin: mod(18px, 4px); /\* 2px \*/
margin: mod(19rem, 5rem); /\* 4rem \*/
margin: mod(29vmin, 6vmin); /\* 5vmin \*/
margin: mod(1000px, 29rem); /\* 72px - if root font-size is 16px \*/

/\* Negative/positive values \*/
rotate: mod(100deg, 30deg); /\* 10deg \*/
rotate: mod(135deg, -90deg); /\* -45deg \*/
rotate: mod(-70deg, 20deg); /\* 10deg \*/
rotate: mod(-70deg, -15deg); /\* -10deg \*/

/\* Calculations \*/
scale: mod(10 * 2, 1.7); /\* 1.3 \*/
rotate: mod(10turn, 18turn / 3); /\* 4turn \*/
transition-duration: mod(20s / 2, 3000ms * 2); /\* 4s \*/
```

### Parameter

The `mod(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, number, dimension, or `<percentage>`, for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as `<length>`, `<angle>`, `<time>`, or `<frequency>` to be valid.

`dividend`

A calculation that resolves to a `<number>`, `<dimension>`, or `<percentage>` representing the dividend.

`divisor`

A calculation that resolves to a `<number>`, `<dimension>`, or `<percentage>` representing the divisor.

### Return value

Returns a `<number>`, `<dimension>`, or `<percentage>` (corresponds to the parameters' type) representing the modulus, that is, the operation left over.

* If `divisor` is `0`, the result is `NaN`.
* If `dividend` is `infinite`, the result is `NaN`.
* If `divisor` is positive the result is positive (`0⁺`), and if `divisor` is negative the result is negative (`0⁻`).
### Formal syntax
```

<mod()> =   
  mod( <calc-sum> , <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          
  
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # funcdef-mod |

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

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

See also
--------

* `round()`
* `rem()`
direction
=========

**Warning:** Where possible, authors are encouraged to avoid using the `direction` CSS property and use the HTML `dir` global attribute instead.

The **`direction`** CSS property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).

Try it
------

Note that text direction is usually defined within a document (e.g., with HTML's `dir` attribute) rather than through direct use of the `direction` property.

The property sets the base text direction of block-level elements and the direction of embeddings created by the `unicode-bidi` property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.

Unlike the `dir` attribute in HTML, the `direction` property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

The `direction` and `unicode-bidi` properties are the two only properties which are not affected by the `all` shorthand property.

Syntax
------


```css
/\* Keyword values \*/
direction: ltr;
direction: rtl;

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

### Values

`ltr`

Text and other elements go from left to right. This is the default value.

`rtl`

Text and other elements go from right to left.

For the `direction` property to have any effect on inline-level elements, the `unicode-bidi` property's value must be `embed` or `override`.

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

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

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

direction =   
  ltr  |  
  rtl    
  
```

Examples
--------

### Setting right-to-left direction

In the example below are two strings of text, both which are displaying using `direction: rtl`. While the Arabic text is displayed correctly with this setting, the English text now has a full stop in an unusual location.


```css
blockquote {
  direction: rtl;
  width: 300px;
}
```



```html
<blockquote>
  <p>This paragraph is in English but incorrectly goes right to left.</p>
  <p></p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
  <p></p>
</blockquote>
```

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # direction |

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

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

See also
--------

* `unicode-bidi`
* `writing-mode`
* The HTML `dir` global attribute
CSS writing modes
=================

The **CSS writing modes** module defines various international writing modes, such as left-to-right (e.g., used by Latin and Indic scripts), right-to-left (e.g., used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts), and vertical (e.g., used by some Asian scripts).

Reference
---------

### Properties

* `direction`
* `glyph-orientation-horizontal`
* `text-combine-upright`
* `text-orientation`
* `unicode-bidi`
* `writing-mode`
Specifications
--------------

| Specification |
| --- |
| CSS Writing Modes Level 4  |
sign()
======

The **`sign()`** CSS function contains one calculation, and returns `-1` if the numeric value of the argument is negative, `+1` if the numeric value of the argument is positive, `0⁺` if the numeric value of the argument is 0⁺, and `0⁻` if the numeric value of the argument is 0⁻.

**Note:** While ``abs()`` returns the absolute value of the argument, `sign()` returns the sign of the argument.

Syntax
------


```css
/\* property: sign( expression ) \*/
top: sign(20vh - 100px);
```

### Parameters

The `sign(x)` function accepts only one value as its parameter.

`x`

A calculation which resolves to a number.

### Return value

A number representing the sign of `A`:

* If `x` is positive, returns `1`.
* If `x` is negative, returns `-1`.
* If `x` is positive zero, returns `0`.
* If `x` is negative zero, returns `-0`.
* Otherwise, returns `NaN`.
### Formal syntax
```

<sign()> =   
  sign( <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
--------

### Background image position

For example, in `background-position` positive percentages resolve to a negative length, and vice versa, if the background image is larger than the background area. Thus `sign(10%)` might return `1` or `-1`, depending on how the percentage is resolved! (Or even `0`, if it's resolved against a zero length.)


```css
div {
  background-position: sign(10%);
}
```

### Position direction

Another use case is to control the `position` of the element. Either a positive or a negative value.


```css
div {
  position: absolute;
  top: calc(100px * sign(var(--value)));
}
```

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

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

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

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

See also
--------

* `abs()`