recursal/MDN huggingface dataset:
Layout mode
===========

A CSS **layout mode**, sometimes called *layout*, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:

* *Normal flow* — all elements are part of normal flow until you do something to take them out of it. Normal flow includes *block layout*, designed for laying out boxes such as paragraphs and *inline layout*, which lays out inline items such as text.
* *Table layout*, designed for laying out tables.
* *Float layout*, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.
* *Positioned layout*, designed for positioning elements without much interaction with other elements.
* *Multi-column layout*, designed for laying content out in columns as in a newspaper.
* *Flexible box layout*, designed for laying out complex pages that can be resized smoothly.
* *Grid layout*, designed for laying out elements relative to a fixed grid.

**Note:** Not all CSS properties apply to all *layout modes*. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements
text-combine-upright
====================

The **`text-combine-upright`** CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.

This is used to produce an effect that is known as tate-chū-yoko 縦中横 in Japanese, or as 橫向文字 in Chinese.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
text-combine-upright: none;
text-combine-upright: all;

/\* Digits values \*/
text-combine-upright: digits; /\* fits 2 consecutive digits horizontally inside vertical text \*/
text-combine-upright: digits 4; /\* fits up to 4 consecutive digits horizontally inside vertical text \*/

/\* Global values \*/
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;
```

### Values

`none`

There is no special processing.

`all`

Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.

`digits <integer>?`

Attempts to display a sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | non-replaced inline elements |
| Inherited | yes |
| Computed value | specified keyword, plus integer if 'digits' |
| Animation type | Not animatable |

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

text-combine-upright =   
  none                         |  
  all                          |  
  [ digits <integer [2,4]>? ]    
  
```

Examples
--------

### Using 'all' with horizontal text

The all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.

#### HTML


```html
<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
 class="num"
 >29</span
 >日
</p>
```


#### CSS


```css
html {
  writing-mode: vertical-rl;
  font: 24px serif;
}
.num {
  text-combine-upright: all;
}
```


#### Results

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-combine-upright |

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

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

See also
--------

* `writing-mode`, `text-orientation`
::-webkit-inner-spin-button
===========================

**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-inner-spin-button`** CSS pseudo-element is used to style the inner part of the spinner button of number picker input elements.

Syntax
------


```css
::-webkit-inner-spin-button {
  /\* ... \*/
}
```

Examples
--------

These examples work only in browsers based on WebKit and Blink.

### Changing the cursor in the spin controls

In this example, the CSS `cursor` is changed to `pointer` whenever the cursor is positioned over the inner part of the input's spin controls.

#### HTML


```html
<input type="number" />
```


#### CSS


```css
input[type="number"]::-webkit-inner-spin-button {
  cursor: pointer;
}
```


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

* `::-webkit-textfield-decoration-container`
* Styling Form Controls – WebKit
:host
=====

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`:host`** CSS pseudo-class selects the shadow host of the shadow DOM containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.

**Note:** This has no effect when used outside a shadow DOM.

Try it
------


```css
/\* Selects a shadow root host \*/
:host {
  font-weight: bold;
}
```

Syntax
------


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

Examples
--------

### Styling the shadow host

The following snippets are taken from our host-selectors example (see it live also).

In this example we have a simple custom element — `<context-span>` — that you can wrap around text:


```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```


Inside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:


```js
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
```


The `:host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document.

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

See also
--------

* Web components
* `:host()`
* `:host-context()`
* `::slotted`
* CSS scoping module
grid-template-areas
===================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

Try it
------

Those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties `grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end`, and their shorthands `grid-row`, `grid-column`, and `grid-area`.

Syntax
------


```css
/\* Keyword value \*/
grid-template-areas: none;

/\* <string> values \*/
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

/\* Global values \*/
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;
```

### Values

`none`

The grid container doesn't define any named grid areas.

``<string>`+`

A row is created for every separate string listed, and a column is created for each cell in the string. Multiple cell tokens with the same name within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

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

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

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

grid-template-areas =   
  none       |  
  <string>+    
  
```

Examples
--------

### Specifying named grid areas

#### HTML


```html
<div id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</div>
```


#### CSS


```css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```


#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-template-areas-property |

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

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

See also
--------

* Related CSS properties: `grid-template-rows`, `grid-template-columns`, `grid-template`
* Grid Layout Guide: *Grid template areas*
* Video tutorial: *Grid Template Areas*
-webkit-line-clamp
==================

The **`-webkit-line-clamp`** CSS property allows limiting of the contents of a block to the specified number of lines.

It only works in combination with the `display` property set to `-webkit-box` or `-webkit-inline-box` and the `-webkit-box-orient` property set to `vertical`.

In most cases you will also want to set `overflow` to `hidden`, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.

When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.

**Note:** This property was originally implemented in WebKit and has some issues. It got standardized in CSS Overflow Module Level 4 for legacy support. The CSS Overflow Module Level 4 specification also defines a `line-clamp` property, which is meant to replace this property and avoid its issues.

Syntax
------


```css
/\* Keyword value \*/
-webkit-line-clamp: none;

/\* <integer> values \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/\* Global values \*/
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;
```

### Values

`none` 
Experimental

This value specifies that the content won't be clamped.

`<integer>`

This value specifies the number of lines after which the content will be clamped. It must be greater than 0.

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

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

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

-webkit-line-clamp =   
  none             |  
  <integer [1,∞]>    
  
```

Examples
--------

### Truncating a paragraph

#### HTML


```html
<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>
```


#### CSS


```css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```


#### Result

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

| Specification |
| --- |
| CSS Overflow Module Level 4 # propdef--webkit-line-clamp |

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

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

See also
--------

* Line Clampin' (Truncating Multiple Line Text)
* `line-clamp`
:-moz-last-node
===============

**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-last-node`** CSS pseudo-class is a Mozilla extension that represents any element that is the last child node of some other element. It differs from `:last-child` because it does not match a last-child element with (non-whitespace) text after it.

**Note:** Any whitespace at the end of an element is ignored for the determination of `:-moz-last-node`.

Syntax
------


```css
:-moz-last-node {
  /\* ... \*/
}
```

Examples
--------

### CSS


```css
span:-moz-last-node {
  background-color: lime;
}
```

### HTML


```html
<p>
  <span>This does not match.</span>
  <span>This matches!</span>
</p>

<p>
  <span>This doesn't match because it's followed by text.</span>
  Blahblah.
</p>
```

### Result

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

Not part of any standard.

See also
--------

* `:-moz-first-node`
* `:last-child`
list-style-image
================

The **`list-style-image`** CSS property sets an image to be used as the list item marker.

It is often more convenient to use the shorthand `list-style`.

Try it
------

**Note:** This property is applied to list items, i.e. elements with ``display`: list-item;` by default this includes `<li>` elements. Because this property is inherited, it can be set on the parent element (normally `<ol>` or `<ul>`) to let it apply to all list items.

Syntax
------


```css
/\* Keyword values \*/
list-style-image: none;

/\* <url> values \*/
list-style-image: url("starsolid.gif");

/\* valid image values \*/
list-style-image: linear-gradient(to left bottom, red, blue);

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

### Values

`<image>`

A valid image to use as the marker.

`none`

Specifies that no image is used as the marker. If this value is set, the marker defined in `list-style-type` will be used instead. This is the default value for `list-style`.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | list items |
| Inherited | yes |
| Computed value | The keyword `none` or the computed <image> |
| Animation type | discrete |

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

list-style-image =   
  <image>  |  
  none       
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

### Using a url value

This example has a star as a marker, which we include using the `url()` image function.

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```


#### CSS


```css
ul {
  list-style-image: url("starsolid.gif");
}
```


#### Result

### Using a gradient

This example has a CSS gradient as a marker, which we create uses the `linear-gradient()` image function.

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```


#### CSS


```css
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}
```


#### Result

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # image-markers |

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

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

See also
--------

* `list-style` shorthand
* `list-style-type` property
* `list-style-position` property
* `::marker` pseudo-element
* CSS lists and counters module
* CSS counter styles module
<resolution>
============

The **`<resolution>`** CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.

On screens, the units are related to *CSS* inches, centimeters, or pixels, not physical values.

Syntax
------

The `<resolution>` data type consists of a strictly positive `<number>` followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

### Units

`dpi`

Represents the number of dots per inch. Screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. As 1 inch is 2.54 cm, `1dpi ≈ 0.39dpcm`.

`dpcm`

Represents the number of dots per centimeter. As 1 inch is 2.54 cm, `1dpcm ≈ 2.54dpi`.

`dppx`

Represents the number of dots per `px` unit. Due to the 1:96 fixed ratio of CSS `in` to CSS `px`, `1dppx` is equivalent to `96dpi`, which corresponds to the default resolution of images displayed in CSS as defined by `image-resolution`.

`x`

Alias for `dppx`.


**Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0dpi`, `0dpcm`, or `0dppx`.

Examples
--------

### Use in a media query


```css
@media print and (min-resolution: 300dpi) {
  /\* … \*/
}
```

### Valid resolutions
```

96dpi
50.82dpcm
3dppx
```

### Invalid resolutions
```

72 dpi     Spaces are not allowed between the number and the unit.
ten dpi    The number must use digits only.
0          The unit is required.
```

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

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

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

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

See also
--------

* resolution media feature
* The `image-resolution` property
* Using @media queries
::-webkit-slider-thumb
======================

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

The **`::-webkit-slider-thumb`** CSS pseudo-element represents the "thumb" that the user can move within the "groove" of an `<input>` of `type="range"` to alter its numerical value.

Syntax
------


```css
::-webkit-slider-thumb {
  /\* ... \*/
}
```

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

* `::-webkit-slider-runnable-track`
* Similar pseudo-elements used by other browsers:
    + `::-moz-range-thumb`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
* Couple of Gotchas to Watch-out For
inset-block
===========

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

Try it
------

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

This property is a shorthand for the following CSS properties:

* `inset-block-end`
* `inset-block-start`
Syntax
------


```css
/\* <length> values \*/
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /\* value applied to start and end \*/

/\* <percentage>s of the width or height of the containing block \*/
inset-block: 10% 5%;

/\* Keyword value \*/
inset-block: auto;

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

### Values

The `inset-block` property takes the same values as the `left` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `inset-block-start`: `auto`
* `inset-block-end`: `auto`
 |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | logical-height of containing block |
| Computed value | as each of the properties of the shorthand:* `inset-block-start`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
* `inset-block-end`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
 |
| Animation type | a length, percentage or calc(); |

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

inset-block =   
  <'top'>{1,2}    
  
```

Examples
--------

### Setting block start and end offsets

#### 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;
  position: relative;
  inset-block: 20px 50px;
  background-color: #c8c800;
}
```


#### Result

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

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

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

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

See also
--------

* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* The mapped physical shortcut: `inset`
* The mapped inline shortcut: `inset-inline`
* `writing-mode`, `direction`, `text-orientation`