recursal/MDN huggingface dataset:
CSS text
========

The **CSS text** module defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.

Reference
---------

### Properties

* `hanging-punctuation`
* `hyphenate-limit-chars`
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last`
* `text-indent`
* `text-justify`
* `text-size-adjust`
* `text-transform`
* `text-wrap` 
Experimental
* `white-space`
* `white-space-collapse` 
Experimental
* `word-break`
* `word-spacing`
Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |
container
=========

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

Newly availableSince February 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 **container** shorthand CSS property establishes the element as a query container and specifies the name or name for the containment context used in a container query.

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

This property is a shorthand for the following CSS properties:

* `container-name`
* `container-type`
Syntax
------


```css
/\* <container-name> \*/
container: my-layout;

/\* <container-name> / <container-type> \*/
container: my-layout / size;

/\* Global Values \*/
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;
```

### Values

`<container-name>`

 A case-sensitive name for the containment context.
 More details on the syntax are covered in the `container-name` property page.


`<container-type>`

 The type of containment context.
 More details on the syntax are covered in the `container-type` property page.


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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `container-name`: `none`
* `container-type`: `normal`
 |
| Applies to | all elements |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `container-name`: no
* `container-type`: no
 |
| Computed value | as each of the properties of the shorthand:* `container-name`: `none` or an ordered list of identifiers
* `container-type`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `container-name`: Not animatable
* `container-type`: a color
 |

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

container =   
  <'container-name'> [ / <'container-type'> ]?    
  
```

Examples
--------

### Establishing inline size containment

Given the following HTML example which is a card component with an image, a title, and some text:


```html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
```


The explicit way to create a container context is to declare a `container-type` with an optional `container-name`:


```css
.post {
  container-type: inline-size;
  container-name: sidebar;
}
```


The `container` shorthand is intended to make this simpler to define in a single declaration:


```css
.post {
  container: sidebar / inline-size;
}
```


You can then target that container by name using the `@container` at-rule:


```css
@container sidebar (min-width: 400px) {
  /\* <stylesheet> \*/
}
```

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

| Specification |
| --- |
| CSS Containment Module Level 3 # container-shorthand |

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

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

See also
--------

* CSS container queries
* `@container` at-rule
* CSS `contain` property
* CSS `container-type` property
* CSS `container-name` property
* CSS `content-visibility` property
max-content
===========

The `max-content` sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.

Syntax
------


```css
/\* Used as a length \*/
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/\* used in grid tracks \*/
grid-template-columns: 200px 1fr max-content;
```

Examples
--------

### Using max-content for box sizing

#### HTML


```html
<div id="container">
  <div class="item">Item</div>
  <div class="item">
    Item with more text in it which will overflow the fixed width box.
  </div>
</div>
```


#### CSS


```css
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

.item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```


#### Result

### Sizing grid columns with max-content

#### HTML


```html
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>
```


#### CSS


```css
#container {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-max-content |

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

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

See also
--------

* Related sizing keywords: `min-content`, `fit-content`
::-moz-range-thumb
==================

**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-range-thumb`** CSS pseudo-element is a Mozilla extension that represents the *thumb* (i.e., virtual knob) of an `<input>` of `type="range"`. The user can move the thumb along the input's track to alter its numerical value.

**Note:** Using `::-moz-range-thumb` with anything but an `<input type="range">` doesn't match anything and has no effect.

Syntax
------


```css
::-moz-range-thumb {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS


```css
input[type="range"]::-moz-range-thumb {
  background-color: green;
}
```

### Result

A progress bar using this style might look something like this:

![The thumb of the 'input type=right' styled in green](/en-US/docs/Web/CSS/::-moz-range-thumb/screen_shot_2015-12-04_at_13.30.08.png)

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

* The pseudo-elements used by Gecko to style other parts of a range input:
    + `::-moz-range-track` represents the groove in which the thumb slides.
    + `::-moz-range-progress` represents the lower portion of the track.
* Similar pseudo-elements used by other browsers:
    + `::-webkit-slider-thumb`, pseudo-element supported by WebKit and Blink (Safari, Chrome, and Opera)
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
CSS shapes
==========

The **CSS shapes** module describes geometric shapes that can be in CSS. For the Level 1 specification, CSS shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box.

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

The example below shows an image that has been floated left, and the `shape-outside` property applied with a value of `circle(50%)`. This creates a circle shape, and the content wrapping the float now wraps around that shape. This changes the length of the wrapping text's line boxes.

Reference
---------

### Properties

* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
### Data types

* `<basic-shape>`
Guides
------

* Overview of shapes
* Shapes from box values
* Basic shapes
* Shapes from images
Specifications
--------------

| Specification |
| --- |
| CSS Shapes Module Level 1  |

See also
--------

* CSS Shapes resources
* CSS Shapes 101
* Creating non-rectangular layouts with CSS Shapes
* How to use CSS Shapes in your web design
* How to get started with CSS Shapes
* What I learned in one weekend with CSS Shapes
* CSS vs. SVG: Shapes and arbitrarily-shaped UI components
* Edit shape paths in CSS — Firefox Developer Tools
scroll-padding-block
====================

The `scroll-padding-block` shorthand property sets the scroll padding of an element in the block dimension.

Try it
------

The scroll-padding properties define offsets for the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

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

This property is a shorthand for the following CSS properties:

* `scroll-padding-block-end`
* `scroll-padding-block-start`
Syntax
------


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

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

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

### Values

`<length-percentage>`

An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

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

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

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

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

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

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
mask-position
=============

The **`mask-position`** CSS property sets the initial position, relative to the mask position layer set by `mask-origin`, for each defined mask image.

Syntax
------


```css
/\* Keyword values \*/
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/\* <position> values \*/
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/\* Multiple values \*/
mask-position: top right;
mask-position:
  1rem 1rem,
  center;

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


One or more `<position>` values, separated by commas.

### Values

`<position>`

One to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

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

|  |  |
| --- | --- |
| Initial value | `center` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Percentages | refer to size of mask painting area minus size of mask layer image (see the text for `background-position`) |
| Computed value | Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage. |
| Animation type | a repeatable list |

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

mask-position =   
  <position>#    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting mask position

 Change the `mask-position` value to any of the allowed values detailed above.
 If viewing the example in a Chromium-based browser change the value of `-webkit-mask-position`.

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

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

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

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

See also
--------

* Clipping and Masking in CSS
scroll-margin-block-end
=======================

The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

Try it
------

Syntax
------


```css
/\* <length> values \*/
scroll-margin-block-end: 10px;
scroll-margin-block-end: 1em;

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

### Values

`<length>`

An outset from the block end edge of the scroll container.

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

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

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

scroll-margin-block-end =   
  <length>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
scroll-margin-right
===================

The `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

Try it
------

Syntax
------


```css
/\* <length> values \*/
scroll-margin-right: 10px;
scroll-margin-right: 1em;

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

### Values

`<length>`

An outset from the right edge of the scroll container.

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

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

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

scroll-margin-right =   
  <length>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
line-break
==========

The **`line-break`** CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

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

### Values

`auto`

Break text using the default line break rule.

`loose`

Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.

`normal`

Break text using the most common line break rule.

`strict`

Break text using the most stringent line break rule.

`anywhere`

There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the `word-break` property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

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

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

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

line-break =   
  auto      |  
  loose     |  
  normal    |  
  strict    |  
  anywhere    
  
```

Examples
--------

### Setting text wrapping

See whether the text is wrapped before "々", "ぁ" and "。".

#### HTML


```html
<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>
```


#### CSS


```css
.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}
```


#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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

* CSS and International text
CSS filter effects
==================

The properties in the **CSS filter effects** module let you define a way of processing an element's rendering before the element is displayed in the document. Examples of such effects include blurring and changing the intensity of the color of an element.

### Filter effects in action

Play with the various sliders to apply filter effects to the image below:

To see the code for this filter effects sample, view the source on GitHub.

### Properties

* `backdrop-filter`
* `filter`
### Functions

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
Guides
------

Using CSS filter effects

Overview of the concepts surrounding CSS filter effects, including properties, filter functions, and SVG filters, with an explanation of filter values, source order, and value interactions.

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

* `<image>` data type
* `<filter-function>` data type
* `background-image` CSS property
* `background-blend-mode` CSS property
* `mix-blend-mode` CSS property
* interpolation glossary term
* `color-interpolation-filters` SVG property
Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 2  |
| Filter Effects Module Level 1  |

See also
--------

* Properties in the CSS compositing and blending module enable blending an element's background layers together and blending an element with its container
* The SVG `<filter>` element and the SVG filter primitives: `<feSpotLight>`, `<feBlend>`, `<feColorMatrix>`, `<feComponentTransfer>`, `<feComposite>`, `<feConvolveMatrix>`, `<feDiffuseLighting>`, `<feDisplacementMap>`, `<feDropShadow>`, `<feFlood>`, `<feGaussianBlur>`, `<feImage>`, `<feMerge>`, `<feMorphology>`, `<feOffset>`, `<feSpecularLighting>`, `<feTile>`, `<feTurbulence>`
CSS display
===========

The **CSS display** module defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

Reference
---------

### Properties

* `display`
### Data types

* `<display-outside>`
* `<display-inside>`
* `<display-listitem>`
* `<display-box>`
* `<display-internal>`
* `<display-legacy>`
Guides
------

Using the multi-keyword syntax with CSS display

Describes the multi-keyword syntax and compares this syntax with legacy single-keyword values.

### Flow layout (display: block, display: inline)

* Block and inline layout in normal flow
* Flow layout and overflow
* Flow layout and writing modes
* Introduction to formatting contexts
* In flow and out of flow
### Flexible box layout

* Basic concepts of flexbox
* Aligning items in a flex container
* Controlling ratios of flex items along the main axis
* Mastering wrapping of flex items
* Ordering flex items
* Relationship of flexbox to other layout methods
* Typical use cases of flexbox
### Grid layout

* Basic concepts of grid layout
* Relationship of grid layout to other layout methods
* Line-based placement
* Grid template areas
* Layout using named grid lines
* Auto-placement in grid layout
* Box alignment in grid layout
* Grids, logical values and writing modes
* CSS Grid Layout and accessibility
* CSS Grid Layout and progressive enhancement
* Realizing common layouts using grids
Specifications
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

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

See also
--------

* CSS flexible box layout module
* CSS grid layout module