recursal/MDN huggingface dataset:
sqrt()
======

The **`sqrt()`** CSS function is an exponential function that returns the square root of a number.

The function `pow(x, 0.5)` is equivalent to `sqrt(x)`.

Syntax
------


```css
/\* A <number> value \*/
width: calc(100px * sqrt(9)); /\* 300px \*/
width: calc(100px * sqrt(25)); /\* 500px \*/
width: calc(100px * sqrt(100)); /\* 1000px \*/
```

### Parameters

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

`x`

A calculation which resolves to a `<number>` greater than or equal to 0.

### Return value

Returns a `<number>` which is the square root of `x`.

* if `x` is `+∞`, the result is `+∞`.
* If `x` is `0⁻`, the result is `0⁻`.
* If `x` is less than `0`, the result is `NaN`.
### Formal syntax
```

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

### Scale sizes based on square root

This example shows how you can use the `sqrt()` function to calculate sizes.

#### HTML


```html
<div class="boxes">
  <div class="box">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>
```


#### CSS

Here we are using CSS custom properties to define the sizes to be used. First, we declare the first size (`--size-0`), which is then used to calculate the other sizes.

* `--size-1` is calculated by multiplying the value of `--size-0` (50px) by the square root of 4 (2), which results in 100px.
* `--size-2` is calculated by multiplying the value of `--size-0` (50px) by the square root of 9 (3), which results in 150px.
* `--size-3` is calculated by multiplying the value of `--size-0` (50px) by the square root of 16 (4), which results in 200px.


```css
:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * sqrt(4)); /\* 100px \*/
  --size-2: calc(var(--size-0) * sqrt(9)); /\* 150px \*/
  --size-3: calc(var(--size-0) * sqrt(16)); /\* 200px \*/
}
```


```
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```


The sizes are then applied as the `width` and `height` values of the selectors.


```css
.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}
```


#### Result

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

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

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

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

See also
--------

* `pow()`
* `hypot()`
* `log()`
* `exp()`
inset-block-end
===============

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

Try it
------

Syntax
------


```css
/\* <length> values \*/
inset-block-end: 3px;
inset-block-end: 2.4em;

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

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

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

### Values

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

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | logical-height of containing block |
| Computed value | 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-end =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting block end offset

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


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

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

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

See also
--------

* The properties which defines other insets: `inset-block-start`, `inset-inline-start`, and `inset-inline-end`
* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* `writing-mode`, `direction`, `text-orientation`
:picture-in-picture
===================

The **`:picture-in-picture`** CSS pseudo-class matches the element which is currently in picture-in-picture mode.

Syntax
------


```css
:picture-in-picture {
  /\* ... \*/
}
```

Usage notes
-----------

The `:picture-in-picture` pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.

Examples
--------

In this example, a video has a box shadow when it is displayed in the floating window.

### HTML

The page's HTML looks like this:


```html
<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>

<p>
  This demo uses the <code>:picture-in-picture</code> pseudo-class to
  automatically change the style of a video entirely using CSS.
</p>

<video id="pip-video"></video>
```


The `<video>` with the ID `"pip-video"` will change between having a red box shadow or not, depending on whether or not it is displayed in the picture-in-picture floating window.

### CSS

The magic happens in the CSS.


```css
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # pip-state |

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

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

See also
--------

* Picture-in-picture API
* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
CSS scoping
===========

The **CSS scoping** module defines the CSS scoping and encapsulation mechanisms, focusing on the Shadow DOM scoping mechanism.

CSS styles are either global in scope or scoped to a shadow tree. Globally scoped styles apply to all the elements in the node tree that match the selector, including custom elements in that tree, but not to the shadow trees composing each custom element. Selectors and their associated style definitions don't bleed between scopes.

Within the CSS of a shadow tree, selectors don't select elements outside the tree, either in the global scope or in other shadow trees. Each custom element has its own shadow tree, which contains all the components that make up the custom element (but not the custom element, or "host", itself).

Sometimes it's useful to be able to style a host from inside the shadow tree context. The CSS scoping module makes this possible by defining selectors that:

* Enable a shadow tree to style its host.
* Enable external CSS to style elements within a shadow DOM (but only if the associated custom element is set up to accept external styles).
Reference
---------

### Selectors

* `:host`
* `:host()`
* `:host-context()`
* `::slotted`
Guides
------

Web components

An introduction to the different technologies used to create reusable web components — custom elements whose functionality is encapsulated away from the rest of your code.

Using shadow DOM

Shadow DOM fundamentals, including attaching a shadow DOM to an element, adding to the shadow DOM tree, and styling.

Using templates and slots

Defining reusable HTML structure using `<template>` and `<slot>` elements, and using that structure inside web components.

Using custom elements

Introduction to the Custom Elements API, the JavaScript API used to create custom elements that encapsulate functionality.

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

* CSS `:defined` pseudo-class
* CSS `::part` pseudo-element
* HTML `<template>` element
* HTML `<slot>` element
* HTML `slot` attribute
* Shadow tree glossary term
* DOM glossary term
* Compound selector term
* Selector list term
* Web components interfaces, properties, and methods
    + `CustomElementRegistry` interface
    + `Element` API
        - `Element.slot` property
        - `Element.assignedSlot` property
        - `Element.attachShadow()` method
    + `HTMLSlotElement` interface
    + `HTMLTemplateElement` interface
    + `ShadowRoot` interface

**Note:** Despite the name, the `:scope` pseudo-class, which represents elements that are a reference point (or scope) for selectors to match against, is defined in the Selectors module. It is otherwise unrelated to the CSS scoping module, which is focused on scoping as it pertains to the Shadow DOM scoping mechanism.

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

| Specification |
| --- |
| CSS Scoping Module Level 1  |

See also
--------

* CSS selectors module
* CSS pseudo elements module
* CSS namespaces module
* CSS shadow-parts module
* Template, slot, and shadow on web.dev (2023)
* Custom element best practices on web.dev (2019)
initial-letter
==============

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

The `initial-letter` CSS property sets styling for dropped, raised, and sunken initial letters.

Syntax
------


```css
/\* Keyword values \*/
initial-letter: normal;

/\* Numeric values \*/
initial-letter: 1.5; /\* Initial letter occupies 1.5 lines \*/
initial-letter: 3; /\* Initial letter occupies 3 lines \*/
initial-letter: 3 2; /\* Initial letter occupies 3 lines and
 sinks 2 lines \*/

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


The keyword value `normal`, or a `<number>` optionally followed by an `<integer>`.

### Values

`normal`

No special initial-letter effect. Text behaves as normal.

`<number>`

Defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed.

`<integer>`

Defines the number of lines the initial letter should sink when the size of it is given. Values must be greater than zero. If omitted, it duplicates the size value, floored to the nearest positive whole number.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | `::first-letter` pseudo-elements and inline-level first child of a block container |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

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

initial-letter =   
  normal                               |  
  <number [1,∞]> <integer [1,∞]>       |  
  <number [1,∞]> && [ drop | raise ]?    
  
```

Examples
--------

### Setting initial letter size

#### HTML


```html
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>
```


#### CSS


```css
.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}
```


#### Result

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

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # sizing-drop-initials |

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

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

See also
--------

* `initial-letter-align`
* Drop caps in CSS
Inline formatting context
=========================

This article explains the inline formatting context.

Core concepts
-------------

The inline formatting context is part of the visual rendering of a web page. Inline boxes are laid out one after the other, in the direction sentences run in the writing mode in use:

* In a horizontal writing mode, boxes are laid out horizontally, starting on the left.
* In a vertical writing mode they would be laid out vertically starting at the top.

In the example below, the two (`<div>`) elements with the black borders form a block formatting context, inside which each word participates in an inline formatting context. The boxes in the horizontal writing mode run horizontally, and the vertical writing mode boxes run vertically.

Boxes forming a line are contained by a rectangular area called a line box. This box will be large enough to contain all of the inline boxes in that line; when there is no more room in the inline direction another line will be created. Therefore, a paragraph is a set of inline line boxes, stacked in the block direction.

When an inline box is split, margins, borders, and padding have no visual effect where the split occurs. In the next example there is a (`<span>`) element wrapping a set of words wrapping onto two lines. The border on the `<span>` breaks at the wrapping point.

Margins, borders, and padding in the inline direction are respected. In the example below you can see how the margin, border, and padding on the inline `<span>` element are added.

**Note:** I am using the logical, flow-relative properties — `padding-inline-start` rather than `padding-left` — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in Logical Properties and Values.

Alignment in the block direction
--------------------------------

Inline boxes may be aligned in the block direction in different ways, using the `vertical-align` property, which will align on the block axis in vertical writing modes (therefore not vertically at all!). In the example below the large text is making the line box of the first sentence larger, therefore the `vertical-align` property can be used to align the inline boxes either side of it. I have used the value `top`, try changing it to `middle`, `bottom`, or `baseline`.

Alignment in the inline direction
---------------------------------

If there is additional space in the inline direction, the `text-align` property can be used to align the inline boxes within their line box. Try changing the value of `text-align` below to `end`.

Effect of floats
----------------

Line boxes usually have the same size in the inline direction, therefore the same width if working in a horizontal writing mode, or height if working in a vertical writing mode. If there is a `float` within the same block formatting context however, the float will cause the line boxes that wrap the float to become shorter.

See also
--------

* Block formatting context
* Visual Formatting Model
CSS motion path
===============

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 **CSS motion path** module allows authors to animate any graphical object along a custom path.

The idea is that when you want to animate an element moving along a path, you previously only had animating translation, position, etc. at your disposal, which wasn't ideal and only allowed for simple movements. With `offset-path` you can define a specific path of any shape you want. You then animate it along that path by animating `offset-distance`, and can choose to rotate it at any point using `offset-rotate`.

Basic example
-------------


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



```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%;
  }
}
```

Reference
---------

### Properties

* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
### Functions

* `ray()`
Specifications
--------------

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scrollbar-color
===============

The **`scrollbar-color`** CSS property sets the color of the scrollbar track and thumb.

The **track** refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.

The **thumb** refers to the moving part of the scrollbar, which usually floats on top of the track.

When `scrollbar-color` value is set on the document's root element, the values are applied to the viewport scrollbars.

Syntax
------


```css
/\* Keyword values \*/
scrollbar-color: auto;

/\* <color> values \*/
scrollbar-color: rebeccapurple green; /\* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. \*/

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

### Values

`<scrollbar-color>`

Defines the color of the scrollbar.

|  |  |
| --- | --- |
| `auto` | 
 Default platform rendering for the track portion of the scrollbar, in
 the absence of any other related scrollbar color properties.
  |
| `<color> <color>` | 
 Applies the first color to the scrollbar thumb, the second to the
 scrollbar track.
  |


**Note:** `@media (forced-colors: active)` sets `scrollbar-color` to `auto`.

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

When using `scrollbar-color` property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scrolling boxes |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |

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

scrollbar-color =   
  auto        |  
  <color>{2}    
  
```

Examples
--------

### Coloring overflow scrollbars

#### CSS


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #007 #bada55;
}
```


#### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```


#### Result

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

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |

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

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

See also
--------

* CSS overflow module
* CSS scrollbars styling module
* `overflow`
* `scrollbar-gutter`
* `scrollbar-width`
<ratio>
=======

The **`<ratio>`** CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values.

Syntax
------

In Media Queries Level 3, the `<ratio>` data type consisted of a strictly positive `<integer>` followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second strictly positive `<integer>`. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height.

In Media Queries Level 4, the `<ratio>` date type is updated to consist of a strictly positive `<number>` followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second strictly positive `<number>`. In addition a single `<number>` as a value is allowable.

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

<ratio> =   
  <number [0,∞]> [ / <number [0,∞]> ]?    
  
```

Examples
--------

### Use in a media query


```css
@media screen and (min-aspect-ratio: 16/9) {
  /\* … \*/
}
```

### Common aspect ratios

|  | Ratio | Usage |
| --- | --- | --- |
| A rectangle that is three units tall and four units wide | `4/3` | Traditional TV format in the twentieth century. |
| A rectangle that is nine units tall and sixteen units wide | `16/9` | Modern "widescreen" TV format. |
| A rectangle that is 1 unit tall and 1.85 units wide | `185/100` = `91/50` | The most common movie format since the 1960s. |
| A rectangle that is 1 unit tall and 2.39 units wide | `239/100` | "Widescreen," anamorphic movie format. |

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

| Specification |
| --- |
| Media Queries Level 4 # values |

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

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

See also
--------

* `aspect-ratio` media feature
<display-listitem>
==================

The `list-item` keyword causes the element to generate a `::marker` pseudo-element with the content specified by its `list-style` properties (for example a bullet point) together with a principal box of the specified type for its own contents.

Syntax
------

A single value of `list-item` will cause the element to behave like a list item. This can be used together with `list-style-type` and `list-style-position`.

`list-item` can also be combined with any `<display-outside>` keyword and the `flow` or `flow-root` `<display-inside>` keywords.

**Note:** In browsers that support the two-value syntax, if no inner value is specified it will default to `flow`. If no outer value is specified, the principal box will have an outer display type of `block`.

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

<display-listitem> =   
  <display-outside>?     &&  
  [ flow | flow-root ]?  &&  
  list-item                
  
<display-outside> =   
  block   |  
  inline  |  
  run-in    
  
```

Examples
--------

### HTML


```html
<div class="fake-list">I will display as a list item</div>
```

### CSS


```css
.fake-list {
  display: list-item;
  list-style-position: inside;
}
```

### Result

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

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-listitem |

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

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

See also
--------

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`